Line chart

100%

✓ Published0🌍 Public

Last edited Apr 25, 2024

Created on Apr 25, 2024

The chart shows total COVID-19 deaths over time in Afghanistan during 2020, using a line chart to display the trend across the year. It includes axes, labels for months and total deaths, and a tooltip that appears on mouse movement to highlight specific data points. The visualization is built with D3 v7, loading CSV data via `d3.csv`, parsing dates with `d3.timeParse`, and generating the line with `d3.line`. A `d3.bisector` finds the nearest data point, while an SVG circle and HTML tooltip provide interaction. The line path uses steelblue styling on an SVG canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Line and Area Charts

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.

Cchristine

87% match

Loading thumbnail…

q2

This visualization shows the progression of total COVID-19 cases over time for Afghanistan, with a blue area chart and individual data points that reveal exact values on hover. The y-axis starts at 100 to emphasize the exponential growth curve. Built with D3 v7, it uses `d3.area` for the filled region, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.axisBottom` with rotated date labels. Tooltips appear via mouseover events, while SVG circles mark each reported case count from the supplied `data.csv` file.

Ssindhuja27b@gmail.com

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

79% match

Loading thumbnail…

Line Chart ICE 7

This line chart shows COVID-19 total deaths by country across the first ten rows of a CSV dataset, sorted by country name. The visualization uses d3.v7 to create an SVG chart with a blue line plot, a banded x-axis for countries, and a linear y-axis for death counts. It fetches data asynchronously via `d3.csv`, filters to ten entries, and draws axes and the line path within a defined margin. Axis labels are added as SVG text elements, and the chart title dynamically reflects the y-axis label.

MM Hema

78% match

Loading thumbnail…

Line Chart

A line chart displays smoothed daily COVID-19 death counts over time for the top 50 countries, colored by data from the Johns Hopkins Coronavirus Dataset. It uses a logarithmic y-scale and a Gaussian kernel blur to smooth the time series. Hovering over a Voronoi overlay, generated with `d3.Delaunay`, highlights the nearest data point and illuminates the corresponding country’s line, while a tooltip shows the country, date, and approximate death total. The chart is built with React and D3 v5, rendering SVG paths via `d3.line` and axes with `d3.axisBottom` and `d3.axisLeft`.

Hharika-1929

78% match

Loading thumbnail…

Coronavirus Line Chart

A line chart tracks cumulative global COVID-19 deaths over time, using a black, five-pixel-wide path scaled to the full window. A horizontal marker at four million deaths and a vertical “now” marker at the latest date highlight key thresholds. The visualization is built with React components and D3 v7, using `scaleTime`, `scaleLinear`, and `line` for the path, plus `axisBottom` and `axisLeft` for gridlines. Data comes from a CSV of Johns Hopkins global death counts, aggregated by day and rendered as SVG.

AAlex Stulov

77% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays weekly total deaths in a specific location, comparing the current year’s figures against a five-year average, with the current year highlighted in red and the average shown as a dashed steel-blue line. The x-axis is a time scale parsing dates from the CSV, while the y-axis is linear. Built with D3 v5, the visualization uses `d3.scaleTime`, `d3.line`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG paths and axes. The data originates from a CSV file with historical mortality records.

Rrichad97

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

77% match