Skip to main content
100%

Basic D3 map (live mods) d3v4

✓ Published0🌍 Public
AAlan McConchie
Last edited Sep 11, 2017
Created on Sep 10, 2017

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.

AI-generated description

A basic map in D3 using some projection from here: https://github.com/d3/d3/blob/master/API.md#geographies-d3-geo

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/c069550b4fc4fb409430829f07bd78f2'>WWSD #6: d3.js projections</a>

forked from <a href='http://bl.ocks.org/almccon/'>almccon</a>'s block: <a href='http://bl.ocks.org/almccon/6ab03506d2e3ff9d843f69fa2d5c29cf'>Basic D3 map (Mercator)</a>

forked from <a href='http://bl.ocks.org/almccon/'>almccon</a>'s block: <a href='http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71'>Basic D3 map (Mercator) d3v4</a>

forked from <a href='http://bl.ocks.org/almccon/'>almccon</a>'s block: <a href='http://bl.ocks.org/almccon/dc1acd0b5d33c18c706f2d1e3ec5f3eb'>Basic D3 map (Robinson) d3v4</a>

mit Licensed

Similar vizzes

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
88% match
Loading thumbnail…

D3v5 map example

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.

AAlan McConchie
86% match
Loading thumbnail…

Basic D3 map (Mercator) d3v4

This visualization displays a basic world map using the Mercator projection, rendered as a single SVG path. The code loads GeoJSON data from an external URL and projects it with `d3.geoMercator()` and `d3.geoPath()`, scaling the projection to fit a 960 by 500 pixel viewport. The map fills the entire screen, with the SVG element sized to the full window. Built with D3 v4, it demonstrates the minimal setup required to draw geographic features from GeoJSON data using the library’s standard geo-path API.

AAlan McConchie
85% match
Loading thumbnail…

Basic D3 map (Mercator) d3v4

A basic world map rendered with the Mercator projection using D3 v4. The code loads GeoJSON data from an external URL and draws it as a single SVG path via `d3.geoPath`. The projection is configured with `d3.geoMercator`, scaling and translating to fit the 960×500 viewport. The map displays all countries as filled shapes from the world-110m GeoJSON dataset, with no additional styling or interaction.

AAlan McConchie
85% match
Loading thumbnail…

MM Basic D3 map (Robinson) d3v4

This example displays a Robinson projection world map, rendered as grey SVG paths, with populated places plotted as red or purple circles sized by population. The code uses `d3.geoRobinson()` and `d3.geoPath()` from D3 v4, along with the `d3-geo-projection` extension. It loads GeoJSON data for world boundaries and populated places from two remote URLs. Circle radii reflect `pop_max`, while `megacity` status determines color, and points are positioned by passing coordinates through the projection. All rendering occurs in SVG within a full-page viewport.

CCartophile
85% match
Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example shows a world map with populated places as circles, highlighting countries and cities through mouse interaction. It loads GeoJSON data for country boundaries and populated places from external URLs, then renders them using SVG paths and circles. The code uses D3’s `d3.geo.mercator()` projection and `d3.geo.path()` for map shapes, while circles are positioned via the projection on coordinates. On mouseover, a circle enlarges from radius 5 to 10 and logs its data to the console; mouseout reverts the size. The map uses D3 v3 and TopoJSON, with active states styled via CSS classes.

AAlan McConchie
83% match
Loading thumbnail…

Basic Map with D3

This example displays a world map using an SVG projection, with countries filled in green and the surrounding sphere rendered in turquoise. It uses the d3.geoPath and d3.geoNaturalEarth1 projection APIs from D3 v5, along with the topojson feature function to extract country boundaries from the world-atlas 110m dataset. The map renders by appending SVG path elements for each country, with a sphere outline drawn first to shape the background.

FFhouston17
82% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a blue spherical background. It uses D3 v5 and TopoJSON to load world-atlas data and render the map as SVG paths. The code applies a US-centered Albers projection via `d3.geoAlbersUsa`, and draws the globe using `d3.geoPath` with a synthetic sphere feature.

IIlir Memedi
82% match