Line Chart

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

70% match

Global Tree Cover Loss and Gain, by Country 2000-2021

This visualization explores global tree cover change between 2000 and 2010 by country, using a 30% canopy cover threshold. It compares forest extent in hectares and as a percentage of total country area, then calculates the difference between the two time periods. The application fetches CSV data from a GitHub gist and processes it using D3's `csvParse` and `flatRollup` functions, outputting the transformed data as JSON within a `<pre>` element. The underlying data originates from satellite imagery by Hansen et al. (2013) via Global Forest Watch.

68% match

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

D3 - StreamGraph

A streamgraph displays CO2 emissions for Afghanistan, Albania, Algeria, and Angola from 1970 to 1979, using stacked areas that flow across a time axis. Each colored band represents a country’s emissions, with a tooltip revealing the country name on hover and a legend mapping colors to names. Built with D3 v7, the visualization uses `d3.stack` to compute the stacked series, `d3.area` to generate the path geometry, and `d3.scaleLinear` for axes. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes axis labels for Year and CO2 Emissions.

CChandana Srinivas

First Visual

This visualization displays the relationship between each country's total area and its percentage change in tree cover since 2000, using a scatter plot loaded from a CSV dataset. Each circle's color redundantly encodes the tree cover change value through the `interpolateRdYlGn` color scale. The plot is rendered with D3 v7, using `scaleLinear` for both axes and `axisLeft`/`axisBottom` from the custom `axes.js` module. The data is processed with `csvParse` and `flatRollup` to aggregate area and delta values.

Transforming Global Tree Cover Loss and Gain, by Country 2000-2021

This visualization transforms global tree cover data, filtering for a 30% canopy threshold to compare each country's forest extent in 2000 and 2010, both in hectares and as a percentage of total area. It then calculates the difference between these two timepoints, revealing net loss or gain. The D3.js code uses `flatRollup` to aggregate by country and outputs the processed table as JSON in a `<pre>` element, sourcing data from Global Forest Watch and Hansen et al. (2013).

Scatterplot with Labels

This scatterplot shows the relationship between each country’s total area (on the x-axis) and the percentage change in tree cover (on the y-axis), using data from a CSV of tree-cover loss. Each circle’s color redundantly encodes the y-value via the `interpolateRdYlGn` color scale, with a title summarizing the chart. The visualization is built with D3 v7, using `scaleLinear` for axes, `axisLeft` and `axisBottom` from the `d3` module for ticks and labels, and a `flatRollup` operation in `viz.js` to aggregate the raw data by area and delta.