MM Basic D3 map (Robinson) d3v4

100%

MM Basic D3 map (Robinson) d3v4

✓ Published0🌍 Public

Last edited Sep 11, 2017

Created on Sep 10, 2017

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.

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

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

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

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

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

77% match

Loading thumbnail…

Untitled

This example shows a world map rendered as gray countries with white borders, overlaid with white circles marking populated places from Natural Earth data. Hovering over a country or city highlights it in pink or blue, respectively. The visualization uses D3 v3's `d3.geoMercator` projection and `d3.geoPath` to draw GeoJSON features from two remote sources: world-110m.geojson for countries and ne_50m_populated_places_simple.geojson for places. Circles are positioned via the projection’s coordinates and respond to mouseover and mouseout events.

JJumblii

77% match

Loading thumbnail…

d3v5 - Selective Projection Map

This example visualizes a world map with a dropdown menu to switch between over 40 different geospatial projections, including Miller, Mercator, and Robinson. The map is rendered as SVG using d3.geoPath, while the projection options are defined with d3-geo-projection methods like d3.geoMercator and d3.geoMiller. World coastlines come from a GeoJSON file, and a graticule and sphere outline are added to each view.

HHirosaji

77% match

Loading thumbnail…

Maps-Exemple

This example displays a choropleth map of world countries colored by population estimates, with hover highlighting and zoom/pan interaction. It uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render SVG paths from TopoJSON data loaded from the world-atlas package, while population values and country names come from a supplementary TSV file. A linear `d3.scaleLinear` maps population magnitudes to a red color ramp, and the `d3.zoom` behavior applies transforms to all country paths.

JJShellBach

76% match