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 load and display GeoJSON polygon data on an interactive Mapbox-gl map. It fetches UK county boundaries from an external URL using d3.json, then adds them as a fill layer with a teal color and dark outline. The map initializes with Mapbox’s streets style, centered on the UK, and the code uses the Mapbox-gl API’s `addSource` and `addLayer` methods to render the spatial data. D3 v3 handles the data request, while Mapbox-gl manages the map rendering and interaction.

AI-generated description

Working with spatial data

Example #3

Getting started with Mapbox-gl

Adapted from the mapbox-gl example. Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/b81e02d752855d106f88a9c0e42e65a0'>WWSD #3: Getting started Mapbox-gl</a>

Similar vizzes

Loading thumbnail…

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

A choropleth map of UK counties, rendered with Mapbox GL, displays geographic boundaries filled in cyan with dark outlines. The example loads GeoJSON county data via `d3.json` and adds it as a Mapbox GL GeoJSON source, then applies a fill layer with specified paint properties. It adapts a mapbox-gl-js example and uses D3 v3 for data fetching alongside the Mapbox GL JavaScript API.

AAlan McConchie

91% match

Loading thumbnail…

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

This example uses Leaflet with D3 to render an interactive world map from GeoJSON country boundaries. The map displays population estimates using a threshold color scale, ranging from light yellow to dark green. Mouseover highlights country borders, while clicking zooms to fit the selected country’s bounds. The map uses OpenStreetMap tile layers and loads data from a remote GeoJSON file containing administrative country polygons.

Aaleishanelson

81% match

Loading thumbnail…

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

This example shows a world map rendered with Leaflet, displaying country boundaries from a GeoJSON file of Natural Earth data. The map uses OpenStreetMap tiles as the base layer. The code loads the GeoJSON with d3.json and applies basic styling—white fill with partial opacity and thin borders—to each country polygon via Leaflet’s `L.geoJson` style option. The visualization demonstrates a minimal setup for combining D3 data loading with Leaflet’s interactive mapping capabilities.

Aaleishanelson

80% match

Loading thumbnail…

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

This example displays a world map using Leaflet, with country boundaries rendered as interactive vector layers. It initializes a Leaflet map centered on the equator and adds an OpenStreetMap tile layer as the base. The code then loads GeoJSON data containing 50-meter-resolution country outlines from a hosted GitHub source and uses Leaflet’s `L.geoJson` API to draw them onto the map. D3.js handles the asynchronous JSON fetching, while Leaflet manages the map display and interaction.

Aaleishanelson

80% match

Loading thumbnail…

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

This example shows a basic Leaflet map of world countries loaded from a GeoJSON file, with each country rendered as a white, semi-transparent polygon. It demonstrates the first step of styling spatial data with Leaflet’s `L.geoJson` and a custom style function. The map uses an OpenStreetMap tile layer and a D3.js `d3.json` request to fetch the country boundaries. The code sets the map view to a global extent, applies a simple fill color and opacity, and adds the GeoJSON layer to the map, following the Leaflet choropleth guide.

AAlan McConchie

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

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

78% match

Loading thumbnail…

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

This example shows a world map with country boundaries and river centerlines rendered as dark gray vector layers over an OpenStreetMap tile base. It demonstrates how to combine Leaflet’s interactive map with D3’s `d3.json` to load GeoJSON data. The map initializes with a global view centered at [30, 0], and each dataset is added as a `L.geoJson` layer with a uniform fill and stroke weight. The code uses Leaflet 0.7.7 and D3 3.5.5, pulling from Natural Earth datasets hosted on GitHub.

Aannabsmylie

77% match