Skip to main content
100%

My first stacked area chart

✓ Published0🌍 Public
CClevejones
Last edited Nov 7, 2015
Created on Nov 7, 2015

This stacked area chart shows U.S. pumpkin and squash production from 1961 to 2013, with each colored layer representing a different country’s contribution over time. The chart uses D3’s `d3.layout.stack` to stack the series and `d3.svg.area` to render the filled regions, while `d3.svg.axis` formats the time-based x-axis and linear y-axis. Data is loaded from a CSV file via `d3.csv`, and hovering over a path highlights it in orange. The visualization is styled with a warm cream background and a custom ordinal color scale, with the source cited as FAO.org.

AI-generated description

Similar vizzes

Loading thumbnail…

D3 Example

This stacked area chart visualizes world population changes from 1950 onward using D3.js, with data from United Nations Population Estimates. The chart maps time on the x-axis and population on the y-axis, with each country represented by a colored area layer stacked atop one another. The visualization uses an SVG rendering with a time scale for the x-axis, a linear scale for population, and a categorical color scale for countries. A legend identifies the color-coded countries, and axes include formatted labels with a custom tick formatter that converts Giga to "B" for billions. The chart is interactive in that it responds to the loaded CSV dataset, dynamically stacking areas by country and rendering population values over time. This example is part of Curran's "Splitting Charts" screencast series and is forked from prior blocks, demonstrating iterative development of data visualizations using D3.js.This example demonstrates an interactive stacked area chart visualizing world population changes over time. Built with D3.js, it renders directly to SVG, creating a clean, scalable graphic. The chart maps time (year) to the x-axis and population to the y-axis, with each country's population represented as a distinct colored layer, stacked to show the total population distribution. The visualization uses a color legend for country identification, custom axis formatting (e.g., "B" for billion), and a smooth layering approach to display population trends across multiple countries from 1950 onward. The data comes from the United Nations Population Estimates.

CCurran Kelleher
71% match