[2]Plot launch year/month with menus

100%

[2]Plot launch year/month with menus

✓ Published0🌍 Public

Last edited Oct 31, 2020

Created on Oct 31, 2020

Forked from Plot launch year/month with menus

This interactive scatterplot visualizes space launch records, plotting each launch's month against its year. A dropdown menu filters the x-axis by time period, grouping years into ranges like 1957–1970 or 2009–2020. The y-axis remains fixed to months, with points rendered as small circles. Built with React and D3 v5, the chart uses `scaleLinear` and `scaleBand` for axes, `csv` to load data from a GitHub gist, and React Dropdown for menu controls. Each circle’s tooltip displays the launch year.

AI-generated description

The data shown here comes from Privatization of Space.

This chart meant to show each year which month the launch occurs. The Y menu only has one choice which is Month attribute, the X menu grouped years into groups.

In the future I wish to add dynamic mark radius, the larger the number of launches each month, the larger the radius. Right now it just shows that at this specific month in this specific year it has at least 1 launches.

MIT Licensed

Similar vizzes

Loading thumbnail…

Plot launch year/month with menus

This interactive scatterplot displays rocket launch years and months, with each circle marking at least one launch. A dropdown menu lets viewers filter the x-axis to show all years or specific date ranges. The visualization uses React for the interface and D3 scales for positioning, rendering marks as SVG circles. The y-axis is fixed to months, while the x-axis domain varies based on the selected range. Data comes from a CSV file detailing space privatization efforts.

TTaylor

94% match

Loading thumbnail…

Plot launch year/month

This scatterplot visualizes space launch activity by year and month, with each dot representing at least one launch occurring in that month. The x-axis groups years into five sequential ranges between 1957 and 2020, while the y-axis orders months from 12 down to 1. The visualization uses React and D3 v5, employing `scaleBand` for both axes, SVG circles for marks, and data sourced from a CSV file on TaylorW43’s GitHub gist. Custom `AxisBottom` and `AxisLeft` components render the tick marks.

TTaylor

90% match

Loading thumbnail…

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

TThandolwethu Shakes Dlamini

76% match

Loading thumbnail…

[1]Total Number of Rockets Throughout The Years

This visualization displays the total number of rocket launches per year, with a bar chart where the x-axis represents the year and the y-axis shows the launch count. Built with React and D3 v5, it uses SVG rendering and scales from `d3.scaleLinear` to map data values. The underlying data comes from a CSV file on privatization of space, and each bar includes a tooltip showing the specific year and count.

TTaylor

76% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes daily temperature readings from Logan Airport weather data collected between 2016 and 2018. Built with React and D3 v5, the visualization renders an SVG chart where users can switch between TMAX and TMIN values for the y-axis using ReactDropdown menus, while the x-axis displays dates scaled with d3.scaleTime. The d3.csv loading pipeline parses the raw data, and d3.extent determines the domain for both linear and time scales. Circle marks include native SVG title tooltips showing formatted dates.

Rrohame

76% match

Loading thumbnail…

customized Scatter plot with menus

Two dropdown menus allow the viewer to select which airplane attributes to plot on the x and y axes. The interactive scatter plot uses a dataset of airplanes, showing each plane as a circle with a tooltip displaying its x-axis value. Built with React and D3 v5, the code uses `scaleLinear`, `extent`, and `csv` for data processing, while the custom `Dropdown` component and `Marks` map the selected attributes to the axes and circles within an SVG canvas.

Rrsulli4

75% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes USA flights on-time performance, showing relationships between days of the month and delay metrics. Users can select different y-axis attributes (DEP_DELAY, DEP_DEL15, ARR_DELAY, ARR_DEL15) via dropdown menus built with ReactDropdown. The visualization uses React with D3 scales (scaleTime, scaleLinear) to map data into SVG marks, with custom axis components rendering tick marks. Data is loaded from a CSV file using d3.csv, with each point rendered as a circle containing a title tooltip.

XXinting Yao

75% match

Loading thumbnail…

Fork of IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes asylum case wait times in days against case entry dates, colored by decision code. A dropdown menu filters the display to show all years or a specific year from 2003–2011, with the x-axis switching between year and month/day formatting accordingly. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, with SVG rendering for axes, marks, and a hover-fading color legend. Data comes from a CSV file loaded via `d3.csv`, and missing years trigger a "no data" message.

Ssuji8073

74% match