D3 | Dorling map using force layout
This visualization shows a Dorling map where each country is represented as a circle positioned by longitude and latitude coordinates, with circle size encoding a numeric value and color a separate range value. A force-directed network layout adjusts the circles to avoid overlap, while an overlaid Voronoi grid enhances interactivity by providing stable hit areas for selecting countries. The map is built with D3 v3, using data from `dorling-coordinates.json` and `dorling-countries.json`, and the force simulation and Voronoi diagram are rendered via D3’s force layout and `d3.geom.voronoi` APIs. The Voronoi grid is visible in development mode but hidden in production.
AI-generated descriptiondorling map with force layout and voronoi grid
Chart maps countries utilising longitude and latitude co-ordinates applied with a force network. Voronoi grid applied to improve the chart's interactive experience in selecting countries and prevent jumping/flashing. Note: Grid is invisible in production.
- View code on gitHub repo
- Based on Aaron Bycoffe’s Block
forked from <a href='http://bl.ocks.org/eesur/'>eesur</a>'s block: <a href='http://bl.ocks.org/eesur/3899eba895ca9065ccd5709383fb30bb'>d3js | dorling map with force and voronoi</a>