Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
NNicholasARossi
Last edited Nov 27, 2017
Created on Nov 27, 2017

This visualization displays a force-directed bubble chart of per-capita GDP data from Gapminder for 100 countries. Each country appears as a circle whose size and color encode its GDP value, with a color scale interpolating from blue to orange. Circles repel and collide using `d3.forceSimulation`, `d3.forceManyBody`, and `d3.forceCollide`. A tooltip showing the country code and dollar amount appears on mouseover. The SVG is rendered with D3 v4.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

Force Simulation

This example visualizes country GDP data as a force-directed bubble chart. Each circle represents a country, with its radius proportional to GDP (capped at a minimum size) and its color indicating continent, using d3.scaleOrdinal for categorical coloring. The layout is computed by d3.forceSimulation, combining d3.forceX, d3.forceY, d3.forceManyBody, and d3.forceCollide forces to cluster and repel the nodes. Users can drag circles via d3.drag, temporarily fixing their positions during interaction. The data comes from a CSV file, and the SVG circles are positioned on each simulation tick.

TThanaporn-sk
84% match
Loading thumbnail…

Force Simulation

This example visualizes country GDP data as a force-directed bubble chart. Each circle represents a country, with its radius proportional to GDP (capped at a minimum size) and its color indicating continent, using d3.scaleOrdinal for categorical coloring. The layout is computed by d3.forceSimulation, combining d3.forceX, d3.forceY, d3.forceManyBody, and d3.forceCollide forces to cluster and repel the nodes. Users can drag circles via d3.drag, temporarily fixing their positions during interaction. The data comes from a CSV file, and the SVG circles are positioned on each simulation tick.

TThanaporn-sk
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
81% match
Loading thumbnail…

Untitled

This visualization shows a force-directed bubble chart where each circle represents a country, with its size corresponding to GDP data loaded from a CSV file. The bubbles are color-coded by team and cluster toward the center of the screen. The code uses d3.forceSimulation with forceX, forceY, forceCenter, forceManyBody, and forceCollide to position the nodes, while d3.drag enables interactive dragging of individual circles. The SVG rendering fills each node with a color from a d3.scaleOrdinal palette, and the simulation updates circle positions on each tick.

SSitanshu Rupani
81% match
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
81% 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
81% match