lines

100%

✓ Published0🌍 Public

Last edited Jul 8, 2021

Created on Jul 5, 2021

This example shows monthly COVID-19 case counts from the New York Times rolling-averages dataset as a line chart with circular markers, rendered as SVG using React and D3 v7. The code aggregates daily data by month using `d3.rollup` and `d3.sum`, scales time and linear values with `d3.scaleTime` and `d3.scaleLinear`, and draws the line with `d3.line`. A `d3.brushX` brush overlay is attached to the chart, logging selected date ranges to the console, while axes are generated by custom React components.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart Covid19 Data

This line chart displays cumulative COVID-19 cases in the United States over time, using data from the New York Times GitHub repository. The visualization plots dates on the x-axis and case counts on the y-axis, with a thick red line connecting data points. It is built with D3.js v6, using `d3.csv` for data loading, `d3.timeParse` for date formatting, and `d3.scaleTime` and `d3.scaleLinear` for the axes. The line is rendered as an SVG path via `d3.line`, with axis labels and a title added as SVG text elements.

BBrian Gilmore

81% match

Loading thumbnail…

COVID-19 US Interactive

This interactive line chart displays the rolling seven-day average of COVID-19 cases in the United States over time. The visualization uses React and D3 v6, with the data sourced from the New York Times’ public COVID-19 repository. The chart plots dates on the x-axis and average cases on the y-axis, rendered as an SVG using custom `AxisBottom`, `AxisLeft`, and `Marks` components. Hovering over data points triggers a `Tooltip` showing the formatted value. The code leverages D3’s `scaleTime`, `scaleLinear`, and `csv` for data parsing and scaling.

DDasbach.EJ

81% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes daily new positive COVID-19 cases over time using data from the Data Canvas Sense Your City Dataset. The React application, rendered as SVG, uses d3.scaleTime and d3.scaleLinear to map dates and case counts, with d3.line and curveNatural creating the smooth connection between points. Axis components generate ticks and labels, while the Poppins font and muted teal color scheme give the chart its distinctive aesthetic. The chart fetches its CSV data from a GitHub-hosted file, demonstrating a clean, minimal approach to temporal data visualization.

Aanduskong

80% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays COVID-19 biweekly case counts for the United States over time, using a smooth curved path rendered with d3.line and curveNatural. The chart is built with React functional components and d3.v5 scales, including scaleTime for the x-axis and scaleLinear for the y-axis, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded asynchronously from a CSV URL using d3.csv within a useData hook. The visualization uses SVG rendering with a Poppins font and muted teal styling for the line and axes, but omits data point circles.

Aamanoakane

79% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes the cumulative and daily COVID-19 case counts for ten countries up to July 28, with buttons to toggle between total and daily cases. Lines are drawn with an animated stroke-dashoffset transition using D3’s `transition()` method, and SVG paths are generated via `d3.line()`. The chart includes a color legend mapping countries to a categorical scheme, axis labels, and annotations marking notable events. Data is loaded from a CSV file, and the visualization is built with React and D3 v5, rendered as SVG with animation.

Aashpradhan01123

79% match

Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes the growth of COVID-19 cases over time, using data from the Data Canvas Sense Your City Dataset. The chart plots dates on the x-axis and cumulative case counts on the y-axis, with a smooth, naturally curved line connecting the data points. Built with React and rendered as SVG, it uses D3’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to generate the path. The visualization includes custom axis components and styling via CSS, with tooltips on points commented out in the Marks component.

PProger666

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

79% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot NY Times COVID Data US Cumulative

A scatter plot displays cumulative COVID-19 cases in the United States over time, with each point representing a daily data record. The visualization uses D3.js 6.7.0, specifically the `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` functions from D3's API to map dates to the x-axis and case counts to the y-axis. It loads data from the NY Times COVID-19 rolling averages dataset via `d3.csv`. The chart renders as an SVG, populating circular marks with a radius of one pixel, and includes axes labeled with a custom Share Tech font.

DDasbach.EJ

79% match