100%

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

✓ Published0🌍 Public

Last edited Mar 25, 2018

Created on Mar 25, 2018

This example displays a world map rendered as a single SVG path using a Mercator projection. The code loads GeoJSON data from a remote URL and passes it through d3.geoPath with a d3.geoMercator projection. The projection is scaled and translated to center the map, while the SVG fills the viewport. It demonstrates the basic workflow of projecting geospatial data with d3.v4.

AI-generated description

Working with spatial data

Example #6

Working with d3.js projections for mapping geospatial data

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>

mit Licensed

Similar vizzes

Loading thumbnail…

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

This example shows a world map rendered in grayscale as a single filled path, using a Mercator projection to display geographic boundaries. It loads GeoJSON data of world countries from an external URL and draws them with D3.js version 3.5.5. The code uses `d3.geo.mercator()` to define the projection, `d3.geo.path()` to generate the SVG path data, and appends the result as one `path` element. The map fills the entire viewport, with the projection scaled and translated to center on a 960×500 canvas.

KKristinHenry

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

90% match

Loading thumbnail…

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

This example demonstrates how to render geospatial data on a map using D3.js projections. The visualization displays world country boundaries loaded from a GeoJSON file, with the map centered using an azimuthal equidistant projection. The code uses d3.geo.path() to project and draw the geographic features onto an SVG canvas. It defines both a Mercator and an azimuthal equidistant projection, ultimately selecting the latter with a clip angle and rotation to create a polar view. The data comes from an external GeoJSON source hosted online.

KKristinHenry

90% match

Loading thumbnail…

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

This example demonstrates how to work with geospatial data using d3.js projections, visualizing trail points from a GeoJSON file on a Mercator projection. The code uses the d3.geo.path() function with a d3.geo.mercator() projection to render SVG paths, and employs d3.json() to load the data. The map displays points with a transform applied, while path elements are styled with a gray fill and white stroke that turn red on hover.

SSwampGuzzler

89% match

Loading thumbnail…

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

A world map displays countries and populated places from GeoJSON data, with hover interactions that highlight shapes. The visualization uses d3.geoPath with a d3.geoMercator projection to render country boundaries as SVG paths, while circles represent cities positioned via the projection. Mouseover and mouseout events toggle an "active" class, turning countries pink and cities blue. The code loads two GeoJSON files from external URLs and applies d3.v4 selections with .on() event handlers for the interaction.

AAlan McConchie

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

87% match

Loading thumbnail…

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

This example demonstrates how to map geospatial data using d3.js projections. It renders a world map with a custom cylindrical projection and highlights two points with red circles, including one at San Francisco’s coordinates. The code uses `d3.geo.projection`, `d3.geo.path`, and `d3.geo.mercator`, along with TopoJSON to load world-110m GeoJSON data. The map and points are drawn as SVG elements, with the projection scale and translation set explicitly.

KKristinHenry

86% match

Loading thumbnail…

Basic D3 map (Mercator)

A single SVG path renders a world map using the Mercator projection, with landmasses drawn from a remote GeoJSON file. The map fills the viewport, centered at the default origin. The code uses D3 v3’s `d3.geo.mercator()` and `d3.geo.path()` to project and draw the geometry, loading the data via `d3.json` from the `world-110m.geojson` source. No interaction or additional styling is applied beyond the full-screen SVG container.

AAlan McConchie

85% match