Skip to main content
SimilarExport ZIP
100%

React + d3 axes + log scale

✓ Published1🌍 Public
Ssurikmeetr
Last edited Apr 24, 2021
Created on Apr 24, 2021

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

AI-generated description

React + D3 to display coronav line chart

MIT Licensed

Similar vizzes

Loading thumbnail…

React + d3 axes + log scale + labels

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.

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

log d3 Axis Coronavirus data

This line chart visualizes global COVID-19 death totals over time, using a logarithmic y-axis to accommodate the exponential growth of the data. The chart is built with React and d3.v7, using `scaleTime` and `scaleLog` for the axes, while `line()` generates the SVG path. Data is fetched via `d3.csv` from the CSSEGISandData COVID-19 time series repository, and axes are rendered with `axisBottom` and `axisLeft`, displaying gridlines.

BBlake McCarty
89% 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
89% match