Force-Based Cartogram to Bubble Chart

100%

Force-Based Cartogram to Bubble Chart

✓ Published0🌍 Public

Last edited Sep 19, 2018

Created on Jan 28, 2017

A force-directed cartogram of U.S. county demographics smoothly transitions into a bubble chart, cycling through population attributes by sex, Hispanic origin, and race. Using `d3.forceSimulation`, `d3.forceCollide`, and `d3.forceX`/`d3.forceY`, circles representing counties are initially positioned by real geographic coordinates (cx, cy), then repelled by collision forces. A click toggles a mode where the force layout is replaced by a clustered arrangement along a horizontal axis, with bubbles sized and colored by the selected demographic variable via `d3.scaleLinear`, `d3.scaleCluster`, and `d3.hsl` accents. Data comes from Duke University’s county population estimates.

AI-generated description

Taking advantage of the forceSimulation-based nature of the cartogram to switch to a bubble chart using the same data.

Demographics from http://library.duke.edu/data/collections/popest

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/894ff63d02551badfc75536d77dcd49c'>Cartogram to Bubble Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

County Bubbles

A map of the United States uses brown circles sized by county population, with a legend for reference and hover tooltips showing the county name and population. The visualization overlays these bubbles on a gray landmass with white state borders, placing each circle at its county’s centroid. Built with D3 v3, it loads a TopoJSON file containing merged county, state, and nation geometries, projects it via `d3.geo.albersUsa`, and draws the map with `d3.geo.path` while sizing bubbles with `d3.scale.sqrt`. Population data comes from the 2012 American Community Survey.

Mmbostock

74% match

Loading thumbnail…

County Population Bubble Map for the US with D3.js!

A county population bubble map for the US uses an SVG projection with geoAlbersUsa and d3.geoPath to render state and county boundaries from TopoJSON data. Circles positioned via pathGenerator.centroid are sized by a d3.scaleSqrt mapping COVID-19 case counts from a CSV dataset, with zoom enabled through d3.zoom for interactive exploration.

Aacrasto-tibco

74% match

Loading thumbnail…

D3 Country Bubble Chart

This bubble chart displays each country as a circle scaled by population, with hover tooltips showing the country name and population. Interactive radio buttons switch between grouping modes—combining all bubbles, clustering by continent, positioning at country centers, or sorting by population—and toggle circle fills between continent colors and country flag patterns. The visualization uses d3.forceSimulation with custom force configurations for each grouping, d3.scaleSqrt for radius scaling, and SVG patterns for flag fills. It loads data from a CSV file and animates transitions between the different layouts.

AAnnie Chang

74% match

Loading thumbnail…

bubble one more time

A force-directed bubble chart displays individual BMI measurements grouped by race and sex, with circle radius proportional to BMI value and color encoding racial categories. Using D3 v3 and SVG rendering, the visualization loads data from a CSV file and applies a cluster force layout with collision detection to arrange bubbles into distinct groups. The code implements custom `cluster` and `collide` functions alongside the `d3.layout.force` simulation, while a tooltip on mouseover reveals each bubble's race, BMI, and sex. Circles are colored via an ordinal scale and positioned through the force layout's tick handler.

GGerardoFurtado

74% match

Loading thumbnail…

Bubbles - Force bounding

This example demonstrates a force-directed bubble chart that packs 21 data values into a square boundary. Fixed "boundary" nodes, positioned along the top and left edges, constrain the visible data circles within the 500x500 pixel area. The visualization uses D3 v5’s `d3.forceSimulation`, combining `forceX`, `forceY`, `forceManyBody`, and `forceCollide` to repel and pack circles without overlap, while radii are scaled with `scaleSqrt`. Each bubble is rendered as an SVG circle with a white label. The simulation runs 120 ticks before rendering, and the final layout is drawn in a single frame.

RRenan Barbosa

72% match

Loading thumbnail…

Force-Directed Bubble Chart: Age vs. Balance

This force-directed bubble chart visualizes the relationship between age and financial balance for individual records, using bubble size to encode balance magnitude and color to represent job categories. The chart employs a physics-based layout where circles repel and attract each other using `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` forces, settling into a non-overlapping arrangement after 120 simulation ticks. Data is fetched from a remote CSV file, parsed into objects, and rendered as SVG circles with interactive tooltips that display the exact age and balance on hover. The visualization uses D3 v7 loaded from UNPKG, with circle positions driven by the simulation's x and y coordinates.

Ssrikkanth05

71% match

Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

JJoker-tr

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

71% match