Skip to main content
SimilarExport ZIP
100%

React + D3 Axes

✓ Published1🌍 Public
KKevin McMorrow
Last edited Dec 17, 2021
Created on Dec 17, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

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

51) React + D3 Axes

This example shows the global cumulative death toll from the early COVID-19 pandemic as a time-series line chart, with horizontal and vertical marker lines highlighting the 10,000-death threshold and the most recent date. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate an SVG path, while custom React components render the marker lines. D3’s `axisBottom` and `select` handle the gridlines and tick labels. Data is loaded as CSV from a Johns Hopkins repository and transformed with `d3.csv` and `timeParse`.

Llefat92
94% match
Loading thumbnail…

React + D3 Axes

This visualization displays the global cumulative death toll from COVID-19 over time, with a line chart that includes reference markers at 5,000,000 deaths and at the most recent date. The chart is built with React and D3 v7, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom` for the axes. Data is fetched from the CSSE COVID-19 global time series CSV and transformed with `d3.csv` and `d3.timeParse`. The SVG rendering includes a custom x-axis and y-axis marker lines, with gridlines and labels styled through CSS.

TThomas Cormican
94% match