Line

100%

✓ Published1🌍 Public

Last edited Nov 7, 2023

Created on Nov 7, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

LINE CHART

This line chart displays the number of confirmed COVID-19 cases in various Chinese provinces on January 21st, based on data from Data Canvas - Sense Your City. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.line with curveBasis to create a smooth, interpolated path. The SVG rendering includes axis labels, a title, and a light blue stroke for the line.

FFadziMandondo

86% match

Loading thumbnail…

Charts for Fun

This bar chart visualization displays the number of confirmed COVID-19 cases across Chinese provinces as of January 21, 2020. The chart uses a circular mark to represent each province's confirmed case count, with the y-axis scaled linearly and the x-axis using band scaling for categorical province names. The visualization demonstrates custom axis styling and labels using D3's axis functions, with data loaded from a local CSV file. The code uses D3 v5, specifically `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` for data loading. The SVG rendering includes bold, italic, and underlined title text.

FFadziMandondo

82% match

Loading thumbnail…

Untitled

This bar chart displays the number of confirmed COVID-19 cases across several Chinese provinces, using data from a local CSV file. The visualization uses D3.js v4 to map provinces on the x-axis and case counts on the y-axis, rendering bars in SVG with steelblue fill. The chart includes axes with ticks, axis labels, and a title, all positioned within an SVG canvas. The code constructs scales with `d3.scaleBand` and `d3.scaleLinear` and uses `d3.axisBottom` and `d3.axisLeft` for tick generation, with data loaded via `d3.csv`.

Vvine-web

82% match

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes COVID-19 confirmed cases across several countries using multiple animated line charts. The visualization uses D3.js v5 with SVG rendering to display data from CSV files, showing how cases grow over days since the outbreak began. The implementation employs D3 scales for linear and time axes, the `nest()` function to group data by country, and `line()` with `curveBasis` to generate smooth paths. A color legend and animated transitions update the lines dynamically, while a custom `yValue` function adds random variance to China’s data for demonstration purposes.

Vvans01

82% match

Loading thumbnail…

Charts for Fun

This example creates a bar chart from a CSV file, displaying confirmed COVID-19 cases across Chinese provinces on January 21, 2020. The visualization uses D3 v5’s `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to map provinces to the x-axis and case counts to the y-axis. Red, semi-transparent circles are drawn with `.append("circle")`, and custom titles and axis labels are added as SVG text elements. The underlying data is loaded using `d3.csv`.

FFadziMandondo

81% match

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

81% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization animates the growth of COVID-19 confirmed cases across multiple countries, using stacked line paths that extend day-by-day. The y-axis applies a random multiplier to China’s data after day 52, creating a visual distortion. Built with D3 v5, it uses `scaleLinear`, `nest`, and `line` with `curveBasis` to generate smooth trajectories, while `transition` animates the lines. Country labels and color-coded legends are rendered as SVG text and circles, with data sourced from CSV files.

Sshehrbano1248

80% match

Loading thumbnail…

D3 Bar chart

This bar chart visualizes the confirmed COVID-19 case counts across several Chinese provinces, using data from a local CSV file. It employs an SVG rendering approach with D3 v4's `scaleBand` for the categorical province axis and `scaleLinear` for the continuous case count axis. The chart displays horizontal bars whose heights are proportional to the number of cases, with axes labeled and styled using `d3.axisBottom` and `d3.axisLeft`. The file is a static, non-interactive visualization generated entirely through D3's imperative API.

Vvine-web

80% match