Scatter Plot

100%

✓ Published0🌍 Public

Last edited Oct 17, 2017

Created on Oct 7, 2017

This example visualizes nuclear bomb test counts from 1945 to 2009, with each circle representing a country’s annual total. The x-axis shows the year, the y-axis shows bomb counts, and colors distinguish six countries, sourced from Johnston’s Archive via a processed CSV. Built with D3 v4, it uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for scales, plus `d3.legendColor` from d3-legend for the color legend. Interactive features include hover tooltips displaying exact counts, while the SVG rendering updates responsively on window resize.

AI-generated description

Part of the video course: D3.js in Motion.

An example scatter plot with color legend using D3 and d3-legend.

This scatter plot shows the dataset of nuclear bomb test history. Originally published at Johnston's Archive - Nuclear Weapons, this small dataset records every nuclear bomb tests from 1945 to 2009. The original dataset have 6 countries' each year nuclear test. The raw data is not well organized in CSV format. So I use Python with Pandas to parse it into a proper format. Each row of the table represents an country's nuclear bomb test counts for that year.

In this scatter plot, Y axis is the count of the nuclear bomb test and X axis is representing year. Each circle is represent that year's total test for one country. Each country has different color and hover on the circle will display the actual count number for the nuclear test.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/ecb09f2605c7fbbadf0eeb75da5f0a6b'>Stylized Scatter Plot with Color Legend</a>

forked from <a href='http://bl.ocks.org/YouthBread/'>YouthBread</a>'s block: <a href='http://bl.ocks.org/YouthBread/6b406e4d96f23ce64c1f7cb745b0722a'>Scatter Plot</a>

forked from <a href='http://bl.ocks.org/YouthBread/'>YouthBread</a>'s block: <a href='http://bl.ocks.org/YouthBread/cce54e06cbcd77f8c782fa060731e865'>Scatter Plot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the history of nuclear bomb tests from 1945 to 2009, with each circle representing a country's annual test count. The x-axis shows the year, while the y-axis shows the number of bombs tested. Circle size also encodes the count, and color distinguishes six countries, as labeled by an interactive color legend. Hovering over a circle reveals the exact bomb count via a tooltip. Built with D3 v4 and d3-legend, the SVG visualization uses scales like `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map data from a CSV file. The data was originally sourced from Johnston's Archive and cleaned with Python and Pandas.

YYouthBread

96% match

Loading thumbnail…

D3 Scatter Plot-Nuclear Explosions

This scatter plot visualizes global nuclear explosions, mapping detonation year on the x-axis and depth on the y-axis for each test. The dataset, sourced from the Stockholm International Peace Research Institute, is color-coded by country using a fixed palette. The code loads CSV data via `d3.csv`, scales positions with `d3.scaleLinear`, and renders circles as SVG elements. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while the plot fills the browser window with a responsive layout.

RRochelle

83% match

Loading thumbnail…

Data Summary

This donut chart shows the percentage of nuclear explosions detonated by each country from 1945 to 1998, based on data from the SIPRI report. It uses d3.nest to aggregate the CSV data by country and d3.pie with d3.arc to generate the SVG paths. A d3.legendColor adds a color legend, and a hover tooltip is implemented but not populated with content.

EEndNight95

79% match

Loading thumbnail…

Data Summary

This pie chart visualizes the percentage of nuclear explosions detonated by each country between 1945 and 1998, using data from the IAEA’s “Nuclear Explosions, 1945–1998” report and structured data from GitHub. The visualization is built with D3 v4 and renders an animated, interactive donut chart in SVG. Hovering over a slice highlights it in magenta and displays a tooltip with the detonating nation and the total count. A color legend identifies each country, and the chart is based on Curran's donut chart, adapted for this dataset.

ZZijunXu

79% match

Loading thumbnail…

Map of Nuclear Explosions with Time Histogram

This interactive visualization combines a geographic map of U.S. nuclear explosion sites with a time histogram. The map displays each detonation as a circle, with color indicating the responsible country and a legend that filters points on hover. A separate bar chart below shows the total number of nuclear events per year. Built with React and D3 v5, the visualization uses `geoAlbers` projection via `d3.geoPath`, scales from `d3.scaleOrdinal`, and a histogram created with `d3.histogram`. Data comes from the Nuclear Explosions CSV dataset.

Yyyaaa1

77% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the number of occurrences for each nation, with country names on the y-axis and values on the x-axis. The visualization uses D3 v6 with SVG rendering, importing `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` from D3. Data is loaded from a local CSV file, with values multiplied by 1000. Rectangles represent each country, scaled proportionally to their numeric values, with formatted tick labels using `format('~s')` to abbreviate large numbers.

Mmarcob896

76% match

Loading thumbnail…

Map of Nuclear Explosions with Time Histogram

Combining a world map with a time-series histogram, this visualization plots nuclear explosions by latitude and longitude, with point size encoding yield magnitude and color indicating the responsible country. Hovering a country in the legend filters the map, while clicking a point reveals detailed deployment information. Two dropdowns filter by purpose and type of explosion. The lower histogram bins events by year using d3.bin, with counts shown on hover. Built with React, it renders SVG via d3.geoPath for the Natural Earth landmasses and d3.scaleSqrt for proportional symbol sizing.

Mmkt-ds

76% match

Loading thumbnail…

Final Project: Map of Nuclear Explosions

This map visualizes nuclear explosions worldwide, with circle size encoding explosion magnitude and color encoding the responsible country. A linked histogram below shows the temporal distribution of events, supporting brush selection to filter the map by time period. Interactive elements include hover states on points and the color legend, click-to-inspect details, and dropdown menus filtering by purpose and deployment type. Built with React, it uses d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.scaleSqrt for sizing, d3.scaleOrdinal for color, and d3.brushX for timeline filtering. Data comes from a nuclear explosions CSV dataset, with country boundaries from World Atlas TopoJSON.

Rrachelhahn

76% match