Map of India with D3

100%

Map of India with D3 - chloropleth map

✓ Published1🌍 Public

Last edited Apr 5, 2022

Created on Apr 4, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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

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

92% match

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

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

91% match

Loading thumbnail…

Fork of Map of India with D3 - chloropleth map

This example shows a choropleth map of India’s states, with each state filled by a categorical color scale and labeled by name at its centroid. The visualization uses D3 v5’s `geoMercator` projection, `geoPath`, and `scaleOrdinal` to render the SVG paths. TopoJSON data from a remote GitHub source is parsed with `feature` to draw state boundaries, while state names are positioned using `pathGenerator.centroid`. The map omits the first feature from the dataset, likely removing a national outline or disputed region.

NNita

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

90% match

Loading thumbnail…

Map of India with D3 - chloropleth map-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.

NNita

90% match