100%

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

✓ Published0🌍 Public

Last edited Jun 26, 2016

Created on Jun 26, 2016

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.

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>

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

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

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

Similar vizzes

Loading thumbnail…

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

This example demonstrates how latitude and longitude coordinates from a world GeoJSON file are projected onto an SVG canvas using a custom cylindrical map projection, with red circles marking London and San Francisco. Built with D3.js version 3.5.5, the code uses `d3.geo.projection` to define the cylindrical transformation and `d3.geo.path` to render the world map from the 110m-resolution GeoJSON data. The `projection([0,52])` and `projection([-122.4194,37.7749])` calls place the two cities, while the commented-out alternative projections (Mercator and azimuthal equidistant) show the flexibility of the approach.

KKristinHenry

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

89% match

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

86% match

Loading thumbnail…

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

This example displays a world map using Leaflet with an OpenStreetMap tile layer, overlaid with country boundaries from a GeoJSON file. The visualization begins by initializing a Leaflet map centered on coordinates [30, 0] at zoom level 2. The code then loads geographic data from a static GeoJSON URL hosted on GitHub and adds it to the map via `L.geoJson()`. The integration uses Leaflet 0.7.7 alongside D3 3.5.5 for fetching the remote JSON data, demonstrating a straightforward workflow for combining interactive map tiles with custom spatial datasets.

KKristinHenry

80% match

Loading thumbnail…

Azimuthal Equidistant

This example demonstrates the azimuthal equidistant projection, a map projection that preserves accurate distances from a central point. The map is centered on San Francisco, with the world rendered using outlines and filled landmasses. The visualization uses D3’s `d3.geoAzimuthalEquidistant` projection and `d3.geoPath` to draw the sphere, graticule, and geographic features. Land and boundary data come from a world-atlas TopoJSON file, processed using the `topojson-client` library. The SVG output includes a graticule, a stroked sphere outline, and a white-filled sphere background.

Mmbostock

79% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in teal against a blue sphere backdrop using an equal-earth projection. It loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON with the `feature` function from Topojson, and projects it through `d3.geoPath` combined with the `geoEqualEarth` projection from d3-geo-projection. The visualization demonstrates a minimal, clean map-making workflow using D3 v5.

KKurt J Nilsen

79% match

Loading thumbnail…

Gist 075cee318faa9088bc16bd9eb985a9a5

This example shows a world map rendered from a TopoJSON file using a Mercator projection, with pan and zoom enabled for interactive exploration. The map is drawn as SVG paths via `d3.geoPath` and a `d3.geoMercator` projection, centered and scaled to display global geography. A `d3.zoom` handler updates the map’s transform and re-projects paths on each interaction. The code includes commented-out attempts to plot city coordinates from a CSV, but the visible implementation focuses solely on the country boundaries from the `world-110m2.json` data source.

AAlexanderDavidson

78% match

Loading thumbnail…

Let's make a Map with D3.js!

This example displays a world map rendered as SVG paths using D3.js. It loads world-atlas TopoJSON data via `d3.json`, converts it to GeoJSON with `topojson.feature`, and projects it using `d3.geoMercator`. The `d3.geoPath` generator sets the `d` attribute for each country path through a data join, producing a simplified 110m-resolution map.

CChristine Lanser

78% match