Skip to main content
SimilarExport ZIP
100%

Per capita for AFG during covid Area Chart

✓ Published0🌍 Public
VVAbhiram99
Last edited Apr 6, 2023
Created on Apr 6, 2023
Forked from ICE-7 Area Chart

This area chart visualizes Afghanistan's GDP per capita during the COVID-19 pandemic, with dates on the x-axis and economic output on the y-axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while `line` and `area` generators with `curveBasis` draw the smoothed time-series trend. The SVG rendering is driven by a React framework, and data is loaded from a remote CSV containing global pandemic economic indicators.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Per capita for AFG during covid

This chart displays the change in GDP per capita for Afghanistan over time during the COVID-19 pandemic. A black line traces the trend, with the date on the x-axis and the GDP per capita value on the y-axis. The visualization is built with D3 v5, using `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.line` for the path, and `d3.csv` to load the remote data. The SVG output includes labeled axes and a grid, with the line path styled through the `line_path` class.

VVAbhiram99
94% 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
72% match
Loading thumbnail…

Line chart

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.

Mmalampatiramya03@gmail.com
71% match
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
68% match
Loading thumbnail…

covid_data

This visualization shows the cumulative confirmed COVID-19 cases over time for Afghanistan and Albania from January to August 2020, with each country tracked as a separate line across the date columns. The line chart uses a linear scale for case counts, with the x-axis representing chronological dates from 1/22/20 through 8/21/20, and the y-axis indicating cumulative case numbers. The data originates from a gist by Cameron-Grams, providing country-level time series. The example highlights the exponential growth patterns and eventual plateauing of cases in these two countries during the early pandemic period, demonstrating how the dataset can be used to compare outbreak trajectories across different regions.

CCameron-Grams
68% match
Loading thumbnail…

Fork of Fork of Fork of Fork of React Starter

This bar chart displays the total COVID-19 cases over time for Afghanistan, using a simple time-series visualization. The chart uses a band scale for the date axis and a linear scale for the case counts, rendering each bar with the `Bar` shape from `@visx/shape`. Data is loaded from a local CSV file and parsed in a React component using `useState` and `useEffect`. The SVG output includes axes from `@visx/axis` and is styled with the color `#8884d8`.

DDivyaKota2@my.unt.edu
66% match
Loading thumbnail…

Line Chart

This line chart displays the annual tree cover loss in hectares for Afghanistan from 2001 to 2021, showing a decline from early peaks to near-zero in the mid-2010s followed by small fluctuations. The visualization uses d3.line and d3.scaleLinear to generate the path and scales, with d3.axisLeft and d3.axisBottom providing labeled axes. Data is loaded from a CSV file and parsed with d3.csvParse before being passed to the chart. The chart is rendered into an SVG with dimensions matching the browser window.

LLauren
66% match
Loading thumbnail…

Area Chart

This area chart displays India's GDP in billions from 2011 to 2020, using a filled pink path with a cyan stroke over a time-based x-axis and linear y-axis. The visualization loads CSV data from a GitHub gist, parsing years as dates and GDP values as numbers. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with a `curveBasis` interpolation to create the smooth shaded region. Margins, axis labels, and a title are positioned using SVG groups, with tick lines and labels styled via CSS.

Uubl2
65% match