Skip to main content
SimilarExport ZIP
100%

scatter-move

✓ Published0🌍 Public
Ttenghaoman
Last edited Aug 8, 2020
Created on Aug 8, 2020
Forked from D3 Face

A scatterplot animates daily COVID-19 case counts across Hubei regions, plotting cumulative confirmed cases on a logarithmic x-axis against new daily cases on a logarithmic y-axis. Each circle represents a region, colored distinctly, and transitions smoothly between dates using D3 v5's `transition().duration()` within a `setInterval` loop. The SVG axes are rendered with `d3.axisLeft` and `d3.axisBottom`, with data parsed from `hubeinxt.csv`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter-Animation

A scatterplot animates the daily progression of COVID-19 cases across Hubei, China, with each circle representing a region’s cumulative confirmed cases versus new cases on a log scale. The visualization uses d3.v6 with SVG and transitions to move points between dates, while a legend identifies regions. Data comes from a CSV file tracking metrics like confirmed, cured, and dead counts. Axes, labels, and a date display update over time, driven by the `renderupdate` function and D3’s transition API.

Vvivianaaai@qq.com
93% match
Loading thumbnail…

Scatter-Animation

A scatterplot animates the daily progression of COVID-19 cases across Hubei, China, with each circle representing a region’s cumulative confirmed cases versus new cases on a log scale. The visualization uses d3.v6 with SVG and transitions to move points between dates, while a legend identifies regions. Data comes from a CSV file tracking metrics like confirmed, cured, and dead counts. Axes, labels, and a date display update over time, driven by the `renderupdate` function and D3’s transition API.

Vvivianaaai@qq.com
93% match
Loading thumbnail…

Scatter-Simple

A dynamic scatterplot tracks the spread of COVID-19 across Hubei, China, from January to February 2020. Each circle represents a prefecture-level city, positioned by cumulative confirmed cases (x-axis) and newly confirmed cases (y-axis), both using a logarithmic scale. An animation cycles through daily snapshots, updating the data bound to each circle via D3's data join and `transition`. The visualization uses `d3.csv` to load the data and `d3.scaleLinear` for the axes, with circles colored by region and rendered as SVG within React.

Mmorjyooo
89% match
Loading thumbnail…

Circles on a Map

A time-series slider animates the spread of COVID-19 cases across a world map. Red circles, sized with `d3.scaleSqrt` according to confirmed case counts for each date, are positioned using the `d3.geoNaturalEarth1` projection. The visualization uses a slider built with `d3.drag` to scrub through dates, updating circle radii and tooltips. Country boundaries and hover states are rendered with `d3.geoPath`, with data loaded from a CSV of confirmed cases.

HHeechan lee
77% match
Loading thumbnail…

Line Chart Template

This example plots daily COVID-19 case counts in Hubei province over time as a smooth, maroon line. The chart uses a time-scaled x-axis for dates and a linear y-axis for case numbers, with gridlines and labeled axes for clarity. Built with D3 v5, it loads data from a CSV file using `d3.csv`, scales it with `scaleTime` and `scaleLinear`, and renders the line via the `d3.line` generator with a `curveBasis` interpolation. The visualization is drawn as SVG elements, including axes, a title, and the line path.

LLex
76% match
Loading thumbnail…

Scatter Plot 2

A scatter plot displays the relationship between confirmed and active COVID-19 cases, with each circle representing a data point. The visualization uses React components to render SVG elements, with d3.scaleLinear managing the x and y scales. Axes are generated from array methods like xScale.ticks() and map(), while the data loads through d3.csv with multiplication applied to numeric values. The chart includes axis labels and tooltips showing formatted values using d3.format with SI notation.

NNikithakatta30
76% match
Loading thumbnail…

Scatterplot

This scatterplot displays COVID-19 case rates per 100,000 people for ten highly affected U.S. counties, ranked along the y-axis with case counts on the x-axis. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for positioning, and d3.axisLeft and d3.axisBottom with custom tick formatting. Circles are appended via d3.selectAll and data joins, styled with blue fills and black strokes. The chart includes grid lines and a title, with data sourced from Statista via Elflein (June 2020).

Mmla341
75% match
Loading thumbnail…

Working with Time

This scatter plot visualizes COVID-19 data, showing the daily increase in positive cases (y-axis) against time (x-axis) as a series of circular marks. The visualization uses React to render SVG elements, with D3 v5 scales including `scaleTime` and `scaleLinear` to map data to coordinates. The code employs `d3.csv` for data loading from a GitHub-hosted CSV file, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Each circle includes a native SVG `<title>` element for tooltips displaying formatted dates, and the chart is styled with the Poppins font.

Aanduskong
75% match