Skip to main content
SimilarExport ZIP
100%

GeoVisualization - Choropleth map of India

✓ Published0🌍 Public
AAlark Joshi
Last edited Apr 5, 2024
Created on Apr 5, 2024

This example displays a choropleth map of India, rendering its states and major places as an interactive SVG graphic. It uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to draw TopoJSON features representing state polygons and city points. State subdivisions are filled with a categorical `d3.scaleOrdinal` color scheme at reduced opacity, while labels for each state and place are positioned using `path.centroid` and the projection of coordinates. The map automatically centers and scales to fit the viewport using geographic bounds. Data comes from a remote TopoJSON file, and the code updates an earlier D3 v4 implementation to D3 v7.

AI-generated description

A choropleth map of India that has been updated from D3 v4 to D3 v7. The original code was developed by Harry Stevens and the block can be found at https://bl.ocks.org/HarryStevens/c9cf86eba753ba8650fb466e37d538d2

MIT Licensed

Similar vizzes

Loading thumbnail…

IndiaMap

This example renders a choropleth map of Indian states, with each state filled by a categorical color and labeled with its name. It uses D3 v5’s `geoMercator` projection and `geoPath` to convert TopoJSON geometries into SVG paths, while `scaleOrdinal` and `schemeCategory10` assign colors. State boundaries are emphasized with white strokes, and hovering turns a state white. Data comes from a remote TopoJSON file, and the map is displayed within a fixed-width SVG on a teal gradient background.

VVamsi Krishna
89% match
Loading thumbnail…

IndiaMap

This example renders a choropleth-style map of India using D3 v5 and TopoJSON, with each state filled by a categorical color from `d3.scaleOrdinal` and labeled via `d3.geoPath` centroids. The map is projected with `d3.geoMercator` and drawn as SVG paths from a hosted GeoJSON-like TopoJSON file, with hover effects defined in CSS. It uses `topojson.feature` to extract state boundaries and appends hover tooltips via `<title>` elements, demonstrating basic geographic data binding and interaction.

Aabdhaseeeb
89% match
Loading thumbnail…

Map of India with D3 - chloropleth map

This choropleth map of India colors each state using D3’s `scaleOrdinal` and `schemeCategory10`, with state names placed at the centroid of each polygon via `geoPath.centroid`. It uses the `geoMercator` projection, `topojson.feature` to parse India’s states from a TopoJSON file, and renders SVG paths with black strokes between states. The map loads data from a remote TopoJSON source and appends interactive tooltips using SVG `<title>` elements.

RRavi Teja Bonam
88% match
Loading thumbnail…

Map of India with D3

This example displays a choropleth map of India’s states, with each state filled by a categorical color and labeled with its name at the centroid. It loads TopoJSON data from a GitHub repository and renders it as SVG paths using `d3.geoPath` with a `geoMercator` projection. State names are drawn as SVG text elements positioned via `pathGenerator.centroid`. The code also applies `scaleOrdinal` with `schemeCategory10` for coloring and relies on the `topojson` library to convert the TopoJSON features.

NNita
88% match
Loading thumbnail…

India Map with d3.js

This example renders a choropleth-style map of India using the D3.js library. It loads GeoJSON data from a remote TopoJSON repository and projects it with a Mercator projection, using `d3.geoMercator` and `d3.geoPath`. The SVG output displays each state as a path with gray fill and dark stroke, sized to an 800x600 viewport.

VVenkat-Sumith-Thota
88% match
Loading thumbnail…

India Map

This example displays a choropleth map of India’s states, with each state filled by a distinct color from d3’s `scaleOrdinal` and `schemeCategory10`. Using topojson data loaded from a remote GitHub repository, the code projects the geometry with `d3.geoMercator` and renders it as SVG paths via `d3.geoPath`. State names are positioned at each polygon’s centroid, while hover effects and a light pink stroke are defined in the accompanying CSS. The visualization relies on the D3 v5 library and topojson for geographic feature extraction.

NNithish Kumar
88% match
Loading thumbnail…

India Map

This example displays an interactive choropleth map of India, with districts and states rendered as colored SVG paths that respond to zooming and hovering. It uses D3’s `geoMercator` projection, `geoPath` for drawing geographic features, and `topojson.feature` to extract polygon data from TopoJSON files. The map also applies `d3.scaleOrdinal` with `schemeCategory10` to color districts, and `d3.zoom` enables pan and zoom. State and district names appear in tooltips via appended text elements.

UUmarani Vemula
88% match
Loading thumbnail…

Country Map

This example displays a choropleth map of India rendered as an SVG, with each state filled using a categorical color scale. The visualization uses D3’s `geoMercator` projection, `geoPath`, and `scaleOrdinal` to draw the country’s boundaries from a TopoJSON file hosted on GitHub. Title text appears above the map, and hovering over any state highlights it in red via CSS. The code relies on the D3 v5, TopoJSON, and d3-geo-projection libraries.

Vvaddepallinaveen
88% match