React + d3 axes + log scale + labels

100%

React + d3 axes + log scale + labels

✓ Published1🌍 Public

Last edited Apr 27, 2021

Created on Apr 24, 2021

This example shows cumulative COVID-19 deaths over time as a single black line chart, with a logarithmic y-axis for deaths and a time-based x-axis formatted by month/year. The data comes from the CSSE COVID-19 time series CSV. Built with React and D3 v6, it uses `scaleTime`, `scaleLog`, and `line` generators, while `axisBottom` and `axisLeft` render labeled gridlines. The SVG includes axis titles and optional teal marker lines for highlighting specific values.

AI-generated description

React + D3 to display coronav line chart

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

React + d3 axes X and Y

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.

Ssurikmeetr

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

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

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

90% match

Loading thumbnail…

Visualization Labels

This example displays the global cumulative death toll from COVID-19 over time as a single black line on a log-scaled y-axis, with labeled axes and a title. The chart uses React to render an SVG and relies on `d3.scaleTime`, `d3.scaleLog`, and `d3.line` for data mapping and path generation, while `d3.axisBottom` and `d3.axisLeft` create the gridlines. Data comes from the JHU CSSE COVID-19 time-series CSV, aggregated daily across all countries, with deaths counted from the start of the outbreak.

NNikita Toropov

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

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

89% match