Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Derive India map - Open street

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

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.

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
94% 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
92% 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
92% 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
89% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map shows crime rates for Indian states and union territories, with a yellow-to-red gradient indicating rate severity per 100,000 people. Hovering over a region reveals the state name, crime rate, and capital city in an information panel and tooltip. The visualization combines Leaflet.js for map rendering with OpenStreetMap tiles, while D3.js (v6) uses a `geoTransform` projection to overlay state boundaries from a GeoJSON file onto the map. Crime data is loaded from a CSV file and mapped to a sequential color scale using `d3.scaleSequential`.

Sskmriyaz0786@gmail.com
89% match
Loading thumbnail…

Derive India map - Open street

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.

NNita
88% 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
84% match
Loading thumbnail…

Fork of india map

This interactive visualization displays India’s administrative divisions, using distinct colors for districts and dark green highlighting on hover. It also marks state boundaries with a black stroke. The map is rendered as SVG using `d3.geoPath` with a Mercator projection, and supports zoom and pan via `d3.zoom`. District and state boundaries come from TopoJSON files, with district names and states shown as tooltips. The code also loads a CSV of Indian cities, though city markers are not rendered.

Bbindhureddy98
79% match