100%

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

✓ Published0🌍 Public

Last edited Mar 25, 2018

Created on Jun 4, 2017

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.

AI-generated description

Working with spatial data

Example #7

Simple mouse interaction with d3.js. Mouse over a city and it will nudge all the other cities out of the way.

NOTE: we made this on-the-fly in the Stamen dataviz workshop, so it's pretty rough!

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

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

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

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

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

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

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

80% match