Multiple Colored Lines

100%

Multiple Colored Lines

✓ Published1🌍 Public

Last edited Jul 28, 2021

Created on Jul 28, 2021

This example displays global COVID-19 cumulative death counts over time as multiple colored lines, one for each country. The visualization uses a logarithmic y-axis to accommodate the wide range of values, with grid lines extending across the chart from both axes. Built with React and D3 v7, the chart renders SVG paths using `d3.line`, `scaleTime`, and `scaleLog`, while axes are generated with `axisBottom` and `axisLeft`. Data comes from a CSV file processed with `d3.csv` and `timeParse`. Each country is assigned a random RGB stroke color.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Multiple Colored Lines With Voronoi Overlay

This example visualizes global COVID-19 deaths over time with multiple colored lines, one per country, on a log-scaled y-axis. Hovering near any line highlights that country’s full path in black, using a `d3.Delaunay` Voronoi overlay to capture mouse proximity. The chart is built with React and renders SVG, using `d3.scaleTime`, `d3.scaleLog`, and `d3.line` for the axis and line generation. Data comes from the CSSEGISandData COVID-19 time-series CSV, parsed with `d3.csv` and `timeParse`, showing roughly twenty countries.

AAlex Stulov

92% match

Loading thumbnail…

Coronavirus Multiple Lines

A log-scale multi-line chart tracks cumulative COVID-19 deaths over time for each country, using color-coded paths to compare global mortality trends. The visualization loads data from a CSSEGISandData GitHub CSV, transforms it with d3.csv and timeParse, and renders SVG paths via d3.line and d3.scaleLog. React manages the component state, while d3.axisBottom and axisLeft generate labeled gridlines. Random RGB stroke colors distinguish countries, with a title and axis labels annotating the chart.

AAndre J Denais

91% match

Loading thumbnail…

Line Chart with Multiple Lines by Country

This line chart displays cumulative COVID-19 deaths over time for multiple countries, with each country represented by a randomly colored line. The chart uses a logarithmic y-axis to accommodate the wide range of death counts. Built with React and D3 v7, it employs `scaleTime` for the x-axis and `scaleLog` for the y-axis, creating paths with `d3.line`. Data comes from the COVID-19 Global Deaths time series on GitHub, processed via `d3.csv`.

OOleg Zhernovoy

91% match

Loading thumbnail…

Visualization Labels

This example displays the global cumulative death toll from COVID-19 over time as a single black line on a log-scaled y-axis, with labeled axes and a title. The chart uses React to render an SVG and relies on `d3.scaleTime`, `d3.scaleLog`, and `d3.line` for data mapping and path generation, while `d3.axisBottom` and `d3.axisLeft` create the gridlines. Data comes from the JHU CSSE COVID-19 time-series CSV, aggregated daily across all countries, with deaths counted from the start of the outbreak.

NNikita Toropov

89% match

Loading thumbnail…

Coronavirus Chart with Multiple Lines

This chart visualizes cumulative global COVID-19 deaths over time, with each line representing one country or region’s death total. All time series are overlaid on a shared time scale and a logarithmic y-axis for death counts, which compresses the wide range of values. The visualization is built with React and D3 v7, using `scaleTime`, `scaleLog`, and the `line` generator to render the paths as SVG elements. Data comes from the CSSE COVID-19 time series CSV, loaded and parsed via `d3.csv` and `timeParse`.

KK3zter

89% match

Loading thumbnail…

Line Chart with Multiple Lines by Country With Voronoi Overlay

This multi-line chart displays cumulative COVID-19 death totals over time for each country, using a logarithmic y-axis. A Voronoi overlay, built with `d3.Delaunay.from` and `voronoi.renderCell`, partitions the chart area into cells; hovering over any cell highlights the corresponding country’s line in black. The visualization, rendered in SVG via React, uses D3’s `scaleTime` and `scaleLog` to map data from the CSSE global time-series CSV, with axes generated by `axisBottom` and `axisLeft`.

OOleg Zhernovoy

88% match

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes COVID-19 death counts over time for seven countries, with each country represented as a colored line and labeled at its final data point. The chart uses a linear time scale for days since the 10th death and a linear scale for death counts, with axes and a color legend rendered by custom D3 functions. The code loads CSV data, processes it, and uses `d3.nest` to group by country, `d3.line` with `curveBasis` for smooth paths, and `d3.scaleOrdinal` for colors. The visualization is rendered as SVG with D3 v5.

Iinroadings

88% match

Loading thumbnail…

Sample code of Coronavirus Deaths Over Time by Country

This visualization shows cumulative COVID-19 deaths over time for each country, with each country represented as a separate colored line on a logarithmic scale. The React component builds an SVG chart using D3 v5 scales (`scaleTime`, `scaleLog`) and axis generators. Data comes from the Johns Hopkins COVID-19 dataset via `d3.csv`, and the line generator uses `d3.line` with time parsing via `timeParse`. Each path receives a random RGB stroke color, while gridlines and axis labels are rendered through reusable D3 axis components.

Ssmile2git

88% match