Plot launch year/month with menus

100%

Plot launch year/month with menus

✓ Published2🌍 Public

Last edited Oct 11, 2020

Created on Oct 5, 2020

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.

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…

[2]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.

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

89% 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

79% match

Loading thumbnail…

Fork of Date on a map

This visualization combines a world map of launch sites with a date histogram to explore historical launch data. React components render a D3 geoEqualEarth projection with graticules and country boundaries, while red circles sized by a d3.scaleSqrt show the number of launches per site. A brushed time series in the lower panel filters the map interactively via d3.brushX. The data comes from a CSV of historical launches, and all rendering uses SVG paths, rects, and circles.

DDonya-Vafanejad

74% 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

73% match

Loading thumbnail…

All Space Missions from 1957

This visualization displays all space missions since 1957 as a scatterplot, with each point representing a single rocket launch. The x-axis encodes the mission date (Datum) while the y-axis lists the company name. The plot is rendered using the Vega-Lite API, which is registered with the Vega and Vega-Lite libraries. The code loads CSV data from a GitHub gist via `d3.csv`, and the chart is configured with a custom dark color scheme, no axis domain lines, and a responsive auto-fit size. Tooltips are enabled through the Vega-Tooltip handler.

Ggeorgeeeee

73% 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

73% 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

72% match