Skip to main content
SimilarExport ZIP
100%

D3 Example

✓ Published0🌍 Public
CCurran Kelleher
Last edited Dec 4, 2015
Created on Dec 4, 2015

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.

AI-generated description

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

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

MIT License

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

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
91% 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
90% match
Loading thumbnail…

D3 Example

This example visualizes the growth of world population from 1950 to 2015 with a single black line chart. It shows a steady upward trend over time, with the x-axis representing years and the y-axis showing population counts in billions. The visualization uses D3.js version 3.5.5, specifically `d3.svg.axis()`, `d3.time.scale()`, and `d3.svg.line()` to construct the chart. Data comes from the United Nations Population Estimates, loaded from a CSV file via `d3.csv`. The SVG rendering includes styled axes with custom tick formatting that converts "G" to "B" for billion, and the chart is drawn with a thick black stroke.

CCurran Kelleher
89% match
Loading thumbnail…

D3 World Population Area Chart

This example visualizes world population by year as a smooth filled area chart, with the area rising from zero to peak population and labeled axes for year and population. The SVG rendering uses d3.area with curveBasis for the smoothed path, d3.scaleTime and d3.scaleLinear for the scales, and d3.axisLeft and d3.axisBottom for the tick marks. Population data is loaded via d3.csv from a VizHub-hosted dataset, and the y-axis ticks are formatted to abbreviate billions as "B".

Rrdeichert
88% match
Loading thumbnail…

d3 Starter World Population Area Chart

This world population area chart displays global population by year, using data derived from the United Nation's World Population Standard Projections in 2015. The visualization renders an SVG area chart with a time-based x-axis and a formatted population y-axis, showing population growth over time in billions. The implementation uses D3 v5 APIs including `select`, `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area` with `curveBasis`, and `tickSize` to create the chart, axes, and styling.

GgitSushi
87% match
Loading thumbnail…

World population

This example displays world population trends over time using an area chart, with the x-axis representing years and the y-axis showing population counts. The visualization renders as an SVG with a maroon, partially transparent filled area and axis labels. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `axisBottom`, `axisLeft`, and `curveBasis` for smoothing, and loads population data from a CSV file. The dataset spans multiple years, with values formatted using `d3.format`.

PPeter S
87% match
Loading thumbnail…

D3 World Population Area Chart

This visualization displays world population trends over time as a smooth, orange area chart. The SVG rendering uses D3 v7’s `area` generator with `curveBasis` for smoothed curves, alongside `scaleTime`, `scaleLinear`, and `axisBottom`/`axisLeft` for axes. Population data is loaded via `csv` from a remote dataset, with logarithmic scaling for the y-axis labels using `format`. A semi-transparent steelblue circle overlay marks individual data points. The chart includes titled axes and a clean white background.

YYoung Song
87% match
Loading thumbnail…

World Population Area Chart

This D3.js area chart displays world population by year, with time on the x-axis and population count on the y-axis. The chart uses a smooth, curved area fill to emphasize population growth trends. Data is loaded from a CSV file and rendered as an SVG using D3 v5. The visualization includes customized axes with formatted tick labels, axis titles, and a chart title, all styled with a distinct color palette.

RRichard Wong
86% match