100%

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

✓ Published0🌍 Public

Last edited Mar 25, 2018

Created on Mar 25, 2018

This example demonstrates how to visualize earthquake data from the USGS live GeoJSON feed on an interactive Mapbox-gl map. It plots the past day's magnitude 2.5+ earthquakes as points, with each point positioned according to its geographic coordinates. The map is built using Mapbox-gl and D3, showing how to integrate external GeoJSON data with a web-mapping library. The visualization provides a real-time view of global seismic activity, with earthquakes displayed as markers across the world map.

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>

mit Licensed

Similar vizzes

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

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

79% match

Loading thumbnail…

Gist bb974dcf54acc39a81cb60d79bf0aa5c

This example plots earthquake epicenters as points on a map using GeoJSON features. It renders the geographic coordinates with `d3.geoPath` and a map projection, while each point is positioned via `d3.forceSimulation` to avoid overlapping labels. The visualization shows five recent seismic events, with the primary ID as magnitude and the secondary ID as a location description. The code uses D3’s force-directed layout to spread the point markers, and the map background likely comes from a geographic shapefile or topojson layer, making the data immediately readable by region.

JJn1532

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

77% match

Loading thumbnail…

Class #13 demo

This example displays earthquake data from the USGS live feed on a map of the United States, using d3.geoPath with a d3.geoAlbersUsa projection to render state boundaries and quake locations as SVG paths. It includes a draggable circle representing Washington DC, with tooltip and mouse-move coordinate readout, plus a magnitude-based legend with counts. Colors are assigned via a d3.scaleOrdinal and d3.schemeCategory10, while the map data comes from TopoJSON.

MMTClass

77% match

Loading thumbnail…

Class 5

This visualization displays earthquakes from the past week across a map of the United States, with points colored by magnitude and a legend showing the number of quakes in each magnitude range. It uses d3.geoPath with a d3.geoAlbersUsa projection to render TopoJSON state boundaries, while earthquake data arrives as GeoJSON from the USGS feed. The map includes a draggable orange circle, and mouse movement updates a readout of geographic coordinates using the inverse projection.

MMTClass

77% match

Loading thumbnail…

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

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.

Aaleishanelson

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

77% match