Skip to main content
SimilarExport ZIP
100%

D3 Example

✓ Published0🌍 Public
CCurran Kelleher
Last edited Nov 20, 2015
Created on Nov 20, 2015

This example visualizes population totals for the world’s five largest countries using area-encoded circles. It shows a bubble chart where each circle’s radius scales with population, with countries positioned along an ordinal x-axis. The visualization uses D3.js version 3.5.5 to load a CSV file via `d3.csv`, apply a square-root scale for radii, and render SVG circles with an axis. The code employs `d3.scale.ordinal` and `d3.scale.sqrt` to map data, and custom tick formatting replaces "G" with "B" for billions.

AI-generated description

This visualization uses area to encode population for the largest 5 countries of the world. This is example 21 from the screencast Splitting Charts.

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=1979627&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 example shows the population of the world’s five largest countries as circles, where the area of each circle encodes population size along a common horizontal axis. The chart uses D3.js version 3.5.5, with an ordinal x-scale for country names and a square-root radius scale to map population values. Rendered as SVG, it pulls data from a CSV file (`populationByCountry2015.csv`) and formats large numbers with a custom SI tick label that replaces "G" with "B".

CCurran Kelleher
94% match
Loading thumbnail…

D3 Example

This example visualizes the top five countries by population as a bar chart of empty, gray-outlined rectangles. It demonstrates how to scaffold a visualization with arbitrary nested layouts by rendering fixed-height placeholders for each country. The code uses D3.js (version 3.5.5) with an ordinal scale and range bands to position the bars, an SVG axis for labels, and a custom tick formatter that abbreviates billions as “B.” Data is loaded from a CSV file listing 2015 population estimates, with the x-axis mapped to country names and the y-axis left unencoded for future flexibility.

CCurran Kelleher
85% match
Loading thumbnail…

D3 Example

A single orange rectangle represents the world population of 7,349,472,099 from the CSV file `worldPopulation2015.csv`. The visualization uses D3’s ordinal and linear scales to position the bar and axis, with a custom tick format that abbreviates billions as “B”. The SVG rendering includes labeled axes, using the `d3.svg.axis` API and a `d3.format("s")` helper, while the bar’s height encodes the population value against the scaled y-axis.

CCurran Kelleher
85% 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
84% 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
84% match
Loading thumbnail…

D3 Example

This example visualizes the population sizes of world religions using colored circles positioned along a horizontal axis. It shows the data as an array of circles, with each circle’s area encoding the population value and its color representing the religion category. The visualization is rendered as an SVG using D3.js (version 3.5.5), with an ordinal x-scale for categorical spacing, a square-root scale for radius, and a categorical color scale. The x-axis is rotated slightly, and data is loaded from a CSV file (`religionWorldTotals.csv`) using `d3.csv`.

CCurran Kelleher
83% match
Loading thumbnail…

Showing World Population with D3

This example displays world population data as a series of static rectangular bars, each representing a country’s population value loaded from a local CSV file. Using D3 v7, the code parses the data with `d3.csv`, converts population strings to numbers, and renders SVG `<rect>` elements via `selectAll` and data joins. A `d3.scaleLinear` is configured for the x-axis domain, though the bars currently use fixed dimensions and do not yet map population values to visual properties.

FFaysalIbnMohi
83% 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
83% match