Skip to main content
SimilarExport ZIP
100%

D3 | Dorling map using force layout

✓ Published0🌍 Public
TThanaporn-sk
Last edited Feb 6, 2018
Created on Feb 6, 2018

A Dorling map displays countries as circles sized by an encoded value, positioned near their geographic centers using a force-directed layout. The D3.js v3 visualization applies a Voronoi grid to enable stable country selection and prevent interactive flickering. Circle color and area map to data values from the provided JSON files, with country labels overlaid. The implementation utilizes D3's force simulation and Voronoi functions, with an optional developer mode to reveal the underlying grid structure. Coordinates and country attributes are loaded from external JSON data sources.

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

Loading thumbnail…

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.

FFrissAnalytics
92% match
Loading thumbnail…

map of d3

This map of d3 displays the world’s countries as green, stroked polygons, using a Mercator projection. The data comes from the world-atlas GeoJSON file, which is loaded via d3.json and converted into geographic features with topojson’s feature function. The code uses d3.geoPath and d3.geoMercator to generate the SVG paths, while d3.select appends each country’s shape to the canvas. Population figures from the included data.csv are not visualized in this example.

HHillKinsh
75% match
Loading thumbnail…

Let's make a map with D3.js!

A world map drawn with D3.js shows country boundaries as SVG paths projected with the Natural Earth projection, with a dark sphere as the background. The visualization loads geographic data from the world-atlas TopoJSON file and renders each country as a filled path. Interactive mouseover and mouseout events change the fill color and stroke width of individual countries, providing immediate visual feedback. The code uses D3 v5 functions such as `geoPath`, `geoNaturalEarth1`, and `select` alongside the TopoJSON `feature` API.

Hhlkyt
74% match
Loading thumbnail…

D3 Map

This D3 map visualizes global countries using a natural Earth projection. It renders a blue sphere backdrop with light green country polygons outlined in black. The visualization uses the `d3.geoNaturalEarth1` projection with `d3.geoPath` to generate SVG paths, and the `topojson.feature` API to extract country boundaries from a world-atlas TopoJSON dataset. The map displays a graticule-free, simplified world view with countries filled and stroked according to CSS classes.

Rrdeichert
74% match
Loading thumbnail…

D3 map

This example displays a world map with color-coded countries and circular markers positioned at geographic coordinates, each filled with a photographic image. It uses D3.js (v5) with the `geoNaturalEarth1` projection and `geoPath` to render the map, loading TopoJSON country boundaries from the world-atlas package. Data is fetched from a SPARQL endpoint via a query that retrieves images, titles, and latitude/longitude for cultural heritage objects. The code creates SVG patterns containing images and applies them as fills to circles positioned using the projection function.

Kkimgarrard
74% match
Loading thumbnail…

D3 map

A world map rendered with D3 shows a natural Earth projection of countries in goldenrod over a black sphere. Circles representing museum objects are plotted and animated with a staggered bounce-in effect using D3 transitions. The code uses `geoNaturalEarth1` and `geoPath` for geographic rendering, TopoJSON for country boundaries, and fetches SPARQL query results from a Dutch heritage dataset, mapping latitude and longitude coordinates to circle positions.

RRoyCsuka
74% match
Loading thumbnail…

D3.js Map

This map visualization displays world countries on a natural Earth projection, allowing users to click individual countries to toggle their fill between light green and red. Built with D3.js v5 and TopoJSON, it loads geographic data from the world-atlas package and country names from a TSV file. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for rendering, with d3.zoom enabling pan and zoom interactions on the SVG canvas.

Ffloresh
74% match
Loading thumbnail…

D3 map

A world map uses D3’s geoNaturalEarth1 projection and geoPath to render country boundaries as SVG paths. Data points from a SPARQL endpoint—querying museum objects and their associated locations—are plotted as animated circles that bounce into place with a staggered transition delay. The map uses TopoJSON for geographical features and d3.json for loading. Each circle’s position is computed via the projection from longitude and latitude values, with a simple bounce easing to animate the radius.

CCoenmathijssen
74% match