Skip to main content
SimilarExport ZIP
100%

React + D3 axis (Coronavirus Deaths)

✓ Published1🌍 Public
Ee-ines
Last edited May 3, 2021
Created on May 3, 2021

This example shows a line chart of cumulative global coronavirus deaths over time, drawn with D3 scales and a React-generated SVG. The chart highlights the most recent date with a vertical marker line labeled “now” and a horizontal reference line at 3,000,000 deaths. React components manage the SVG structure, while D3’s `scaleTime`, `scaleLinear`, and `line` generator compute positions and the path. Axes are rendered using `d3.axisBottom` within a React effect. Data comes from the CSSEGISandData COVID-19 time-series CSV, parsed with `d3.csv` and `timeParse`.

AI-generated description
MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

React + D3 Axes

This example shows the global cumulative death toll from COVID-19 over time, using a line chart with time and linear scales. D3's `scaleTime`, `scaleLinear`, and `line` generate the path from CSV data, while React components wrap D3 selections for gridlines and axes via `axisBottom`. Horizontal and vertical marker lines label the one-million-death threshold and the current date. The chart renders as SVG, with data fetched from the CSSE COVID-19 GitHub repository.

KKevin McMorrow
93% 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
93% match
Loading thumbnail…

Dataviz 2020_Ep51 - 42. Coronavirus Line Chart - React and D3 Axes

This example shows the global cumulative COVID-19 death toll over time as a single black line chart, with a horizontal marker at 3.5 million deaths and a vertical “Now” marker at the most recent date. It uses React to render the SVG and D3 v6 scales (`scaleTime`, `scaleLinear`) and line generator (`line`) to plot the data, while custom `XAxis` and marker components handle axes and annotations. The data comes from the CSSEGISandData COVID-19 time series CSV, loaded and transformed with D3’s `csv` and `timeParse`.

MMinwoo Pak
93% match
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
93% match
Loading thumbnail…

React + Axes

A React-based line chart visualizes cumulative global COVID-19 deaths over time, with the date on the x-axis and death totals on the y-axis. It uses d3.scaleTime, d3.scaleLinear, and d3.line to generate an SVG path, plus custom axes via d3.axisBottom and d3.axisLeft. Reference lines mark the 5,000,000 death milestone and the most recent date, with d3.timeFormat and d3.format for labels. Data comes from a CSV fetched via d3.csv.

KK3zter
92% match
Loading thumbnail…

React + D3 Axis

This chart visualizes the cumulative global death toll from COVID-19 over time, sourced from the Johns Hopkins CSSE time-series data. Using React components, it leverages D3 functions such as `scaleTime`, `scaleLinear`, `line`, and `axisBottom` to create an SVG line chart, with horizontal and vertical marker lines highlighting the 3,000,000 death milestone and the most recent date. The chart’s axes are drawn via D3’s `axisBottom` within a React `useRef`/`useEffect` wrapper, while CSS styles the tick marks and line.

Jj-PGi
92% match
Loading thumbnail…

React + D3 Axes

This example shows the global cumulative death toll from COVID-19 over time, rendered as a line chart with React and D3. A horizontal reference line marks the 6.5 million death threshold, while a vertical line highlights a specific date, labeled with its formatted value. The chart uses d3’s `scaleTime`, `scaleLinear`, and `line` to map the data, while a custom `XAxis` component leverages `axisBottom` for tick generation. The raw data is fetched from a CSV hosted by the CSSE at Johns Hopkins.

NNikita Toropov
92% match