APIvahnenko

@APIvahnenko·2 public vizzes

Circles on a Map

This example visualizes global population data from 2018 using scaled circles overlaid on a natural Earth projection map. The area of each circle corresponds to a country’s population, while hover tooltips show exact values and region names. The visualization supports pan and zoom via the `d3.zoom` behavior. The map and circles are rendered as SVG, using `d3.geoPath` for geographic outlines, `d3.geoNaturalEarth1` for projection, and `d3.scaleSqrt` for circle sizing. A separate size legend and color legend are generated with custom D3 modules.

Mar 11, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example displays a basic world map using a natural Earth projection, with dark gray landmasses on a near-black globe sphere. The map is rendered as SVG paths generated from TopoJSON country boundaries loaded from the world-atlas package. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to convert geographic features into visible shapes. The code fetches the dataset with `json`, processes it via TopoJSON’s `feature` method, and appends each country path to the SVG container.

Mar 6, 2020