Area Chart

100%

✓ Published0🌍 Public

Last edited Apr 2, 2025

Created on Apr 2, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart

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.

Bbassansackey@gmail.com

92% match

Loading thumbnail…

Project Area Chart

This example shows the progression of total COVID-19 cases over time using a filled area chart. The chart plots dates on the x-axis and case counts on the y-axis, with a steelblue area beneath the line and circular markers on each data point. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, and d3.area to generate the path. Interactive tooltips appear on mouseover via D3's transition and style methods, while the SVG rendering includes rotated tick labels and axis annotations.

Mmalampatiramya03@gmail.com

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

80% match

Loading thumbnail…

Area Chart Covid19 Data

An area chart displays cumulative COVID-19 cases in the US over time, with a red fill and stroke over a darkred area. The data comes from the New York Times covid-19-data GitHub repository via `d3.csv`. The visualization uses D3 v6 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area` to construct the path. SVG rendering occurs within an HTML canvas, with labeled axes and a title. The chart fills the browser window, adapting to its dimensions dynamically.

BBrian Gilmore

80% match

Loading thumbnail…

Fork of Area Chart ice 7

This area chart visualizes daily COVID-19 cases over time, with dates on the x-axis and case counts on the y-axis. The data is loaded from a CSV file via `d3.csv` and parsed using `d3.timeParse`. The chart is rendered as an SVG, using `d3.area` to generate the filled path and `d3.scaleTime`/`d3.scaleLinear` for the axes, which are drawn with `d3.axisBottom` and `d3.axisLeft`. The chart includes axis labels for "Date" and "Cases."

MM Hema

78% match

Loading thumbnail…

Area Chart

This area chart displays the number of USA pandemic cases from 2013 to 2021, using a red filled area beneath a black line to emphasize the trend over time. The visualization is built with D3 v5, employing `scaleLinear` for both axes, `line` and `area` generators with `curveBasis` for smooth interpolation, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a CSV file hosted on GitHub, and the SVG rendering includes labeled axes for year and case counts.

JJyothicherukuri

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

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

76% match