Skip to main content
SimilarExport ZIP
100%

Scatter-Animation

✓ Published1🌍 Public
Vvivianaaai@qq.com
Last edited Nov 7, 2023
Created on Nov 7, 2023
Forked from 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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

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
100% match
Loading thumbnail…

scatter-move

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`.

Ttenghaoman
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
92% 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
81% match
Loading thumbnail…

Line

This visualization displays the progression of COVID-19 cases across multiple Chinese provinces from January to February 2020. It animates line curves for each province, showing the count of existing confirmed cases over time, with provinces added sequentially. The code uses D3 v6 with a time-scale for the x-axis and a reversed linear scale for the y-axis, rendering SVG paths with cardinal spline curves. Data is loaded from a CSV file, and each province’s line is animated into place using d3 transitions over two seconds.

Vvivianaaai@qq.com
79% match
Loading thumbnail…

Untitled

A scatter plot tracks COVID-19 confirmed cases against deaths on logarithmic axes, with each point representing a country and its population and regional color encoding. Overlaid dark-red lines radiate from the origin, annotating fatality rates and country labels. A circular legend explains the point size, color, and opacity encoding. The React-based D3 visualization uses `d3.axisBottom`, `d3.min`, and `d3.ticks` for axes and grid, while custom functions render the legend, annotations, and rotated fatality labels, using county-level GeoJSON data from `county.json` as a backdrop.

Pphemmati
79% 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
79% match
Loading thumbnail…

Scatter Plot for Covid

This scatter plot visualizes COVID-19 data for the top 10 countries, showing the relationship between total cases and total deaths. The visualization uses D3.js v7 with SVG rendering to display circles for each country, where the x-axis represents total cases and the y-axis represents total deaths. The code loads CSV data from a GitHub gist, processes it with JavaScript array methods, and uses d3.scaleLinear to create scales for both axes. Axis labels and grid lines are generated using d3.axisBottom and d3.axisLeft, with margins defining the plot area.

MM Hema
78% match