Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Second React plus d3 Axes

Public visualization

Viewing a saved revision (read-only)

461eb0c43329430f87cc5a74c44d22bc

Second React plus d3 Axes

0 stars1🌍 Public
Nnexus1058
Last edited Jun 9, 2021
Created on Jun 9, 2021
Forked from React plus d3 Axes

This example displays a React line chart tracking cumulative global COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus dataset. The chart renders as an SVG, with the line path generated by `d3.line()` and scales created via `scaleTime()` and `scaleLinear()`. Red marker lines highlight the current date and the three-million-death threshold, with the YMarkerLine and XMarkerLine components positioned using the scales. Axes are drawn with `axisBottom()` and custom React components that leverage `useRef` and `useEffect` to integrate D3 selections into the React lifecycle.

AI-generated description

Line chart of Coronavirus cases to date. Data from Johns Hopkins Coronavirus Dataset.