Line and Area Charts

100%

Line and Area Charts

✓ Published0🌍 Public

Last edited Sep 27, 2022

Created on Sep 26, 2022

This example visualizes reported COVID-19 deaths in Afghanistan over time using a line and area chart. It draws circles at each data point on an SVG canvas, with axes scaled using `scaleTime` and `scaleLinear`. The visualization filters the WHO global COVID-19 dataset by country code and years, then renders the data with `axisLeft` and `axisBottom`. Semi-transparent steelblue circles are used to suggest a line and area effect for the death counts.

AI-generated description

Basic Scatter Chart using data from bar chart which shows percentage of population in poverty for the poorest countries. Basic data came from a site, but I just took the poorest countries rough data. Not correct.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart With Marker Lines and D3 Axes

This example visualizes global COVID-19 deaths over time as a line chart, with a horizontal marker line at six million deaths and a vertical marker at the most recent date. The chart uses React components wrapping D3 scales and axes, including `scaleTime`, `scaleLinear`, and `axisBottom` for gridlines. Data is loaded from a CSV file and aggregated by day from the CSSE COVID-19 dataset. Rendering uses SVG paths generated by D3's `line` generator.

OOleg Zhernovoy

79% match

Loading thumbnail…

Visualization Labels

This example visualizes cumulative global COVID-19 deaths over time using a line chart. The time axis spans the dataset’s date range, while a logarithmic scale maps death totals. The chart includes labeled axes for “Time” and “Cumulative Deaths,” plus a title and horizontal/vertical marker lines with annotations. The visualization is built with React and SVG, using D3 v7 functions such as `scaleTime`, `scaleLog`, `line`, `axisBottom`, and `axisLeft`. Data comes from the CSSEGISandData COVID-19 global time-series CSV, loaded via `d3.csv`.

AAlex Stulov

79% match

Loading thumbnail…

Covid-19 with Axis and labels

This interactive line chart visualizes global COVID-19 cumulative deaths over time, with each country represented by a gray line. Hovering over a point highlights the corresponding country’s full trajectory and displays a tooltip with the country name, death count, and date. The visualization uses React for state management, d3.scaleLog and d3.scaleTime for axes, d3.line for path generation, and d3.Delaunay-based Voronoi overlay for hover detection. Data comes from the CSSE COVID-19 time series CSV, rendered as SVG with custom axis labels and tick marks.

Uuplusv

78% match

Loading thumbnail…

Multiple Colored Lines

This example displays global COVID-19 cumulative death counts over time as multiple colored lines, one for each country. The visualization uses a logarithmic y-axis to accommodate the wide range of values, with grid lines extending across the chart from both axes. Built with React and D3 v7, the chart renders SVG paths using `d3.line`, `scaleTime`, and `scaleLog`, while axes are generated with `axisBottom` and `axisLeft`. Data comes from a CSV file processed with `d3.csv` and `timeParse`. Each country is assigned a random RGB stroke color.

AAlex Stulov

78% match

Loading thumbnail…

Multiple Colored Lines With Voronoi Overlay

This example visualizes global COVID-19 deaths over time with multiple colored lines, one per country, on a log-scaled y-axis. Hovering near any line highlights that country’s full path in black, using a `d3.Delaunay` Voronoi overlay to capture mouse proximity. The chart is built with React and renders SVG, using `d3.scaleTime`, `d3.scaleLog`, and `d3.line` for the axis and line generation. Data comes from the CSSEGISandData COVID-19 time-series CSV, parsed with `d3.csv` and `timeParse`, showing roughly twenty countries.

AAlex Stulov

77% match

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes COVID-19 death tolls across multiple countries, plotting each country as a separate line that traces cumulative deaths over days since the first reported case. The chart uses D3 v5 with SVG rendering, employing `nest()` to group the data by country and `line()` with `curveBasis` to draw smooth paths. A draggable vertical line, implemented with D3's `drag()` function, lets users explore data at specific time points, showing the death counts for all countries at that moment. Color legends and axes are generated with `scaleOrdinal` and `axisLeft`/`axisBottom`.

Nnadia-el

77% match

Loading thumbnail…

Line Chart with Multiple Lines by Country With Voronoi Overlay

This multi-line chart displays cumulative COVID-19 death totals over time for each country, using a logarithmic y-axis. A Voronoi overlay, built with `d3.Delaunay.from` and `voronoi.renderCell`, partitions the chart area into cells; hovering over any cell highlights the corresponding country’s line in black. The visualization, rendered in SVG via React, uses D3’s `scaleTime` and `scaleLog` to map data from the CSSE global time-series CSV, with axes generated by `axisBottom` and `axisLeft`.

OOleg Zhernovoy

77% match

Loading thumbnail…

Line Chart With Voronoi Overlay With Labels

This chart displays cumulative COVID-19 deaths over time for multiple countries, using a line chart where hovering over any point highlights the corresponding country's entire trajectory and displays a tooltip with the country name, death count, and date. The implementation uses React with D3 v7 scales, line generators, and axes, while a Voronoi overlay built with `d3.Delaunay` captures mouse events across the entire plot area for precise hover detection. Data comes from the CSSEGISandData COVID-19 time series dataset, with the active line emphasized in black and labeled via SVG text elements.

OOleg Zhernovoy

77% match