Basic D3 map (Robinson) d3v4

100%

Basic D3 map (Robinson) d3v4

✓ Published0🌍 Public

Last edited Sep 10, 2017

Created on Sep 10, 2017

This example displays a basic world map rendered with the Robinson projection, a compromise projection that reduces distortion of area, shape, and distance. The visualization loads a GeoJSON dataset of world countries and draws the map as a single SVG path. It uses D3 v4 with the `d3.geoRobinson` projection and `d3.geoPath` to generate the path data, with the `d3-geo-projection` module providing the projection. The map is centered and scaled within an 800 by 500 pixel SVG canvas.

AI-generated description

A basic map in D3 using the Mercator projection.

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 basic world map in the Robinson projection, displaying geographic points as red paths and purple circles overlaid on the map. The code uses D3 v4 with the `d3.geoPath` API, along with the `d3.geoMercator` projection, despite the title referencing Robinson. It loads GeoJSON data from an external URL containing populated places, rendering both the map outline and the location points. Circle positions are calculated by projecting each feature’s coordinates through the projection function.

LLiddler

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

90% match

Loading thumbnail…

Robinson

This example displays a world map using the Robinson projection, with land masses in dark gray, country boundaries in white, and a graticule overlay. The map is rendered in SVG using D3 v3, employing `d3.geo.robinson` for the projection, `d3.geo.path` to draw geographic features, and `d3.geo.graticule` for the grid. Geographic data comes from a TopoJSON world file, processed with `topojson.feature` and `topojson.mesh` to separate land and boundaries.

Mmbostock

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

86% match

Loading thumbnail…

World Map

This visualization displays a world map using a Robinson projection. The map is rendered as a single SVG path, with countries derived from the world-atlas TopoJSON dataset. The code converts the TopoJSON data to GeoJSON using the topojson-client, then projects it with d3.geoRobinson and generates the path with d3.geoPath. The final SVG is sized at 960 by 500 pixels and appended directly to the page body.

RRamya19-hub

82% match

Loading thumbnail…

World Map

This world map visualization displays the countries of the world using a Robinson projection. The map is rendered as an SVG path, with the geographic data sourced from a `world-atlas` TopoJSON file. The code uses D3.js v5, along with the `topojson-client` library to convert TopoJSON to GeoJSON, and `d3.geoPath()` with `d3.geoRobinson()` to generate the projected path data.

OOluoch Odhiambo

79% match

Loading thumbnail…

Perspective Map (transformed projection)

This example demonstrates a distorted world map using a transformed Robinson projection, with adjustable parameters controlling scale, angle, and vertical compression. The map renders country polygons on a canvas, with colored dots highlighting the centroids of populous nations. Built with d3 v4 and d3-geo-projection, it composes a custom projection via `d3.geoTransform` and `d3.geoPath`, while a dat.GUI panel allows live tweaking of visual properties like fill color and translation. World geometry comes from a TopoJSON file of countries.

PPhilippe Rivière

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

78% match