Line Chart with Multiple Lines

Line Chart with Multiple Lines

This line chart compares weekly total deaths against the five-year average for deaths in a given region, using two distinct lines over time. The data is sourced from the UK’s official statistics, tracking figures from early 2020. The visualization uses D3 v5 with SVG rendering, employing `d3.line` and `d3.scaleTime` to map dates, and `d3.axisBottom` and `d3.axisLeft` for axes. The red line shows actual deaths, while the dashed blue line represents the historical baseline, with the x-axis formatted via `d3.timeParse`.

Nnford88

92% match

Multi Line Chart

This multi-line chart displays time-series data of deaths across multiple categories. The visualization uses D3.js v6 to render SVG paths, with each line representing a data series loaded from a remote CSV file. The chart includes axes with date and measurement scales, and each line is paired with a ghost-line overlay that responds to mouseover and mouseout events. These interactions trigger animated transitions that highlight the selected line and its label by changing stroke color, opacity, and width, while the y-axis is labeled "Deaths (in thousands)".

Ccwcu

84% match

Line Chart Linear Y Axis

A line chart displays the global cumulative count of COVID-19 deaths over time, with the y-axis scaled linearly from zero to the maximum total. Both the time-based x-axis and linear y-axis are rendered as SVG gridlines using D3 v7’s `axisBottom` and `axisLeft`, while the line is generated with `d3.line`. Interactive hover and marker lines are defined in separate `XMarkerline` and `YMarkerline` components, though they are not called in the main chart. Data comes from raw CSV files loaded via `d3.csv`.

81% match

Line Chart with Labels

A line chart displays cumulative global COVID-19 deaths over time, using a log-scaled y-axis to accommodate the data's exponential growth. The visualization highlights the most recent date on the x-axis and includes labeled axes for cumulative deaths and time. Built with React and D3 v7, the chart uses `scaleTime`, `scaleLog`, and `line` generators to render a single SVG path, with data fetched from a CSSE GitHub CSV.

81% match

Line Chart With Marker Lines and D3 Axes

This example visualizes global COVID-19 deaths over time as a line chart, with a horizontal marker line at six million deaths and a vertical marker at the most recent date. The chart uses React components wrapping D3 scales and axes, including `scaleTime`, `scaleLinear`, and `axisBottom` for gridlines. Data is loaded from a CSV file and aggregated by day from the CSSE COVID-19 dataset. Rendering uses SVG paths generated by D3's `line` generator.

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

Melting Data for Multiple Lines

This visualization tracks cumulative COVID-19 death counts across multiple countries over time, using a multi-line chart that plots deaths against days since the first reported case. The chart includes a draggable vertical line that, when positioned at a specific day, reveals the death toll for each country at that point in time. The code uses D3 v5 APIs including `nest()`, `scaleLinear`, and `line` with `curveBasis` to generate the paths, while a custom `colorLegend` module displays the categorical color scale using `scaleOrdinal` and `schemeCategory10`. Data comes from the included CSV files `data01.csv` and `data02.csv`.

Iinroadings

Visualization Labels

This example visualizes cumulative global COVID-19 deaths over time using a line chart. The time axis spans the dataset’s date range, while a logarithmic scale maps death totals. The chart includes labeled axes for “Time” and “Cumulative Deaths,” plus a title and horizontal/vertical marker lines with annotations. The visualization is built with React and SVG, using D3 v7 functions such as `scaleTime`, `scaleLog`, `line`, `axisBottom`, and `axisLeft`. Data comes from the CSSEGISandData COVID-19 global time-series CSV, loaded via `d3.csv`.

AAlex Stulov