Robinson

100%

✓ Published0🌍 Public

Last edited Jul 2, 2017

Created on May 8, 2017

The Robinson projection renders world landmasses and country boundaries as SVG paths, with a graticule and sphere outline layered beneath. The visualization uses the `d3.geo.robinson` projection from the geo.projection plugin, styled via CSS classes for land, boundary, and graticule elements. It loads world-50m TopoJSON data and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`, then draws the paths with `d3.geo.path`. The map is centered and scaled to a 960×500 canvas, demonstrating the projection’s equal-area-like appearance.

AI-generated description

The Robinson projection is available as d3.geo.robinson in the geo.projection plugin.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3710566'>Robinson</a>

gpl-3.0 Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Basic D3 map (Robinson) d3v4

This example displays a world map using the Robinson projection, rendered as a single SVG path. The code loads GeoJSON data from an external URL and projects it with `d3.geoRobinson`, a projection from the `d3-geo-projection` plugin. It uses `d3.geoPath` to convert the projected geometry into SVG path data, with the map centered via `projection.translate`. The visualization is minimal, showing only landmasses without additional styling or interactivity.

AAlan McConchie

86% match

Loading thumbnail…

Basic D3 map (Robinson) d3v4

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.

LLiddler

86% match

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

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

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

81% 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…

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

77% match