Skip to main content
SimilarExport ZIP
100%

React + d3 axes

✓ Published1🌍 Public
Ssurikmeetr
Last edited Apr 24, 2021
Created on Apr 22, 2021

This example shows a line chart of global COVID-19 deaths over time, using a dataset fetched from the CSSE at Johns Hopkins. The visualization highlights specific y-axis milestones (1, 2, and 3 million deaths) with teal marker lines and a vertical marker at the latest date. The React component `LineChart` uses D3’s `scaleTime`, `scaleLinear`, `line`, and `axisBottom` to render axes and the line path, while separate React elements (`XMarkerLine`, `YMarkerLine`) draw the annotation lines. The SVG output is styled with CSS, hiding the axis domain and using light gray ticks for gridlines.

AI-generated description

React + D3 to display coronav line chart

MIT Licensed

Similar vizzes

Loading thumbnail…

React + d3 Axes

This example shows a React-based line chart of global COVID-19 death totals over time, rendered as an SVG. The chart displays a black trend line with dashed marker lines for the 10,000-death threshold and the most recent date, using d3.scaleTime and d3.scaleLinear for axes. d3.axisBottom generates the x-axis with grid lines, while custom React components (XMarkerLine and YMarkerLine) annotate key values. Data comes from a CSSE COVID-19 time-series CSV, loaded with d3.csv and processed in a custom useData hook.

Ccynichole
94% match
Loading thumbnail…

React + d3 axes X and Y

A line chart displays cumulative COVID-19 deaths over time using React components and D3 scales. The chart renders an SVG with a time-scaled X axis and linear Y axis, both with gridlines via `axisBottom` and `axisLeft`. A D3 `line` generator plots the data path, while styled tick lines and hidden domains create a clean aesthetic. Global death totals come from a CSV fetched with `d3.csv`, parsed with `timeParse` and aggregated by column.

Ssurikmeetr
93% match
Loading thumbnail…

React + D3 Axes

A line chart tracks cumulative COVID-19 deaths over time, with a dashed marker line at 10,000 deaths and a second marker at the most recent date. The React component uses d3.scaleTime, d3.scaleLinear, and d3.line to generate an SVG path from CSV data. d3.axisBottom renders the x-axis with tick lines, while custom XMarkerLine and YMarkerLine components add annotations. The data comes from the Johns Hopkins CSSE COVID-19 time series.

SSerind Joshua McCue
93% match
Loading thumbnail…

React + D3 Axes

This example shows a COVID-19 global death toll line chart over time, with dashed reference lines marking the most recent date and the one-million-deaths threshold. Built with React components and D3 scales, the chart uses `scaleTime` and `scaleLinear` to position the line, while separate `XAxis` and `XMarkerLine`/`YMarkerLine` components render the axis and annotations via SVG. Data is loaded from the Johns Hopkins CSSE GitHub CSV and transformed with `csv` and `timeParse`.

Ffjvoris
93% match
Loading thumbnail…

React + D3 Axes

This example shows a line chart of cumulative global COVID-19 deaths over time, with a vertical marker at the most recent date and a horizontal marker at one million deaths. It builds the axes and chart using React components that wrap D3 v6 APIs, including `scaleTime`, `scaleLinear`, `axisBottom`, and `line`. Data is loaded via `d3.csv` from a Johns Hopkins CSSE repository. The chart renders as SVG, with styled gridlines and marker labels formatted using `d3.format`.

PPeter Krevenets
93% match
Loading thumbnail…

react + d3 axes

This example shows global coronavirus deaths over time as a single bold line, with horizontal reference lines at one million and two million deaths, plus a vertical marker at the most recent date. The visualization uses React components to render an SVG chart, while D3 v6 handles scales, the line generator, and bottom axis via `scaleTime`, `scaleLinear`, `line`, and `axisBottom`. Data comes from the Johns Hopkins COVID-19 global deaths time series, loaded with `csv` and parsed with `timeParse`. Custom React components manage the axis, marker lines, and rotated tick labels.

AAnthony Ynami
92% match
Loading thumbnail…

React + D3 Axes

This example shows a React line chart tracking cumulative global COVID-19 deaths over time, using data from a CSSE GitHub CSV. Two marker lines highlight the current date and the 3,000,000 death threshold, with the axes rendered via D3’s `axisBottom` and React refs. The chart uses `scaleTime`, `scaleLinear`, and `line` generators to compute the path, while SVG elements handle the visualization. Loading is handled asynchronously with `useData` and `csv`, and the grid lines use custom tick styling.

Wwindwaver
92% match
Loading thumbnail…

React + D3 Axes

A line chart displays total global COVID-19 deaths over time, sourced from the CSSE COVID-19 dataset. The React component renders an SVG with `d3.scaleTime` and `d3.scaleLinear` axes, while `d3.axisBottom` generates the x-axis gridlines. A vertical marker indicates the most recent date, and a horizontal marker highlights the 10,000-death threshold, both styled with CSS classes.

MMichael Bruno
92% match