Skip to main content
100%

fresh block

✓ Published0🌍 Public
WWobugaosuni
Last edited Nov 23, 2017
Created on Nov 23, 2017

This visualization animates a global map of urban population growth, plotting 2015 and 2030 projections for cities as linked circles. Using D3 v4, it renders an SVG world map and projects city coordinates onto a canvas, with each city represented by a circle whose radius encodes population. A transition animates the circles between the two years, and a legend, likely with a color scale, distinguishes 2015 from 2030 values. Hover interactions may reveal city details.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This visualization maps urban population growth from 2015 to 2030 using a globe with dots positioned by latitude and longitude from cities.csv. Canvas rendering draws the world map and animated growing circles sized by projected population, while SVG overlays provide hover interactivity. D3 v4 powers the geographic projections and data-driven transitions, with each city represented by a circle that scales from its 2015 to 2030 population estimate, offering a comparative view of urban expansion across countries.

WWobugaosuni
96% match
Loading thumbnail…

fresh block

This example animates the classic Gapminder bubble chart, mapping fertility, life expectancy, and population over time. It uses D3 v5 to render SVG circles, with x position encoding GDP per capita, y position encoding life expectancy, and circle size encoding population, while color distinguishes world regions. The chart plays through decades of country-level data, showing how nations move across the socioeconomic landscape as development indicators shift.

AAitorCCE
81% match
Loading thumbnail…

fresh block 123

A scatterplot of city populations updates dynamically through buttons that add or remove data points. The visualization uses D3 v4 with an SVG rendering, mapping population to circle radius via a square-root scale and continent to color through an ordinal color scheme. The data join pattern selects all circles, binds the updated array, removes exiting elements, and styles entering and existing circles with the same attributes. Clicking Add generates a random Shanghai population, while Remove deletes the last city.

Aallyraza
81% match
Loading thumbnail…

fresh block

This example, built with D3 v5 and SVG, visualizes a Gapminder-style dataset using a bubble chart. The x-axis represents GDP per capita, the y-axis shows life expectancy, circle size encodes population, and color maps to geographic region. The chart animates through years 1964 to 2013, showing how countries' development indicators evolve over time. A play button and time slider allow users to scrub through the years, with circles transitioning smoothly between states. The visualization highlights global trends in health and wealth, with tooltips providing country-specific data on mouseover.

AAitorCCE
80% match
Loading thumbnail…

fresh block

This chart visualizes global population data with a circular bubble layout, where each circle's size corresponds to a country’s population value from POP.csv. The visualization uses d3.pack to compute the hierarchical circle packing, with colors assigned via d3.scaleOrdinal and d3.schemeCategory20c. Circle labels are clipped using SVG clipPath elements, while d3.csv loads the data and d3.hierarchy structures it. Each bubble includes a tooltip showing the country name and its formatted population figure.

CCaptainCondescending
78% match
Loading thumbnail…

Circle on the Map

This interactive map visualizes projected population changes from 2020 through 2030, with circles sized by population using a square-root scale. The visualization animates growth by iterating through years, transitioning circle radii with `transition.delay` and `transition.duration`. It uses D3 v5 with `geoNaturalEarth1` projection, `geoPath`, and TopoJSON world data merged with UN population CSV data, offering zoom via `d3.zoom` and a legend showing population values.

Jjesramyep1263
78% match
Loading thumbnail…

fresh block

A diverging bar chart displays cumulative greenhouse gas emissions for the ten largest countries by final rank, broken into annual increments. Orange circles sized by national population sit atop each bar segment, with hover tooltips showing country and population. The visualization, built with D3 v4, uses SVG circles, rectangles, and text, and animates through years by filtering data from a CSV file.

RRobertDelgado
77% match
Loading thumbnail…

fresh block

A diverging bar chart displays cumulative greenhouse gas emissions for the ten largest countries by final rank, broken into annual increments. Orange circles sized by national population sit atop each bar segment, with hover tooltips showing country and population. The visualization, built with D3 v4, uses SVG circles, rectangles, and text, and animates through years by filtering data from a CSV file.

RRobertDelgado
77% match