A8 Line Chart 2

100%

A8 Line Chart 2

✓ Published0🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

This visualization displays nuclear warhead stockpiles for the US, Russia, UK, France, and China from 1945 to 2020, using a multi-line chart with a power scale on the y-axis. The lines are rendered as SVG paths with d3.line and curveBasis. Users can zoom and pan along the x-axis via d3.zoom, which rescales and redraws the lines through an update function. Hovering highlights a line, while clicking toggles its visibility.

AI-generated description

References:<br> https://www.d3indepth.com/zoom-and-pan/<br> https://bl.ocks.org/LemoNode/a9dc1a454fdc80ff2a738a9990935e9d<br> https://github.com/d3/d3-zoom<br> https://bl.ocks.org/Simonl07/778eb635c34bd2158706ac72aecbc979

MIT Licensed

Similar vizzes

Loading thumbnail…

Count Over Time for Nuclear Explosions

This visualization shows the annual count of nuclear explosions per country from the 1940s onward, highlighting shifts in leadership between the USA and USSR over time. It uses a line chart where the y-axis aggregates counts by country, with each line colored by nation. The code builds the chart with vega-lite-api, wraps it with vega and vega-lite, and loads data from a CSV via d3.csv (using d3 v5). Tooltips are enabled through vega-tooltip, and custom axis styling is defined in a separate config file.

Rrachelhahn

71% match

Loading thumbnail…

Multiple Line Chart

This multi-line chart displays military spending trends from 2001 to 2020 across eight countries, with the y-axis showing spending amounts and the x-axis representing years. The visualization uses D3 v5 to render an SVG, applying `scaleLinear` for both axes, `line` with `curveBasis` for the path, and `nest` to group data by country. The chart includes axis labels, a title, and a single maroon line path, though the nested data structure is logged but not separately rendered as distinct lines.

KKinjal-Goyani

71% match

Loading thumbnail…

ICE 7- Line Chart

This line chart displays nuclear energy usage across countries from 2010 to 2019, with year on the x-axis and nuclear usage values on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG path. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into date and numeric values. Axes include tick lines and labels, with custom styling for axis text, titles, and the maroon line path defined in an external stylesheet.

BBajiSharifPatan@my.unt.edu

70% match

Loading thumbnail…

ICE-7:Line Chart

This line chart displays the highest nuclear energy consumption from 2010 to 2020, with the year on the x-axis and nuclear usage on the y-axis. Built with D3 v5 and rendered as SVG, the visualization uses `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and the `line` generator to create the path. Data is loaded from a CSV file via `csv`, with dates parsed using `d3.timeParse`. The styling uses custom CSS classes for grid lines, labels, and the brown line stroke.

BBajiSharifPatan@my.unt.edu

70% match

Loading thumbnail…

Marks and channels

This chart displays the number of nuclear weapons for various countries using horizontal bars. The visualization employs a bar chart with axes and scales, colored in a single red tone. Built with React and D3 version 5, the code uses `d3.csv` to load data from a remote URL, `d3.scaleBand` and `d3.scaleLinear` for scales, and renders the output as SVG. The chart’s axis labels and tick marks are generated from the scales, while the bar lengths encode the numeric values from the dataset.

Rreddyakshitha

70% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3.JS

This example visualizes the top 9 nuclear-armed countries by their 2020 warhead counts using a horizontal bar chart. It employs React and D3.js v5 to render SVG marks and channels, with a green color scheme and red bars, and includes axis ticks and labels. The data is loaded from a CSV file using `d3.csv`, and the scales are created with `scaleBand` and `scaleLinear`. The chart displays a title and country names along the categorical axis, with the numeric axis representing the nuclear weapon counts.

BBajiSharifPatan@my.unt.edu

70% match

Loading thumbnail…

ic7

This visualization displays nuclear energy production over time from 2010 to 2019, combining a smooth line and filled area chart to emphasize both trend and magnitude. The x-axis maps years using d3.scaleTime, while the y-axis uses d3.scaleLinear for energy values. The code employs d3.line, d3.area, and d3.curveBasis to generate the curved shapes, with d3.csv loading the data from a GitHub gist. Red strokes and a sky-blue area fill highlight the changes in nuclear usage across the decade.

Ppreethamkesa

69% match

Loading thumbnail…

ICE-7

This example shows a line chart of the highest nuclear energy consumption from 2010 to 2020, with the year on the x-axis and nuclear usage on the y-axis. The visualization uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render an SVG with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators. The chart includes labeled axes, red tick text, blue grid lines, and a brown stroke for the line path. The data is fetched from a GitHub gist.

Ppreethamkesa

68% match