Second React plus d3 Axes

100%

Second React plus d3 Axes

✓ Published1🌍 Public

Last edited Jun 9, 2021

Created on Jun 9, 2021

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

React plus d3 Axes

This example plots the global cumulative death toll from COVID-19 over time using a React component. The chart displays a black line on a white background, with red marker lines indicating the current date and the three-million-death threshold, while gridlines and axis labels are styled via CSS. The visualization uses React to manage the SVG rendering, while D3 v5 provides the time and linear scales, axis generation (`axisBottom`), line interpolation, and CSV data loading from the Johns Hopkins University repository, with date parsing and reduction over daily columns.

Nnexus1058

92% match

Loading thumbnail…

React + d3 axes

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.

Ssurikmeetr

91% 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

91% 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

90% 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

90% 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

90% 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

90% 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

90% match