Fork of Fork of Derive India map - Open street

100%

Fork of Fork of Derive India map - Open street

✓ Published0🌍 Public

Last edited Jul 28, 2025

Created on Jul 28, 2025

Forked from 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.

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

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

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

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

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

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

83% match

Loading thumbnail…

Fork of Fork of HTML Starter

This interactive map displays the states of India with hover effects that highlight each state and reveal its name in a tooltip. The visualization is built with React and D3.js, using the `d3.geoMercator` projection and `d3.geoPath` to render GeoJSON state boundaries as SVG paths. State polygons are colored a muted teal and brighten on mouseover. The GeoJSON data is loaded from an external GitHub repository, and the tooltip is implemented as an HTML overlay positioned via mouse event coordinates.

NNita

83% match

Loading thumbnail…

Fork of Fork of Fork of Map of India - States and Union Territories

This interactive map of India displays states and union territories as color-coded, clickable SVG paths, using a Mercator projection created with `d3.geoMercator` and rendered through `d3.geoPath`. Built with React and D3.js, it loads GeoJSON data from a GitHub repository, enabling users to hover for tooltips, click for state details, and zoom or pan using `d3.zoom`. The map distinguishes regions by color and includes animated label resizing during zoom interactions.

NNita

82% match