Country Centroids on a Map

100%

Country Centroids on a Map

✓ Published0🌍 Public

Last edited Jan 21, 2016

Created on Dec 19, 2015

This example plots the centroids of countries on an equirectangular world map using D3 v3, rendering each centroid as a translucent pink circle. The map displays graticules, land masses, and country boundaries, with centroids computed via `d3.geo.path().centroid()` on TopoJSON features from a world-50m dataset. Users can pan and zoom the entire visualization through `d3.behavior.zoom`. The code also includes an unused CSV file of invitation chains, though the map itself only visualizes geographic centroids.

AI-generated description

This example shows one way to plot the centroids of geometies using d3.path.centroid. You can also pan and zoom.

The idea here is to provide a starting point for sized donut charts, or Polar Area Small Diagrams, for all countries, on a map. The centroids however are not quite right. The US looks off-center, skewed I suppose by Alaska.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3757119'>Equirectangular (Plate Carrée)</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/6567fb027971588bc779'>Invitations Links Map</a>

Built with blockbuilder.org

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1991885&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

Similar vizzes

Loading thumbnail…

Circles on Map

This visualization displays circles on a world map, with each circle positioned at the centroid of its corresponding country. The circles are rendered on top of countries colored in orange, using a natural Earth projection. The code loads asylum data from a CSV file and country geometries from TopoJSON, and uses `d3.geoPath` and `d3.geoCentroid` to project and place the circles. Zooming is enabled through `d3.zoom` on an SVG canvas.

Aankita1mit

80% match

Loading thumbnail…

Circles on Map

Aankita1mit

80% match

Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection to display country boundaries and population data. Circles sized with `d3.scaleSqrt` are positioned at each country's centroid using `d3.geoCentroid`, with circle area proportional to 2018 population estimates from the UN. Users can pan and zoom via `d3.zoom`, while hovering reveals a tooltip with country name and population. The code employs `d3.geoPath`, `topojson.feature`, and a custom size legend rendered in SVG.

CCurran Kelleher

80% match

Loading thumbnail…

Circles on the Map

This example displays a natural Earth projection world map where each country is filled with a light gray or pink color based on whether population data exists for 2020. Circles sized by population are placed at each country’s centroid using `geoCentroid` and scaled with `scaleSqrt`. The visualization uses `d3.geoPath` to render the map, `d3.zoom` for panning and zooming, and includes size and color legends built from reusable components. Data comes from UN population CSV files and TopoJSON world atlas geometry, processed with `topojson.feature`.

MMunTatt Yap

79% match

Loading thumbnail…

Circles on a Map

This visualization maps population by country using circles positioned at each country’s centroid, with circle area proportional to 2018 population data loaded from a CSV and joined to TopoJSON world geometry via d3.csv and topojson.feature. d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid project the map, while d3.scaleSqrt sizes the circles. The map supports pan and zoom through d3.zoom, and hovering reveals country names and population values via SVG title elements. A custom size legend and a separate color legend are rendered as SVG groups.

CCurran Kelleher

79% match

Loading thumbnail…

World Map with D3.js!

This example renders a world map using an equirectangular projection, with countries filled in pink against a light blue sphere. It loads country boundaries from a TopoJSON file (world-atlas countries-110m.json) and converts them to GeoJSON features using the `feature` method. The visualization employs D3 v5’s `geoPath` and `geoEquirectangular` functions to generate SVG paths, and CSS hover styles highlight each country in green. The sphere and country shapes are appended as SVG path elements with distinct classes.

Yyaswanthsen

78% match

Loading thumbnail…

Circles on Map

This example displays a world map with circles positioned at the centroids of countries, sized to reflect their 2018 population estimates. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic boundaries with `d3.geoPath`, while circle radii are scaled with `d3.scaleSqrt`. Populated countries appear with teal circles, and gray or pink fills indicate data availability. The visualization loads population data from a CSV and country geometries from TopoJSON, and supports zooming through `d3.zoom`. Hovering reveals a tooltip with the region name and population count.

Aankita1mit

78% match

Loading thumbnail…

Circles on a Map

This example displays a natural Earth projection world map with semi-transparent teal circles sized by each country’s 2018 population estimate, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to position circles at country centers. A d3.scaleSqrt maps population values to circle radii, and a custom size legend shows graduated tick marks. Countries missing data appear pink, and hovering highlights them turquoise. The visualization loads UN population CSV data and TopoJSON world geometry via d3.csv and d3.json, renders SVG paths and circles, and supports zooming through d3.zoom.

KKazushige Okuma

78% match