Skip to main content
100%

D3 | Dorling map using force layout

✓ Published0🌍 Public
FFrissAnalytics
Last edited Oct 1, 2018
Created on Dec 8, 2016

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 description

dorling 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.

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>

mit Licensed

Similar vizzes