The circular cartogram shows Belarus population size distributed by regions.
Also referred to as the Dorling Cartogram, circular cartogram draws each region on a map as a circle — the simplest of all shapes — with its area proportional to plotting value. The very idea of this method is to show clearly how the certan value varies by regions, without having to compare their complex shapes.
The cartogram below displays population size for urban and rural regions of Belarus.
Hover over bubbles for details, use checkbox to toggle between circles and region shapes.
While there is no way to build a true continuous cartogram (see isodemographic map, for example) with this method, it produces a solution in which no circles overlap and as many as possible are still in close contact with their original geographic neighbours.
A distinctive feature of circular cartogram — as more details are added, the picture becomes more accurate. And when the areas also displays near similar value the improvement is even greater.
Read Area Cartograms: Their Use and Creation by Daniel Dorling for details.
The cartogram is based on the same principle as the bubble chart. The algorithm uses the circle's area to encode a variable (in this case population size) and x, y position to put it in the right location. And for the cartogram the right location is the center of the corresponding region (also called centroid) — it was calculated based on the basemap (I used Belarus topojson that I configured earlier).
To prevent overlap between the circles used d3-force module, and in particular collide and many-body (gravity) forces.
Each region is treated as an object in a gravity model which is repelled by other circles with which it overlaps, but is attracted to the region center on the original map.
Afterall, I wanted to add a transition from bubbles to regions shape for better visibility, but faced an issue: circles, converted into a path for transition needs, have acquired a shape far from being circular.
Fortunately, I was lucky enough to find flubber library developed by Noah Veltman. It provides smooth and reliable shape-to-circle / circle-to-shape interpolations — everything I need for this task.
What's great about circles, you can easily encode something in addition to x or y position and area, e.g. color (already used in the visualization above to code urban/rural category), strokes, patterns, nested charts and figures, etc.
Below is a list with some alternative versions to encode the same data on a circular cartogram for more specific cases (click an item to render the corresponding data visualization):
This data visualization is as a part of Graphing Belarus series, a personal project to explore Belarus with data.
The circular cartogram is built with D3.js using topojson and d3-force module. flubber is used to make smoothly shapes transition.
This visualization was inspired by Chart Snapshot: Dorling Cartograms on The Data Visualization Catalogue, Dorling Cartogram Circle Packs by Chris Henrick.
Data source: Belarus population on Jan. 1, 2024. National Statistical Committee of the Republic of Belarus.