D3 Example

100%

✓ Published0🌍 Public

Last edited Jan 22, 2016

Created on Nov 30, 2015

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.

AI-generated description

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

MIT License

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

Similar vizzes

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

92% 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

89% 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

87% match

Loading thumbnail…

D3 World Population Area Chart

This visualization combines an area chart with D3’s `scaleTime` and `scaleLinear` to show world population growth from 1960 to 2015, using a smoothed `curveBasis` path. It loads CSV data via `d3.csv` and formats y-axis ticks with `format('.1s')`. The SVG render includes labeled axes with gridlines from `axisBottom` and `axisLeft`, while the maroon-filled area emphasizes population magnitude over time.

Aadbirch

83% match

Loading thumbnail…

Worldwide Population

This visualization presents global population growth from 1950 to 2015 using two complementary SVG charts: a line chart and an area chart, both rendered with D3 v5. The data from a CSV file is mapped with `scaleTime` for the temporal x-axis and `scaleLinear` for the population y-axis, with tick values formatted to show billions. Both charts share axes and margins, but the line chart uses a single red, semi-transparent path via `d3.line` and `curveBasis`, while the area chart fills the space beneath its curve using `d3.area`.

Aala-wahibi

83% match

Loading thumbnail…

World Population by Year 2015

This visualization displays global population growth from 1960 to 2015, using an area chart with a smoothed basis curve to show population values in billions over time. The D3 v5 code loads CSV data, scales the x-axis with `scaleTime` and the y-axis with `scaleLinear`, and renders an SVG path via the `area` generator. Axis labels and gridlines are added using `axisBottom` and `axisLeft`, with population values formatted using D3’s `format` function.

MMichał Szumnarski

83% match

Loading thumbnail…

World Population

This area chart shows global population growth from 1960 to 2015, with a smooth curve and individual data points marking each year. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` with `curveBasis` for the filled path, and `d3.axisBottom` and `d3.axisLeft` for labeled ticks. Population values are formatted in billions using `d3.format`. Data comes from the CSV file `world-population-by-year-2015.csv`.

Ssgzzhinde

83% match

Loading thumbnail…

World population area chart

This area chart visualizes world population growth from 1950 to 2015, with the x-axis representing years and the y-axis showing population in billions. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth filled path. Data is loaded asynchronously from a CSV file using `d3.csv`, with axes rendered via `axisBottom` and `axisLeft`. SVG is the rendering approach, and the visualization includes custom tick formatting that converts values like "G" to "B".

NNikki-gea

83% match