Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
RRodrigo Vallejos
Last edited Mar 13, 2020
Created on Mar 13, 2020
Forked from Untitled

This visualization shows the progression of confirmed COVID-19 cases, deaths, and recoveries across multiple countries from January to March 2020. It uses a multi-line chart with time on the x-axis and case counts on the y-axis. The code loads data from three CSV files and uses d3.csv, d3.scaleLinear, d3.line, d3.axisLeft, d3.axisBottom, and d3.curveBasis to render the chart. A timer updates the displayed date range, animating the lines as new data points appear over time.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A line chart depicts COVID-19 cases and deaths in the US over time. Two smooth, animated curves, one red and one blue, trace these metrics, with axes for dates and population counts. Built with React, D3 v4, and SVG, it uses `d3.line`, `d3.curveMonotoneX`, and `d3.transition` for drawing. Data comes from a CSV file, which is loaded via `d3.csv`.

SSaroj Khanal
87% match
Loading thumbnail…

COVID-19

This interactive D3.js visualization displays COVID-19 metrics over time for selected countries, allowing viewers to toggle between confirmed cases, deaths, and recoveries via two dropdown menus. The line chart uses a time-based x-axis and a linear y-axis, with a single red, blue, or green line rendered per selection. Data is loaded from a CSV file, processed by nesting and grouping entries by date, and filtered by country. The visualization uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for smooth curves.

WW9183907
86% match
Loading thumbnail…

Untitled

This visualization displays a horizontal bar chart of the top 20 countries by COVID-19 case counts, using data from a CSV file loaded via d3.csv. The chart maps country names on a d3.scaleBand y-axis and case numbers on a d3.scaleLinear x-axis, with blue bars and gridlines rendered as SVG elements. The React component fetches the data asynchronously, parses numeric values, and uses d3’s max function to set the x-domain, while y-axis labels and ticks are manually positioned using SVG text and line elements.

Bblikitha
86% match
Loading thumbnail…

Untitled

This visualization displays COVID-19 total cases by location using a bar chart rendered with SVG. It loads data from a CSV file via d3.csv, then uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, with a fixed domain of 0 to 13. The bars are drawn as rectangles with a teal fill, and axis labels are rotated for readability. The chart is built with d3.v4 within a React framework, though the core logic is plain D3 JavaScript.

Bbhargav83
85% match
Loading thumbnail…

COVID-19

This D3.js visualization shows the progression of COVID-19 cases, deaths, and recoveries over time for a selected country. Users choose a status metric and country via dropdown menus, and the chart displays a smooth line chart of that metric against observation dates. The code uses D3 v5 methods like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file and aggregated by country and day using `nest` and a custom `groupByDay` function.

WW9183907
85% match
Loading thumbnail…

Untitled

This line chart visualizes the daily count of global COVID-19 cases across multiple countries from January to April 2020. The code uses d3.csv to load the data and d3.time.scale and d3.scale.linear for the axes, with d3.svg.line and an interpolate("basis") curve for the paths. It animates the drawing of each country’s line using transition and stroke-dasharray. The line for Brazil is highlighted in green, while all other countries are drawn in black. Data originates from a global cases CSV file.

Aashpradhan01123
84% 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
83% match
Loading thumbnail…

Untitled

This visualization presents a hierarchical tree map of COVID-19 case data, showing confirmed cases, deaths, and recoveries by continent and country. The root node aggregates global totals, branching into regions like Asia and individual nations, with China expanding into its provinces. Built with D3.js v5, the code uses a standard tree layout to position nodes and likely links, with each node displaying its name and associated metrics. The static data is embedded directly in the script, sourced from real-world pandemic statistics as of late April 2020. The visualization uses a simple, unstyled SVG rendering without interactive features or transitions.

Pphemmati
83% match