D3 Example

100%

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

This stacked area chart shows the population growth of China, India, the USA, and Brazil from 1950 to 2015, using data from United Nations Population Estimates. The visualization uses D3.js to load CSV data, nest it by country, and apply a stack layout to create the layered areas. An SVG rendering with time and linear scales, along with a color legend, displays each country’s contribution over time. The code uses `d3.layout.stack`, `d3.svg.area`, `d3.nest`, and `d3.legend.color`.

AI-generated description

Stacked area chart of world population over time. Data from the United Nations Population Estimates. This is example 41 from the screencast Splitting Charts.

MIT License

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/b1014a71757ce72444e1'>Multi-Line Chart of Largest Countries</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/34784700eb8fb594f17f'>World Population Area Chart</a>

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1985378&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/9eea6a43904b1a158e92'>Stacked Area Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Example

This multi-line chart displays the population growth of China, India, the USA, and Brazil from 1950 to 2015, using data from the United Nations Population Estimates. The visualization encodes time on the x-axis and population on the y-axis, with each country’s trend represented by a colored line and a legend. The code uses D3.js version 3.5.5 to build the SVG rendering, employing `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line` for plotting, alongside the `d3-legend` library for the color legend.

TThanaporn-sk

92% match

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

86% match

Loading thumbnail…

D3 Example

A small multiples line chart shows population growth from 1950 to 2015 for China, India, and the U.S. It uses D3 v3 with SVG, `d3.svg.line`, `d3.time.scale`, and `d3.legend.color`, rendering colored strokes per country. The y-axis uses a custom SI format (B for billions), and data loads from a CSV via `d3.csv`.

Pprincit

86% match

Loading thumbnail…

Fork of Activity_7.2

This stacked area chart shows population trends for China, India, the USA, and Indonesia from 1960 to 2020. It uses d3.stack, d3.area, and d3.scaleTime with annotated dots at five-year intervals on a light gray grid. Data is loaded as CSV from a GitHub gist and rendered as SVG with d3-axis for tick marks and a legend. Each country is assigned a distinct fill color with 70% opacity.

TThai Ha Dang

84% match

Loading thumbnail…

D3 Example

This example visualizes world population changes over time using an area chart, with the data sourced from the United Nations Population Estimates. It renders an SVG graphic where the x-axis represents time (years) and the y-axis shows population counts, formatted with a custom SI tick formatter that converts billions to "B". The code uses D3.js version 3.5.5, specifically the `d3.svg.area()` generator to create the filled area shape, along with `d3.time.scale()` for the time axis, `d3.scale.linear()` for the population axis, and `d3.svg.axis()` for the axes. The visualization is implemented as a single static chart without interaction.

CCurran Kelleher

82% match

Loading thumbnail…

D3 Example

This line chart visualizes world population trends over time, with each line representing a different country. The data comes from the United Nations Population Estimates and is plotted with population on the y-axis and time on the x-axis. The chart uses D3.js to render an SVG, with a color legend distinguishing countries, and axis labels for "Time" and "Population". The visualization highlights population growth patterns across selected countries from 1950 onward, using a custom tick format that abbreviates large numbers with "B" for billions.

CCurran Kelleher

81% match

Loading thumbnail…

D3 Example

This example visualizes the religious demographics of the top five most populous countries—China, India, the USA, Indonesia, and Brazil—using grouped bar charts. Each country’s population is broken down by religion, with bars colored according to the religious category. The visualization is built with D3.js, specifically using `d3.layout.stack` for the stacked data structure and `d3.legend.color` to generate the color legend. The data originates from the CSV file `religionByCountryTop5.csv`, which is loaded using `d3.csv`. The chart employs SVG rendering with ordinal and linear scales for the axes.

JJan0RodGar

80% match

Loading thumbnail…

D3 Example

This stacked bar chart visualizes estimated religious demographics for the top 5 most populous countries in 2010, using data from the Pew Research Center. The visualization uses D3's SVG rendering and animation to display population figures by religion across China, India, USA, Indonesia, and Brazil. Each bar is segmented by religion, with a color legend for identification. The chart supports interactive exploration: hovering over a legend item highlights the corresponding religion across all countries by dimming the other bars, and tooltips show exact population values. Axes use a custom tick format converting billions to "B". The example is based on a Stacked-to-Grouped Bars block and incorporates tooltip logic from another block.

663anp3ca

80% match