Number of Missions by Year and Country with an Interactive Color Legend

100%

Number of Missions by Year and Country with an Interactive Color Legend

✓ Published0🌍 Public

Last edited Oct 14, 2020

Created on Oct 14, 2020

This scatter plot displays the number of space missions per year, with each country (USA, Russia, China, Kazakhstan) represented by a distinct color. An interactive color legend allows hovering over a country name to highlight its corresponding circles while fading others. The visualization uses D3 scales (`scaleTime`, `scaleLinear`, `scaleOrdinal`) and React components for rendering SVG circles grouped by year. Data comes from a Kaggle CSV file processed with D3’s `csv` and `nest` functions, with axes and legend developed as custom React components.

AI-generated description

This Scatter Plot shows the number of Missions per year where each Country is represented by a different color.

The data shown here comes from Kaggle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Number of Space Missions by Company/Country/Status Rocket

A stacked bar chart shows the number of space missions grouped by company, country, or rocket status, with mission status encoded by color and tooltips revealing exact counts. A dropdown menu lets viewers switch the x-axis dimension among these attributes. Built with React, the visualization uses the Vega-Lite API to render bars and a custom `getData` function fetches CSV data via `d3.csv`, extracting the country from the mission location.

Nnaisargidave

79% match

Loading thumbnail…

Fork of Number of Space Missions by Company/Country/Status Rocket

This stacked bar chart displays the number of space missions by company, country, or rocket status, with mission status encoded by color and total counts shown via tooltip on hover. A dropdown menu lets users switch the x-axis attribute among these three categories. The visualization is built with the vega-lite-api, registered with vega and vega-lite, rendering as SVG. Data is loaded asynchronously from a CSV file via d3.csv, and a React component manages the dropdown state and chart re-rendering.

Ssuji8073

77% match

Loading thumbnail…

Number of Space Missions by Company/Country/Status Rocket

This stacked bar chart shows the number of space missions by company, country, or rocket status, with mission status indicated by color. A dropdown lets users switch the x-axis attribute among these three categories. The visualization uses Vega-Lite, registered through the vega-lite-api, with D3 for CSV data loading and React for the interface. Data comes from a GitHub-hosted CSV of space missions, and the chart renders as an SVG with a custom tooltip handler.

Nnaisargidave

77% match

Loading thumbnail…

Fork of Number of Space Missions by Company/Country/Status Rocket

This interactive stacked bar chart visualizes the number of space missions, segmented by mission status and grouped by a selectable attribute (Company Name, Country, or Rocket Status) via a dropdown. Users can hover over bars to see exact mission counts. The visualization is built using React, the Vega-Lite API (vl) with D3 for data loading, and uses a CSV file from a GitHub gist as its data source. The chart's appearance is customized through a config object.

NNarayana Reddy

76% match

Loading thumbnail…

Fork of Number of Space Missions by Company/Country/Status Rocket

NNarayana Reddy

76% match

Loading thumbnail…

Number of Space Missions by Company

This interactive stacked bar chart displays the number of space missions for each company, with the mission status (e.g., success, failure) encoded by color. Hovering reveals the mission count via tooltip. The visualization is built with the vega-lite-api, using vega-lite and vega for rendering, and a react-dropdown component allows toggling between grouping by Company Name or Location. Data is fetched from a remote CSV using `d3.csv`.

Nnaisargidave

75% match

Loading thumbnail…

Country wise Space Missions with Brushing

This visualization combines a world map with a time-series histogram to explore space missions by country. A natural Earth projection renders country boundaries and graticules, while semi-transparent circles sized by mission count mark each country. Users can brush along the histogram’s time axis to filter the map, updating the displayed circles interactively. The example uses d3.geoNaturalEarth1, d3.geoPath, d3.brushX, and d3.bin, with data from a Kaggle-hosted CSV and country shapes from World Atlas TopoJSON.

Nnaisargidave

74% match

Loading thumbnail…

Country wise Space Missions with Brushing

A world map displays the number of space missions per country, with circle size scaled by mission count using a square-root scale. A time-series histogram at the bottom shows missions per month, and users can brush a date range to filter the map’s circles. Built with D3 v5 and React, the visualization uses `geoNaturalEarth1` and `geoPath` for the map projection, `brushX` for the brushing interaction, and `scaleSqrt` for sizing. Mission data is sourced from Kaggle, and country boundaries come from the World Atlas TopoJSON.

Nnaisargidave

74% match