100%

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

✓ Published0🌍 Public

Last edited Jul 28, 2016

Created on Jul 28, 2016

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.

AI-generated description

Working with spatial data

Example #12

Working with TopoJSON and d3.js projections for mapping geospatial data.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4122298'>U.S. Counties TopoJSON</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/4a449bee40e7b74108de89e303a2a284'>WWSD #12: d3 + TopoJSON</a>

gpl-3.0 Licensed

Similar vizzes

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

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

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

84% match

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

81% match

Loading thumbnail…

with trails

This example visualizes hiking trail paths overlaid on a geographic projection of the Washington, D.C. area. It uses a conic conformal projection with custom parallels and rotation, fitting the trails to a 960×500 SVG canvas via `projection.fitSize`. Trail data is loaded from a TopoJSON file and converted to GeoJSON using `topojson.feature`, then rendered as crimson, unfilled SVG paths with `d3.geoPath` and `d3.json` for asynchronous loading.

AAnaMal08

77% match

Loading thumbnail…

World Map using Mercator Projection

This example displays a world map using the Mercator projection, rendered as SVG paths with countries filled in white on a blue ocean background. It loads GeoJSON country boundaries from a gist and uses `d3.geoMercator` for projection, `d3.geoPath` to generate the paths, and `topojson.feature` to convert TopoJSON data. A sphere outline is drawn first, and country paths are appended dynamically from the fetched dataset.

Bbhargavarathod

76% match

Loading thumbnail…

Spherical Mercator

The example shows the spherical Mercator projection applied to a world map, displayed within a circular outline that represents the globe. The map renders landmasses in dark gray with white country boundaries, overlaying a graticule grid of meridians and parallels. Built with d3.geoMercator and d3.geoPath, it draws the sphere outline, graticule, and world geography via SVG paths. Geographic data comes from the world-atlas TopoJSON dataset, processed with topojson-client to extract land and country meshes.

Mmbostock

76% match

Loading thumbnail…

World Map with d3.js

This example renders a world map as an SVG using D3.js version 7. It applies a Mercator projection via `d3.geoMercator` and draws country boundaries with `d3.geoPath`, styling each path with a gray fill and dark stroke. The map loads GeoJSON country data from a remote GitHub repository using `d3.json`, and the visualization is contained within an HTML page that imports D3 from a CDN. The code demonstrates basic map projection and data binding in a simple, static geographic visualization.

UUVarshaReddy

76% match