Skip to main content
SimilarExport ZIP
100%

Map of India with D3 - chloropleth map-APR 23, 2021

✓ Published2🌍 Public
NNita
Last edited Apr 23, 2021
Created on Apr 23, 2021

A choropleth map renders India’s districts as colored SVG paths, with each region labeled by its state name at the centroid. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to draw shapes from a TopoJSON dataset of district boundaries. `d3.scaleOrdinal` with `schemeCategory10` assigns fill colors, while district hover states and labels are added via appended `title` elements and `text` nodes. The code relies on the topojson client library to convert TopoJSON features into GeoJSON for rendering.

AI-generated description

The map of India - my country

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Map of India with D3 - chloropleth map-APR 23, 2021

This choropleth map of India colors district boundaries by state using a categorical color scale. The visualization renders district polygons as SVG paths and labels each with its state name at the polygon’s centroid. It uses d3.json to load district-level TopoJSON from a GitHub repository, topojson.feature to convert it to GeoJSON, and d3.geoMercator with d3.geoPath for projection and rendering. The code also applies d3.scaleOrdinal with schemeCategory10 for fills and sets stroke styling via CSS.

NNita
94% match
Loading thumbnail…

Fork of Map of India with D3 - chloropleth map-APR 23, 2021

This choropleth map of India colors each district by its state using a categorical color scale, with district labels positioned at their centroids. It loads district boundaries from a TopoJSON file and renders them as SVG paths via `d3.geoPath` with a Mercator projection, applying fill colors through `d3.scaleOrdinal` and `d3.schemeCategory10`. Tooltips show the state name for each district.

NNita
93% 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
90% 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
89% match
Loading thumbnail…

India Map made ith D3

This choropleth map visualizes India’s states using D3 v5, with each state filled by a categorical color scale based on its name. A Mercator projection, configured with custom translation and scaling, renders the TopoJSON geometry as SVG paths, while state labels are placed at each path’s centroid. The code uses `d3.json`, `d3.geoPath`, `topojson.feature`, and a `scaleOrdinal` with `schemeCategory10`, with data loaded from a remote GitHub TopoJSON file.

TTusar
89% 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
88% match
Loading thumbnail…

India map

A choropleth map of India displays districts and states, with district boundaries colored by state and hover states highlighting individual districts. The visualization uses D3.js version 5.16 and d3-geo-projection.v2 to project TopoJSON data for India’s states and districts from GitHub sources. Tooltips reveal district names and their parent states. The map employs the Mercator projection and includes zoom functionality via event handling.

Ddheeraj1509
87% match
Loading thumbnail…

India Map made with D3

This example shows a choropleth map of India’s states, each filled with a distinct color from a categorical scale and labeled with its name. Built with D3 v5, it loads TopoJSON state boundaries and renders them as SVG paths using a Mercator projection via `d3.geoPath` and `geoMercator`. State names are placed at each path’s centroid, while `d3.scaleOrdinal` and `schemeCategory10` assign colors.

TTusar
87% match