100%

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

✓ Published0🌍 Public

Last edited Jun 26, 2016

Created on Jun 26, 2016

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.

AI-generated description

Working with spatial data

Example #1

Getting started with Leaflet

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/5c780d3df8da2ecceebf117a9ac7be38'>WWSD #1: Leaflet starter</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/f402c38b18da93c8d1fe095330f0c75c'>WWSD #1: Leaflet starter</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/926c2b472e180b69281f1bd7a8cc6009'>WWSD #1: Leaflet starter</a>

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

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

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

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

77% match

Loading thumbnail…

World Map

This example displays an interactive world map using Leaflet, with countries rendered as yellow polygons with black borders. The map initializes with a global view centered on [0,0] at zoom level 2. It fetches GeoJSON country boundaries from a GitHub-hosted world dataset and adds them to the map using Leaflet’s `L.geoJSON` method. The page also imports D3.js and local ES6 modules, though their primary role is demonstrated separately in the accompanying code structure.

UUVarshaReddy

72% match

Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry

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

71% match

Loading thumbnail…

GeoJSON Experiments

This example displays geographic data on an interactive Mapbox map, using the Mapbox.js library and a full-screen map div. It fetches GeoJSON data from a CouchDB view via a jQuery `$.getJSON` call, then loads the returned feature collection into the map’s `featureLayer` with `setGeoJSON`. The map is initialized with `L.mapbox.map` and centered on coordinates (10.1, 125.6) at zoom level 5, showing how dynamic GeoJSON can be rendered on a tiled basemap.

CCliffordAnderson

71% match