Skip to main content
100%

D3v5 map example

✓ Published0🌍 Public
AAlan McConchie
Last edited Oct 4, 2018
Created on Oct 4, 2018

A world map rendered in SVG shows populated places as green circles sized by population. The visualization uses d3.geoEqualEarth projection with d3.geoPath to draw the landmasses from a GeoJSON world dataset, while city coordinates are projected from a second GeoJSON file of populated places. Circle radii initially reflect maximum population, then animate via a five-second transition to minimum population values. The example loads both datasets with Promise.all and d3.json, with all rendering handled through SVG elements.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Basic D3 map (live mods) d3v4

This example shows a world map rendered with a stereographic projection, overlaid with populated places as scaled circles. The map uses D3 v4’s `d3.geoStereographic` projection and `d3.geoPath` to draw country outlines from GeoJSON world data. City points come from a second GeoJSON dataset, with circle radius proportional to `pop_max` and color indicating megacity status (dark green) versus other populated places (salmon). The code loads both datasets via `d3.json` and appends SVG circles with opacity for visual clarity.

AAlan McConchie
86% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map showing country boundaries as light green filled paths on a steel blue sphere, using a geographic equal Earth projection. The map is drawn entirely as SVG with D3 v5 and TopoJSON, loading the world-atlas 110m dataset from unpkg. The code defines a path generator via d3.geoPath and d3.geoEqualEarth, appends a spherical outline, then converts the TopoJSON topology to GeoJSON features using topojson.feature before binding them to path elements.

JJefferson Abreu
83% match
Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered with D3.js using the geoEqualEarth projection, with countries filled in green and a blue sphere background. It demonstrates geographic data visualization by loading the world-atlas TopoJSON dataset and converting it to GeoJSON features via topojson.feature. The map uses d3.geoPath with the projection to draw SVG paths. The code also imports additional projections like geoMercator and geoOrthographic, though only equal-earth is applied here.

EEdward-Elric233
82% match
Loading thumbnail…

Untitled

This example shows a world map with cities whose populations exceed 50,000, rendered as semi-transparent circles sized by the square root of their population. The map includes landmasses, country interiors, graticules, and a background sphere, all drawn using `d3.geoPath` with the Natural Earth projection (`geoNaturalEarth1`). City data comes from a Simplemaps CSV loaded via `d3.csv`, while country boundaries are derived from World Atlas TopoJSON processed with `topojson.feature` and `mesh`. The visualization is built with React and D3 v4, using `scaleSqrt` to map population values to circle radii.

Ssdilbaz
82% match
Loading thumbnail…

Untitled

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles scaled by population size. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations are loaded via d3.csv, with circles positioned using the projection and sized through a linear scale. The SVG is built in React, with static styling applying a light fill to land and subtle borders.

VVineel Gannu
82% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green against a blue sphere background. It uses D3 v5 to load GeoJSON data from the world-atlas TopoJSON file, converting it with `topojson.feature`. The map is projected using `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. A separate path represents the sphere outline. The visualization updates dynamically once the data loads, adding country paths to the SVG.

OOliverlee1003
82% match
Loading thumbnail…

Basic geo path

This example displays a world map using an equal-earth projection, with country boundaries drawn as SVG paths. It loads GeoJSON country shapes and CSV population growth data, computing a color scale based on the 2020 population growth rates for each country. The code uses d3.json, d3.csv, d3.geoEqualEarth, d3.geoPath, and d3.scaleLinear, though the population data is processed but not yet applied to the map. The visualization renders static gray country outlines without color encoding, demonstrating basic D3 v6 geographic path setup.

NNita
82% match
Loading thumbnail…

Basic D3 map (Robinson) d3v4

This example shows a world map and its populated places, with the landmasses filled in red and each city marked by a purple circle. It uses the D3 v4 library with the `d3.geoMercator` projection and `d3.geoPath` to render geographic data from a GeoJSON file containing 50m populated places. The map is drawn as an SVG path, while city coordinates are projected onto the same projection to position the circles. The code relies on `d3.json` to load the external dataset and includes the `d3-geo-projection` plugin.

LLiddler
82% match