India Map

100%

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

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.

AI-generated description

Map Of India

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

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

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

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

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

91% match

Loading thumbnail…

Fork of India Map

This example displays a choropleth map of India’s states, colored with d3.scaleOrdinal and schemeCategory10, with each state labeled by name. It uses d3.geoMercator projection, d3.geoPath, and topojson.feature to render state boundaries from a TopoJSON file of India’s administrative regions. The first feature is removed with shift(), and state names are placed at each polygon’s centroid. SVG paths and text elements are generated via data joins, with titles appended for tooltip support.

RRupeshGandham

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

91% match

Loading thumbnail…

India Map

This example displays a choropleth map of Indian states, colored with a categorical color scale and labeled with state names positioned at each region's centroid. It renders SVG paths using `d3.geoPath` with a `geoMercator` projection, and loads GeoJSON data via `d3.json` from a public gist. State boundaries are styled with orange strokes, and tooltips appear on hover via appended `title` elements. The visualization uses `scaleOrdinal` with `schemeCategory10` to assign colors to each state based on its `NAME_1` property.

Aachyutanandmishra17@gmail.com

91% match