D3 Course 12: Circles on a Map

100%

D3 Course 12: Circles on a Map

✓ Published0🌍 Public

Last edited May 13, 2020

Created on May 12, 2020

Forked from D3 Course 10: Choropleth Map

This example visualizes global population estimates for 2018 as semi-transparent circles projected onto a natural Earth map. It uses d3.geoNaturalEarth1 and d3.geoPath to render countries from TopoJSON, while d3.geoCentroid computes each country’s center for circle placement. The data comes from a UN population CSV, merged by country code, with missing or unmatched values highlighted in red. Circles are sized using d3.scaleSqrt, and interactive zoom is enabled via d3.zoom. A custom legend displays population value ticks.

AI-generated description

Data Visualization with D3 course; Circles on a Map

<h3>Circles on a Map</h3> <table> <th align="left">Topics</th> <tr> <td> <ul> <li><b>Converting an Excel to CSV</b></li> <li><b>Matching identifiers (e.g. "076" vs "76")</b></li> <li><b>Handling (and visualizing) missing data</b></li> <li><b>Computing and projecting centroids</b></li> <li><b>Visualizing population using circles</b></li> <li><b>Tweaking styles and interaction</b></li> </ul> </td> </tr> </table>

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Circles on a Map

This example visualizes global population estimates for 2018 using semi-transparent circles positioned over a natural Earth projection map. Countries with missing data appear in a different shade, while hover effects highlight individual nations. The visualization loads UN population data from a CSV file and country boundaries from a TopoJSON world atlas, then renders the map using `d3.geoPath` and `d3.geoNaturalEarth1`. Circle sizes are scaled with `d3.scaleSqrt`, positioned via `d3.geoCentroid` and `projection`, and the map supports zooming through `d3.zoom`. A custom legend is drawn using SVG circles and text.

Rrdeichert

94% match

Loading thumbnail…

D3 Circles on a Map

This visualization displays global population estimates for 2018 using circles positioned at country centroids on a natural Earth projection, rendered as an SVG. It uses `d3.geoPath` for map geography, `d3.geoCentroid` for circle placement, and `d3.scaleSqrt` to encode population via circle area. The code loads UN population data from a CSV and country boundaries from a TopoJSON file, styling countries and circles with CSS. A legend shows size scaling, and missing data is highlighted in red. Interactivity includes hover highlighting and zooming via `d3.zoom`.

Ssaliha54

93% match

Loading thumbnail…

Circles on a Map

This example visualizes global population estimates for 2018 using circles overlaid on a natural Earth projection map. Countries with missing data appear pink, while populated areas are gray with semi-transparent cyan circles sized by population via d3.scaleSqrt. The visualization includes an interactive size legend with formatted tick values and a color legend. It uses d3.geoPath, d3.geoCentroid, d3.zoom, and d3.scaleOrdinal, rendering with SVG. Population data comes from a UN CSV file joined to TopoJSON world geometry, with tooltips showing country names and population counts.

Ffloresh

91% match

Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018 by placing semi-transparent blue circles at the geographic centroids of each country on a natural Earth projection. The map supports zooming and panning via d3.zoom, with a size legend showing population values scaled using d3.scaleSqrt. Data combines UN population CSV with TopoJSON world boundaries, processed using d3.csv, d3.json, and topojson.feature. The code uses d3.geoPath, d3.geoCentroid, and d3.geoNaturalEarth1, alongside SVG rendering to show the choropleth-like country fills and legend components.

CCarloGato

91% match

Loading thumbnail…

Circles on a Map

CCarloGato

91% match

Loading thumbnail…

Circles on a Map with D3.js!

This visualization displays world population estimates for 2018 as semi-transparent circles positioned at country centroids on a Natural Earth projection map. Circle size encodes population magnitude, while a color legend categorizes countries by income group. The code uses D3.js v5 with `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, plus TopoJSON data from world-atlas and UN population CSV data. Interactive zooming is implemented via `d3.zoom`, with SVG rendering and custom color and size legends.

Fforcox43

91% 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

91% match

Loading thumbnail…

Circles on a map with D3.js!

This example displays global population estimates for 2018 as circles positioned on a natural Earth projection map using D3.js v5. Countries with missing data appear in red, while circles scale in radius according to population via `d3.scaleSqrt`. The visualization includes zoom functionality via `d3.zoom`, a size legend generated with custom tick formatting, and tooltips using SVG `<title>` elements. Geographic boundaries are rendered from TopoJSON data, while population statistics come from a CSV file of UN estimates, with `d3.geoPath` and `d3.geoCentroid` handling map geometry.

CCarloWK1202

91% match