Fork of Fork of Map of India-Part I

100%

Fork of Fork of Map of India-Part I

✓ Published0🌍 Public

Last edited Oct 10, 2025

Created on Oct 10, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Map of India-Part I

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`.

Mmanthan.bapat@gmail.com

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

85% match

Loading thumbnail…

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

This choropleth map displays India’s districts, colored by state (NAME_1 property) using a categorical color scale, with district names overlaid at each shape’s centroid. It uses d3.geoMercator for projection and d3.geoPath to render SVG paths from TopoJSON data sourced from the Datameet Indian district boundaries dataset. The code applies a scaleOrdinal with schemeCategory10 for fills, appends title tooltips, and labels each feature via pathGenerator.centroid, while CSS sets stroke styling for boundaries.

NNita

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

83% match

Loading thumbnail…

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

A choropleth map of India displays each state as a colored SVG path, with state names labeled at path centroids. The visualization uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render TopoJSON data from a remote GitHub repository. State colors are assigned via `d3.scaleOrdinal` with `schemeCategory10`, while `topojson.feature` extracts the geographic shapes. The code excludes the first feature, presumably to remove a national boundary, and appends hover-less, static text labels for each state.

Nnagamaheswar

83% match

Loading thumbnail…

Fork of Fork of Fork of Fork of india map

This visualization displays a choropleth map of India, rendering both state boundaries and district-level subdivisions. Districts are filled with categorical colors using a `d3.scaleOrdinal` with `schemeCategory10`, and hovering over a district turns it black. The map uses a `d3.geoMercator` projection and `d3.geoPath` to draw the geometry. It is built with React and D3, pulling TopoJSON data from GitHub sources for state and district boundaries. Pan and zoom interactions are enabled via `d3.zoom`.

Ssaiteja0725

83% match