Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Nov 11, 2021

Created on Nov 10, 2021

This visualization displays the growth of COVID-19 cases and deaths in the United States over time as a series of color-coded circles. The circles’ radii and colors are scaled using `d3.scaleSequential` with `d3.interpolateSpectral`, mapping case counts to a maximum radius of 150. As the data progresses, the circles expand along the x-axis, creating an animated timeline effect. The example uses D3 v7 to load and parse CSV data from the New York Times GitHub repository, updating SVG elements dynamically to reflect the changing values.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This visualization animates US COVID-19 case data from the New York Times, mapping cumulative cases over time as colored circles along a horizontal timeline. A sequential spectral color scale encodes case counts, with circle radius proportional to daily increases. The sketch.js file uses D3 v7 to load the CSV data, parse it, and render animated circles through an iterative drawing loop. The visualization demonstrates cumulative growth patterns from early January through August 2020, with color intensity shifting as case numbers escalate.

BBortrex

90% match

Loading thumbnail…

Fork of #4 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This animated scatter plot tracks COVID-19 deaths and case averages across the United States using a reusable D3 chart framework. The visualization cycles between two metrics every five seconds, transitioning circles smoothly along the time-based x-axis and linear y-axis. Data comes from the NY Times rolling averages dataset, rendered as SVG circles with a dual-axis format showing month labels and annual year markers. The chart uses D3 v6.7 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `transition` to handle the temporal updates and animated position changes.

Sserebryanaya.n@gmail.com

82% match

Loading thumbnail…

Fork of Fork

This visualization uses D3.js to plot COVID-19 data from a WHO global dataset, showing total cases against total deaths for each country as individual circles. The scatter plot uses D3's `csv` loader and `scaleLinear` functions to map the data, with axes labeled "Total Cases" and "Total Deaths." Circles are rendered in steelblue, and the chart is drawn as an SVG in a React application. The code defines its own width, height, and margins, using D3's `axisBottom` and `axisLeft` to generate the axes.

66264kusuma@gmail.com

82% match

Loading thumbnail…

Fork of Fork of Covid-19

This visualization displays a global map of cumulative COVID-19 cases on March 25, 2020, with orange circles sized by the square-root of case counts. Static by default, it includes a date slider that currently does not update the visualization. It loads world country boundaries via TopoJSON and renders them with `d3.geoPath` using a Mercator projection, while plotting case data from a CSV file. The implementation uses `d3.csv`, `d3.scaleSqrt`, `d3.scaleOrdinal`, and `d3.timeParse` to process and encode the data.

Ddas888530

82% match

Loading thumbnail…

Fork of #4 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This interactive scatter plot animates COVID-19 rolling averages for the United States, toggling between case and death counts over time. It uses the D3.js library with `scaleTime` and `scaleLinear` for axes, `transition` for smooth animations, and `selectAll().join()` for incremental updates. The visualization cycles between metrics every 2.4 seconds, slowing updating circle positions with a staggered delay effect. Data comes from the NY Times rolling-averages CSV, rendered as SVG.

CCurran Kelleher

81% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays COVID-19 biweekly case counts for the United States over time, using a smooth curved path rendered with d3.line and curveNatural. The chart is built with React functional components and d3.v5 scales, including scaleTime for the x-axis and scaleLinear for the y-axis, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded asynchronously from a CSV URL using d3.csv within a useData hook. The visualization uses SVG rendering with a Poppins font and muted teal styling for the line and axes, but omits data point circles.

Aamanoakane

81% match

Loading thumbnail…

Fork of #3 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This chart plots daily COVID-19 deaths and case averages across the US using NY Times rolling-averages data. An animated scatter plot, it cycles between two metrics every 2.4 seconds, with circles updating smoothly via D3’s `transition`. The reusable framework, built with `scatterPlot.js`, leverages `scaleTime` and `scaleLinear` for axes, plus `axisLeft`, `axisBottom`, and `timeFormat` for labeling. SVG rendering and the `d3.select` API manage the dynamic visualization.

DDasbach.EJ

81% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes CDC COVID-19 data, plotting daily new deaths against new cases, with each point representing a 14-day moving average. The chart reveals a general correlation where more infected cases correspond to more deaths. Built with D3 v6, the visualization uses `d3.csv` to load the dataset and `d3.scaleLinear` to map values to screen coordinates, with points rendered as SVG circles. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, and the chart fills the entire browser window.

VVonnie

81% match