Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
CCaptainCondescending
Last edited Dec 6, 2017
Created on Dec 6, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example visualizes global health and wealth data as a bubble chart, where each circle represents a country positioned by life expectancy (y-axis) and GDP per capita (x-axis), with circle size encoding population and color encoding continent. It uses D3 v4’s scales (`scaleLinear`, `scaleLog`, `scaleSqrt`, `scaleOrdinal`) to map variables and renders SVG circles with axes labeled accordingly. The code loads CSV data via `d3.csv` and applies sorting by population, while styling uses opacity and a light grey background. The chart focuses on comparing country-level indicators, with axes labeled in French.

CClaraGriot
84% match
Loading thumbnail…

fresh block

A bubble chart maps life expectancy against GDP per capita, with each circle sized by population and colored by continent, using data from a `recent.csv` file. The SVG visualization employs `d3.scaleLog` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.scaleSqrt` for circle radii, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, sorted by descending population. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

PPierreLrnt
84% 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
82% match
Loading thumbnail…

fresh block

This visualization is a bubble chart that plots countries by wealth (GDP per capita, on a logarithmic x-axis) against health (life expectancy at birth, on a linear y-axis). Each circle’s radius encodes population using a square-root scale, while its color maps the continent via an ordinal scale with the `d3.schemeCategory10` palette. The SVG is rendered with D3 v4, using `d3.axisBottom` and `d3.axisLeft` for labeled axes, and the data is loaded from a CSV with `d3.csv`.

PPierreLrnt
82% match
Loading thumbnail…

fresh block

This scatterplot visualizes Gapminder data from 1970, plotting fertility against life expectancy for various countries. Each circle’s size encodes population, while its color distinguishes geographic regions. The visualization uses d3.csv to load the data, d3.scaleLinear for the axes, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with schemeCategory10 for region colors. SVG elements are drawn via d3 selections, with axes generated using d3.axisBottom and d3.axisLeft, and a legend included.

AAitorCCE
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
81% 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
79% 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
79% match