Skip to main content
SimilarExport ZIP
100%

React plus d3 Axes

✓ Published1🌍 Public
Nnexus1058
Last edited Jun 9, 2021
Created on May 17, 2021

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.

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
95% 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
94% 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
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…

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
93% 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
92% 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
92% match
Loading thumbnail…

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

Nnexus1058
92% match