Gist 34bad0b124f4effdf99d5555cb3222d8

100%

Gist 34bad0b124f4effdf99d5555cb3222d8

✓ Published0🌍 Public

Last edited Apr 28, 2017

Created on Apr 27, 2017

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 9bd5ca69fc039cff50383b3a3459858b

This example shows how to render a spatial distribution of data points on a map using D3.js. It uses `d3.geoPath` to draw geographic boundaries and `d3.forceSimulation` to position overlapping points, while Canvas `getImageData` is used to read pixel data for collision detection. The visualization reads from a PGP-encrypted text file, suggesting the underlying dataset is not directly accessible. The code relies on D3’s selection and transition APIs to animate point movements, and it appears to use a projection to convert latitude and longitude coordinates into screen positions. The result is an interactive scatterplot overlaid on a map, with points dynamically adjusting to avoid overlap.

CCliffordAnderson

83% match

Loading thumbnail…

Gist fdfc88707da3d0b9b203

This example shows the clustering and connection of points on a map based on their geographic proximity and shared attributes. It uses a force-directed layout via `d3.forceSimulation` to position nodes while links are drawn as curved paths, with a base projection provided by `d3.geoPath` and `d3.geoMercator`. The data is loaded from an external CSV file, and the visualization updates dynamically as the simulation runs, highlighting node neighborhoods and their interconnections.

MMSCAU

78% match

Loading thumbnail…

Gist ae4b814c65267e5d9299fbb279a83176

This visualization combines a geographical forecast with spatial clustering and outlier detection, showing how raw location data is grouped and analyzed on a map. It uses a custom D3 force simulation to arrange clusters, while the geographic backdrop is rendered through `d3.geoPath` with map projections. The clustering logic relies on KMeans and spatial clustering algorithms from an external library, and outlier detection flags anomalous points via canvas `getImageData` pixel analysis. The code integrates Three.js for enhanced 3D terrain rendering, with transitions driven by `transition.attrTween` to animate cluster movements over time. The data source appears to be simulated forecast points, processed through the clustering pipeline.

HHugoberry

78% match

Loading thumbnail…

Gist 54a4da81bb77308303fc5537ac587fe5

This example creates a minimal map visualization using a single GeoJSON Point feature representing the Dinagat Islands, positioned at coordinates (-86.8098, 36.1442). It first renders the point’s geometry using `d3.geoPath` and a standard geographic projection, then applies `d3.forceSimulation` to animate the point’s position, demonstrating how a fixed geographic coordinate can be displaced by a force-directed layout. The code uses both Canvas and SVG elements, with the simulation updating the point’s screen location each tick while the underlying projection remains static.

CCliffordAnderson

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

77% match

Loading thumbnail…

Gist 5967514

This example displays a map of U.S. counties using a TopoJSON shapefile from the U.S. Census Bureau, rendered as gray-filled paths with white borders that turn red on hover. It shows the geographic boundaries of counties and responds to clicks, though the click behavior only logs to the console. The visualization uses D3 v3’s `d3.geo.path()` to project and draw the SVG paths, and TopoJSON’s `topojson.feature` to extract GeoJSON features from the topology. The map is static, with no zoom or pan, and the hover effect is the only interactive styling.

CCaged

77% match

Loading thumbnail…

Gist 5a40403d5dadf54225cee084d8fb8b15

This example visualizes geospatial relationships using a D3.js force-directed graph overlaid on a map. The notebook configures an interactive simulation where interconnected nodes are positioned based on proximity and links, while geographic boundaries serve as a contextual base layer. It employs `d3.forceSimulation` for the physics engine, `d3.geoPath` to render map regions, and Jupyter’s inline display for rendering. The data appears to be custom-generated, with node connections defined programmatically in the notebook rather than sourced from an external file. The visualization emphasizes network topology against a spatial backdrop, allowing users to explore clustering patterns and geographic anchor points.

MMistyBlunch

77% match

Loading thumbnail…

Gist f7dc00e0350f215e21d1d7b3f9ee6aca

This example presents an interactive geographic visualization of a world map, with animated flight paths connecting major cities. It shows a network of arcing routes overlaid on a dark, stylized globe. The visualization uses the D3.js library, specifically calling `d3.geoPath` to render the map’s landmasses and `d3.forceSimulation` to manage the physics of the flight arcs, making them appear as if they are in motion. The routes are likely generated from a small set of hardcoded city coordinate pairs. The rendering approach combines a simple geographic projection with dynamic path interpolation for the animated trajectory effects.

LLuisSevillano

76% match