100%

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

✓ Published0🌍 Public

Last edited Jun 2, 2018

Created on Sep 10, 2017

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.

AI-generated description

Working with spatial data

Example #7

Simple mouse interaction with d3.js

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 #5: d3 + TopoJSON</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/d355270ee9e979333040e1a46ff03fc6'>WWSD #7: d3 mouse interaction</a>

gpl-3.0 Licensed

Similar vizzes

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

94% match

Loading thumbnail…

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

A choropleth of world countries and populated places, rendered as SVG paths and circles, responds to mouse interaction. Hovering a circle highlights it and shifts all other circles ten pixels along the x-axis while recoloring them blue, demonstrating dynamic spatial selection. The visualization loads GeoJSON data from local files and uses `d3.geo.winkel3()` for projection, `d3.geo.path` for country outlines, and manual coordinate projection for circle placement. Built with d3.v3 and TopoJSON, it shows basic event handling with `mouseover` and `mouseout`.

Aalidep

91% match

Loading thumbnail…

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

A mouseover on any city circle nudges all other city circles outward by a fixed offset, then returns them to their original positions on mouseout. The example renders world country boundaries as SVG paths and populated places as scaled circles using a Winkel III projection, with `d3.geo.path` handling geographic coordinates. It uses D3 v3 transitions to animate the circle positions and loads GeoJSON data for countries and populated places from remote URLs.

AAlan McConchie

90% match

Loading thumbnail…

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

This example displays a world map rendered as a single SVG path using a Mercator projection. The code loads GeoJSON data from a remote URL and passes it through d3.geoPath with a d3.geoMercator projection. The projection is scaled and translated to center the map, while the SVG fills the viewport. It demonstrates the basic workflow of projecting geospatial data with d3.v4.

AAlan McConchie

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

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

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

85% match