Line chart Margin convention

100%

Line chart Margin convention

✓ Published1🌍 Public

Last edited Mar 16, 2022

Created on Mar 16, 2022

A line chart plots cumulative COVID-19 deaths over time, drawn with d3.line, d3.scaleTime, and d3.scaleLinear in SVG. Marker lines at 10,000 deaths and the latest date use custom React components. The margin convention isolates the plot area, and the chart triggers a bounding-box transition on load. Data comes from a JHU CSSE CSV.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Coronavirus Line Chart with Marker Line Margin Convention

This example shows the cumulative global COVID-19 death totals over time as a black line chart, with horizontal and vertical marker lines highlighting the one-million-death threshold and the most recent date. The visualization uses React components with ES6 modules, while D3 v5’s `scaleTime`, `scaleLinear`, and `line` APIs handle the data mapping and path generation. Data comes from the CSSE COVID-19 time series CSV, and the chart includes margin-based positioning for axes and markers in an SVG render.

Ffjvoris

89% match

Loading thumbnail…

Coronavirus Line Chart With Margin Convention

A line chart tracks cumulative global COVID-19 deaths over time using the Johns Hopkins dataset, with a red horizontal marker at one million deaths and a vertical “now” marker at the most recent date. The React component builds a time-scaled `d3.line` path within an SVG, applying explicit margin offsets to position axes. It uses `d3.scaleTime`, `d3.scaleLinear`, `d3.extent`, and `d3.max` to map data, while custom `XMarkerLine` and `YMarkerLine` components place annotation lines and labels.

CChris Briggs

89% match

Loading thumbnail…

Margin Convention Coronavirus Line Chart w/ 1M Marker

This line chart tracks global cumulative COVID-19 deaths over time using the Johns Hopkins dataset. It highlights the one-million-death milestone with a horizontal marker line and labels the most recent date with a vertical “now” marker. Built with React and D3 v6, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and custom SVG marker components. The viewport fills the browser window, and margins are explicitly set to position the visualization within the SVG.

AAnthony Ynami

88% match

Loading thumbnail…

Coronavirus Basic Line Chart With Margins

This example displays global COVID-19 death totals over time with a line chart, using a time-scaled x-axis and linear y-axis with margins. D3 v7’s `scaleTime`, `scaleLinear`, and `line` generators construct the SVG path, while `YMarkerLine` and `XMarkerLine` components overlay reference lines at 5 million deaths and the most recent date, respectively. Data loads from the Johns Hopkins CSSE CSV via `d3.csv` and `timeParse`. The React app computes daily global sums and renders the chart full-screen.

KK3zter

86% match

Loading thumbnail…

Coronavirus Line Chart with 3,000,000 Marker Line and Margin Convention

This chart shows the global cumulative death toll from COVID-19 over time, highlighting the moment it reaches three million with a red horizontal marker line and a labeled "now" vertical marker at the most recent date. The line path is generated with `d3.line`, using `scaleTime` and `scaleLinear` for axes, and rendered as SVG within a React component. Data is fetched from the CSSE COVID-19 time series CSV via `d3.csv`, while the margin convention is applied by translating the main group.

Ee-ines

86% match

Loading thumbnail…

Coronav deaths line chart 2 margin convention

A line chart tracks cumulative global COVID-19 deaths over time, with horizontal reference lines at one, two, and three million deaths and a vertical "now" marker at the latest date. The chart uses React with D3 v6, employing `scaleTime`, `scaleLinear`, and `line` to map dates and death totals, with margins applied via an SVG `<g>` transform. Data comes from the CSSE COVID-19 time series CSV, processed with `csv` and `timeParse` to aggregate daily global totals.

Ssurikmeetr

86% match

Loading thumbnail…

Coronavirus Basic Line Chart with 1,000,000 line Margin Convention

This example shows the global cumulative death toll from COVID-19 over time, plotted as a basic line chart with two prominent marker lines. A horizontal line at the 1,000,000 death mark and a vertical line at the most recent date provide reference points against the black trend line. The chart uses React and D3 v6, leveraging `scaleTime` and `scaleLinear` for axes, `line()` for the path generator, and data from the CSSEGISandData COVID-19 GitHub repository. The visualization is rendered as an SVG, filling the entire browser window.

AAndre J Denais

86% match

Loading thumbnail…

49) Coronavirus Line Chart with 10,000 Marker Line

A line chart tracks daily cumulative COVID-19 deaths worldwide, with a horizontal marker line fixed at 10,000 deaths. The React component uses `d3.scaleTime` and `d3.scaleLinear` to map dates and death totals, while `d3.line` generates the SVG path. Data comes from a JHU CSSE time-series CSV, aggregated by summing country-level deaths per day. The black stroke emphasizes the trend, and the marker line offers a fixed reference threshold.

Llefat92

85% match