Fork of Fork of Leaflet + D3 Map

100%

Fork of Fork of Leaflet + D3 Map

✓ Published1🌍 Public

Last edited Jul 28, 2025

Created on Jul 28, 2025

This visualization combines Leaflet and D3 to display geographic data on an interactive Esri World Imagery map. It uses Leaflet’s tile layer and SVG overlay, with D3’s geoPath and a custom geoTransform projection to render polygon and MultiLineString features from embedded GeoJSON data. The map shows hand-drawn lane boundaries and pincode areas, with polygons that respond to mouseover by changing color. The plot also includes a separate circles.json file containing coordinate points, though these are not referenced in the main HTML script.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of d3.js with leaflet.js

This example overlays red SVG circles on an OpenStreetMap tile layer using D3.js and Leaflet.js. It loads geographic coordinates from circles.json and renders each point as a fixed-radius circle positioned via Leaflet’s `latLngToLayerPoint` projection, which updates on map view changes using the `viewreset` event. The visualization demonstrates how to combine D3’s data-binding and SVG manipulation with Leaflet’s interactive map APIs for custom geographic overlays.

SSteve_Nashon

83% match

Loading thumbnail…

Fork of Leaflet + D3 Map

This map visualization overlays hand-drawn vector features of Worli, Mumbai onto an Esri World Imagery basemap using Leaflet and D3. The code loads GeoJSON data from `lines.js` and `polygon.js` containing road lane polylines and pincode area polygons, rendering them as SVG paths. Geographic coordinates are converted to screen space via `d3.geoTransform` and Leaflet's `map.latLngToLayerPoint` method. Polygons update on zoom events through a zoom handler that recomputes their path geometry.

SSteve_Nashon

83% match

Loading thumbnail…

Fork of Fork of Leaflet + D3 Map

This example combines Leaflet and D3 to render a map of Worli, Mumbai, with hand-drawn streets and postal-code polygons overlaid on Esri World Imagery. Using D3 v6, it projects geographic coordinates with `d3.geoTransform` and `d3.geoPath` into SVG paths that are placed on Leaflet’s overlay pane, updating on map zoom events. Polygons and multi-linestrings from local GeoJSON files (polygon.js, lines.js) highlight lanes and district boundaries, while hover interactions fill shapes with red.

SSnehaAshok1323

83% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It uses D3.js v5’s `geoPath` and `geoNaturalEarth1` projection to generate geographic outlines from the world-atlas TopoJSON dataset. The code also loads the TopoJSON library to extract country features, then appends each path to the SVG container. The visualization demonstrates a straightforward choropleth-style map without interactivity, emphasizing the projection and vector rendering pipeline.

SSnapika

79% match

Loading thumbnail…

Fork of Let's make a map with D3 with popup.js!

This visualization displays a world map with color-coded countries, rendering geographic boundaries as SVG paths. It uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw the map, with country data loaded from a CSV containing IDs and values. A tooltip appears on mouseover, showing the country code and its associated value. The example uses the `topojson` library’s `feature` function to convert TopoJSON to GeoJSON, and D3’s `select`, `geoPath`, and `csv` APIs for DOM selection, path generation, and data parsing.

991geethikaalwis

79% match

Loading thumbnail…

Leaflet + D3 Map

This example combines Leaflet and D3 to render an interactive map of the Worli neighborhood in Mumbai, India. It displays hand-drawn lane polygons and street lines as SVG paths overlaid on an OpenStreetMap tile layer. D3’s `geoTransform` and `geoPath` project geographic coordinates into Leaflet’s coordinate system, with paths updating on map zoom events. Users can hover over area polygons, which change color to highlight individual regions, while the underlying geometric data is loaded from JavaScript objects.

JJasonYeong0821

79% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This fork of "Let's make a map with D3.js!" displays a world map of countries, filled in light green over a blue sphere, using a natural Earth projection. The visualization loads geographic data from the world-atlas package and renders the sphere and country boundaries as SVG paths with D3’s geoPath. It uses the d3 and topojson libraries, specifically `d3.geoNaturalEarth1` and `d3.geoPath`, to project and draw the map.

JJyothicherukuri

79% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This visualization renders a world map using a Natural Earth projection, displaying countries as light green polygons against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset, which is converted to GeoJSON using the `feature` function from topojson. The map is drawn as SVG paths via `d3.geoPath`, with the projection defined by `d3.geoNaturalEarth1`. The code first draws the sphere outline, then appends country paths with a stroke for boundaries, all within a static 960x500 viewport.

Bbhanuteja1807@gmail.com

78% match