Skip to main content
SimilarExport ZIP
100%

React + D3 Axes

✓ Published1🌍 Public
Ffjvoris
Last edited Mar 11, 2023
Created on Mar 11, 2023

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`.

AI-generated description

Splitting React components into multiple files using ES6 modules. Bonus: React Fragments!

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
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 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
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 + 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…

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