Line Chart

100%

✓ Published1🌍 Public

Last edited Apr 2, 2025

Created on Apr 1, 2025

This line chart visualizes daily new COVID-19 cases in Spain over a 60-day period, sourced from the CSSEGISandData GitHub repository. The chart uses d3.csv to load time-series data, d3.scaleTime and d3.scaleLinear to map dates and case counts, and d3.line to draw the steelblue path. Interactive circle elements with mouseover handlers populate a tooltip showing the date and cases using event.pageX and event.pageY. The SVG rendering includes grid lines via d3.axisLeft and labeled x and y axes for date and daily cases.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Area Chart

This example visualizes the daily new COVID-19 cases in Spain over a 60-day period using an area chart. The chart combines a semi-transparent steelblue filled area with a solid line to show the trend, and includes labeled axes for dates and case counts. The data is loaded from the CSSEGISandData GitHub repository using `d3.csv`, processed by filtering for Spain and computing daily differences, and then rendered as SVG paths generated with `d3.area` and `d3.line`. Scales are created with `d3.scaleTime` and `d3.scaleLinear`, axes are drawn using `d3.axisBottom` and `d3.axisLeft`, and sparse data points are marked with circles that display a tooltip on hover.

Bbassansackey@gmail.com

92% match

Loading thumbnail…

Line Chart - Covid Cases per day in Sweden October 2020

This line chart shows the number of daily COVID-19 cases in Sweden for October 2020, with the day of the month on the x-axis and case count on the y-axis. The chart is rendered as an SVG using D3.js v7, loading data from a CSV file. The code creates linear scales for both axes, draws the axes with gridlines, and generates a steelblue line path via `d3.line()`. Axes and chart titles are added as SVG text elements, and the visualization automatically sizes to the browser window.

Kkfhujosefsson@dons.usfca.edu

80% match

Loading thumbnail…

New Covid 19 cases per day

This animated line and scatter plot tracks daily new COVID-19 cases over time, using a steelblue path for the trend and circles for individual data points. Hovering over a point reveals its date and case count via a tooltip. The visualization uses D3.js for data parsing, axis generation, and chart rendering, with a noUiSlider range slider to filter the displayed date window. Data comes from a cleaned CSV file loaded from GitHub.

LLakshmi Keerthi

79% match

Loading thumbnail…

Fork of Line Chart - Covid Cases per day in Sweden October 2020

This line chart tracks daily COVID-19 cases in Sweden during October 2020, with a shaded area under a monotone-smoothed curve, interactive hover points that reveal tooltips with exact values, and a dashed red line marking the average case count. The visualization also annotates the peak case day. Built with D3 v7, it uses SVG paths for the line, area, and axes, while d3.csv loads the external data and d3.scaleTime and d3.scaleLinear map dates and case numbers to positions. Responsive dimensions and hover transitions enhance the interactive experience.

NNita

79% match

Loading thumbnail…

COVID-19 Forecast

This visualization displays a time-series area chart of COVID-19 infection counts, with dates on the x-axis and infected individuals on the y-axis, accompanied by a title and axis labels in Spanish. It uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` to render an SVG path and scatter points from CSV data. The dataset comes from a GitHub-hosted file, and styling is applied via external CSS classes.

Ccacho2294

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

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

78% match

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

77% match