Skip to main content
SimilarExport ZIP
100%

react + d3 axes

✓ Published1🌍 Public
AAnthony Ynami
Last edited Feb 26, 2021
Created on Feb 25, 2021

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.

AI-generated description

A Line chart that shows the total deaths from coronavirus Johns Hopkins Coronavirus Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

React + D3 axis (Coronavirus Deaths)

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

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

use d3 Axis Coronavirus data

This example presents a line chart of cumulative global COVID-19 deaths over time, sourced from the Johns Hopkins CSSE time-series dataset. Using React with D3 v7, it maps dates to a time scale and death totals to a linear scale, rendered as an SVG path. Custom XAxis and YAxis components leverage d3.axisBottom and d3.axisLeft with gridlines, while the chart’s axes and line are styled via CSS. The visualization resizes to the window dimensions and updates through a loading state while fetching CSV data.

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