Untitled

100%

✓ Published0🌍 Public

Last edited Jul 28, 2020

Created on Jul 28, 2020

Forked from Temperature in San Francisco Line Chart

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.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

Made in this video:

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

RRodrigo Vallejos

84% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes the cumulative and daily COVID-19 case counts for ten countries up to July 28, with buttons to toggle between total and daily cases. Lines are drawn with an animated stroke-dashoffset transition using D3’s `transition()` method, and SVG paths are generated via `d3.line()`. The chart includes a color legend mapping countries to a categorical scheme, axis labels, and annotations marking notable events. Data is loaded from a CSV file, and the visualization is built with React and D3 v5, rendered as SVG with animation.

Aashpradhan01123

83% match

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays the cumulative COVID-19 case counts for the top 10 countries from January to July 2020, using multiple animated line paths over a time-based x-axis and a linear y-axis. Each country’s line is color-coded via a d3.scaleOrdinal with a category scheme, and a legend is rendered with d3’s select/enter/merge pattern. The lines animate using `transition.attrTween`-like path drawing with `stroke-dasharray` and `stroke-dashoffset`, while axes are built with d3.axisBottom and d3.axisLeft. Data comes from a CSV file, loaded without visible d3.csv (assumed external).

Aashpradhan01123

83% match

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

82% match

Loading thumbnail…

Untitled

A dashboard of linked COVID-19 visualizations shows global cases via a Leaflet map, interactive line charts of pandemic metrics, and scatter plots. Users can select countries on the map to filter data, while brushable axes and k-means clustering reveal relationships like GDP per capita versus case rates. Built with d3.v7 and SVG animations, the dashboard loads data from a CSV and GeoJSON files.

Bbhargav83

81% 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

80% match

Loading thumbnail…

d3 choropleth map

This interactive choropleth map visualizes the spread of COVID-19 cases across countries over time, using an animated timeline that cycles through daily data from January to July 2020. The map renders world country boundaries as SVG paths using the Eckert5 projection, with each country’s fill color dynamically updated based on its reported case count for the currently displayed date. Built with D3 v3, it leverages `d3.geo.path`, `d3.geo.eckert5`, `d3.geo.graticule`, TopoJSON for geographic data, and a CSV dataset, while a play button and date label drive the sequential animation.

Aashpradhan01123

80% 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

79% match