Skip to main content
SimilarExport ZIP
100%

Derive India map - Open street

✓ Published2🌍 Public
NNita
Last edited Jul 28, 2025
Created on Jul 28, 2025

This example combines Leaflet with D3 to create an interactive map of India using OpenStreetMap tiles. Following the D3 geoPath projection, it renders state boundaries from a GeoJSON source, with states highlighted in red on mouseover while the map pans and zooms. When the primary data fails to load, the code falls back to displaying hand-drawn street segments in Mumbai, using the same Leaflet overlay and D3 geoTransform projection to keep vector paths synchronized with the tile layer during zoom events.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Derive India map - Open street

This interactive map of India combines Leaflet.js with a D3.js SVG overlay to display state boundaries and street-level fallback data. Users can hover over states to reveal population, area, capital, and description details in a side panel, or click to zoom into regions. The application supports multiple tile styles including OpenStreetMap, terrain, and satellite views. D3’s geoTransform projection and geoPath render GeoJSON state data from the geohacker/india repository, while the Leaflet map API handles panning, zooming, and view resets.

NNita
90% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map of India overlays D3-rendered state boundaries onto a Leaflet map, displaying crime statistics from a local CSV when hovering over regions. Built with D3 v6 and Leaflet 1.7.1, it uses d3.geoPath with a custom projection that syncs geographic coordinates to Leaflet’s tile layer. The application includes state metadata, a fallback street network for Mumbai, and supports switching between OpenStreetMap, terrain, and satellite basemaps.

NNita
88% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map overlays Indian state boundaries from a GeoJSON file onto an OpenStreetMap tile layer using Leaflet and D3 v6. The visualization renders each state as a D3-generated SVG path through `d3.geoTransform` and `d3.geoPath`, with mouseover interactions highlighting states and displaying a tooltip with the state name. The map updates state paths dynamically on zoom or view reset using Leaflet’s `zoomend` and `viewreset` events.

NNita
86% 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 Fork of Derive India map - Open street

An interactive choropleth map visualizes crime rates per 100,000 population across Indian states and Union Territories, with hover tooltips, click-to-select, search filtering, and union territory toggling. Built with D3.js v7 for data processing and SVG rendering, it uses Leaflet for the base map, d3.geoPath for shape projection, and a d3.scaleSequential color scale. Crime data comes from a local CSV file, while state boundaries load from a GeoJSON URL.

NNita
79% match
Loading thumbnail…

Fork of Derive India map - Open street

This interactive choropleth map displays crime rates across Indian states and union territories, with a color scale from yellow to red and a legend showing rates per 100,000 population. Hovering over a state reveals its specific crime rate in an information panel. The visualization combines D3.js (v6) for data parsing and geoPath rendering with Leaflet.js for map interaction and OpenStreetMap tile layers. State boundaries come from external GeoJSON data, while crime statistics are loaded from a local CSV file.

NNita
79% match
Loading thumbnail…

MapmyIndia Map Example

This example integrates MapmyIndia and D3 to render an interactive map centered on Delhi, India. It loads a vector tile layer using the MapmyIndia API and initializes a map object to display multiple markers at predefined coordinates. The code also demonstrates combining MapmyIndia with D3 by appending a red SVG circle overlay onto the map container, although the circle's coordinate system is not aligned with geographic space. The map supports zoom controls and hybrid mode for a mixed basemap experience.

SSriyaI
78% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map visualizes clean energy adoption rates across Indian states and union territories, using a green sequential color scale where darker shades indicate higher percentages. Users hover over any region to view its specific adoption rate in a side panel and tooltip. Built with D3.js v6 and Leaflet 1.7.1, the visualization layers SVG paths generated via d3.geoPath with a custom geographic projection on top of an OpenStreetMap tile layer. State boundaries come from an external GeoJSON file, while the adoption data is loaded from a local CSV.

AAmrit Adhikari
77% match