React + d3 axes X and Y

100%

React + d3 axes X and Y

✓ Published1🌍 Public

Last edited Apr 24, 2021

Created on Apr 24, 2021

A line chart displays cumulative COVID-19 deaths over time using React components and D3 scales. The chart renders an SVG with a time-scaled X axis and linear Y axis, both with gridlines via `axisBottom` and `axisLeft`. A D3 `line` generator plots the data path, while styled tick lines and hidden domains create a clean aesthetic. Global death totals come from a CSV fetched with `d3.csv`, parsed with `timeParse` and aggregated by column.

AI-generated description

React + D3 to display coronav line chart

MIT Licensed

Similar vizzes

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

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

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 + D3 Axes

A line chart displays total global COVID-19 deaths over time, sourced from the CSSE COVID-19 dataset. The React component renders an SVG with `d3.scaleTime` and `d3.scaleLinear` axes, while `d3.axisBottom` generates the x-axis gridlines. A vertical marker indicates the most recent date, and a horizontal marker highlights the 10,000-death threshold, both styled with CSS classes.

MMichael Bruno

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

92% match

Loading thumbnail…

React + d3 axes + log scale

This example shows a line chart of global COVID-19 death totals over time, using a logarithmic y-axis to accommodate the wide range of values. The chart is built with React and D3 v6, combining SVG rendering with D3’s `scaleLog`, `scaleTime`, `axisBottom`, and `axisLeft` APIs for the axes. The line is generated with `line()` and plotted from a CSV dataset fetched from the CSSE at Johns Hopkins, with data transformed via `csv` and `timeParse`.

Ssurikmeetr

91% match