Fork of Map of India-Part I

100%

Fork of Map of India-Part I

✓ Published1🌍 Public

Last edited Oct 10, 2025

Created on Oct 9, 2025

This example displays a map of Maharashtra, India, with eight highlighted districts in blue. Built with D3.js and TopoJSON, it loads district boundaries from a GitHub-hosted dataset and renders them as SVG paths using a Mercator projection. District polygons are white with black outlines, and hovering increases the stroke width. The map is fitted to the browser window using `d3.geoPath` and `d3.geoMercator`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Map of India-Part I

This example displays a choropleth-style map of Maharashtra, India, with eight districts highlighted in blue, including Mumbai, Pune, and Nagpur, while the rest remain white. Built with D3.js and TopoJSON, it loads district boundaries from a remote GeoJSON source and uses a `d3.geoMercator` projection with `d3.geoPath` to render the SVG paths. District names are normalized to match predefined city labels before applying the fill color.

Sshamanth@wimate.in

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

84% match

Loading thumbnail…

Fork of India Map

This visualization displays a choropleth map of India with its districts and states, rendered using the Mercator projection and geographic path generation. It overlays district boundaries colored by state using `d3.scaleOrdinal` with `schemeCategory10`, while state borders are stroked in black, and hovering highlights districts in dark blue. The map supports interactive zooming via `d3.zoom`, with district and state data loaded from GeoJSON and TopoJSON sources, and uses SVG paths for rendering.

GGogineni44

84% match

Loading thumbnail…

Fork of Fork of india map

This visualization displays India’s states and districts as vector paths overlaid on a Mercator projection. The map distinguishes administrative levels with red state boundaries and brown district borders, while district fills use an ordinal color scale. It loads two TopoJSON datasets (state and district boundaries) and renders them as SVG paths using `d3.geoPath` and `d3.geoMercator`. The implementation also applies `d3.zoom` for interactive pan and zoom, with hover effects that highlight districts. The map is built with React and uses the `topojson` library to process the geographic features.

DDivyaVellanki

84% match

Loading thumbnail…

Fork of Fork of Fork of india map

This visualization displays a zoomable map of India with all its districts and states, rendered as SVG paths. The map uses categorical colors for districts and overlays state boundaries with red strokes. Built with D3 v5, it employs `d3.geoMercator` for projection and `d3.geoPath` to generate paths from TopoJSON data. The map supports interactive zooming via `d3.zoom`, and hovering over districts changes their fill to silver, while tooltips show district and state names from the loaded data.

DDivyaVellanki

84% match

Loading thumbnail…

Fork of india map

This choropleth map displays India’s districts and states, colored by district name via a categorical scale. It uses d3.geoPath and d3.geoMercator to project TopoJSON boundaries from GitHub sources, with district and state paths rendered as SVG. Pan and zoom interactions are enabled using d3.zoom, applying a transform to the grouped geometry.

PPujitha14challagulla

84% match

Loading thumbnail…

Fork of Fork of Fork of india map

This visualization shows a choropleth map of India with district-level boundaries colored by state and overlaid with state outlines, enabling pan and zoom interaction. The map renders districts using `d3.geoPath` with a `geoMercator` projection, while state and district data come from external TopoJSON files. Hovering a district displays its name and state in a tooltip via appended `title` elements, and the view transforms with `d3.zoom`. District colors derive from `scaleOrdinal` with `schemeCategory10`.

Ssaiteja0725

84% match

Loading thumbnail…

Fork of Fork of Fork of Map of India with D3 - chloropleth map

This example shows a choropleth map of Indian districts, with each district filled by a categorical color based on its state (NAME_1) and labeled with the state name at the district’s centroid. It uses d3.json to load a TopoJSON file from the datameet repository, then converts it to GeoJSON with topojson.feature. The map is projected using d3.geoMercator and rendered as SVG paths via d3.geoPath, with a d3.scaleOrdinal and d3.schemeCategory10 assigning fill colors.

KKRITIKA RAI DWIVEDI

83% match