Skip to main content
SimilarExport ZIP
100%

Fork of Fork of India Map: ICE-8

✓ Published0🌍 Public
KKinjal-Goyani
Last edited Oct 20, 2022
Created on Oct 20, 2022

This visualization displays a map of India with its states, each filled with a distinct categorical color and labeled with state names positioned at their centroids. It uses a Mercator projection configured with specific translation and scaling to focus the geographic region. The code loads TopoJSON state boundaries from a GitHub repository, then leverages d3’s `geoPath` projection generator to render the SVG paths, with `scaleOrdinal` and `schemeCategory10` for coloring. State names are drawn as SVG text elements at each polygon’s centroid.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a map of India, with each state rendered as a colored SVG path and labeled with its name. The map uses a spherical Mercator projection, achieved through `d3.geoMercator()` with custom translation and scaling. State boundaries are drawn with a black stroke, and each state’s fill color is assigned from a categorical color scale using `scaleOrdinal` and `schemeCategory10`. State names are positioned at each state’s centroid via `geoPath.centroid()`. The geographic data is loaded from a TopoJSON file containing India’s administrative divisions, processed with the `topojson` library’s `feature` function.

Tttummala17
96% match
Loading thumbnail…

Fork of Fork of India Map: ICE-8

This example visualizes a map of India with each state filled using a categorical color scale. It renders every state as an SVG path and labels each one with its name centered on the state's centroid. The code uses D3 v5 APIs including `geoMercator`, `geoPath`, `scaleOrdinal`, and `schemeCategory10`, along with TopoJSON's `feature` method. State boundary data comes from a remote GeoJSON file hosted on GitHub, and the map is drawn with thick black strokes between states.

GGalineeharika
95% match
Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, colored with a categorical scheme and labeled with state names at their geographic centroids. Using D3 v5, it loads TopoJSON data for India’s administrative boundaries, removes the first feature, and projects the geometry with `geoMercator`. Paths are generated via `d3.geoPath`, while text labels are positioned using `pathGenerator.centroid`. The SVG rendering includes hover titles and a color scale from `scaleOrdinal(schemeCategory10)`, with styling applied through CSS.

DDINESH SAI BOPPANA
95% match
Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, with each state filled by a color from the d3 schemeCategory10 scale and labeled with its name. It uses d3.geoMercator and d3.geoPath to project and render the TopoJSON data loaded from a GitHub repository, adding interactivity through SVG title elements. The map includes an adjustment that shifts the data array and custom projection settings to frame the country appropriately.

Aamiralitah
94% match
Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, each filled with a distinct categorical color from D3's `schemeCategory10` and labeled with its name at the centroid. The map uses a `geoMercator` projection from `d3.geoPath`, with state boundaries rendered as SVG paths and stroked black for separation. Data comes from a TopoJSON file of India’s administrative regions, processed via `topojson.feature`, and one feature is removed with `shift()`. Text labels are positioned using `pathGenerator.centroid()`.

RRahulChaitu999
94% match
Loading thumbnail…

Fork of Fork of India Map: ICE-8

This visualization renders a choropleth map of Indian states, using a Mercator projection to display each administrative region with a distinct color from the `d3.scaleOrdinal` categorical scheme. The code loads GeoJSON state boundaries via the `d3.json` function and generates SVG paths with `d3.geoPath`, also placing state name labels at each polygon's centroid. The map is styled with a black stroke between states and is built using D3 v5.

JJustin Roberts
94% match
Loading thumbnail…

Fork of ICE 08 11540905 India Map

This visualization displays a choropleth map of Indian states, with each state filled by a distinct color from a categorical scale and labeled with its name. The map uses a Mercator projection customized through translation and scaling to center on India. Built with React and D3 v5, the code loads TopoJSON data representing India’s administrative regions, converts it to GeoJSON using `feature`, and renders paths via `d3.geoPath`. State names are positioned using `pathGenerator.centroid`, and hover effects change fill color to wheat.

GGogineni44
94% match
Loading thumbnail…

Fork of IndiaMap

This visualization displays a color-coded map of India’s states, with each state labeled by name and rendered using D3’s `geoMercator` projection and `geoPath` generator. State boundaries are drawn with a white stroke, and hovering over a state fills it white. The code loads TopoJSON data from a GitHub gist, applies a `scaleOrdinal` with `schemeCategory10` for fill colors, and positions state name labels at path centroids. It uses D3 v5, TopoJSON, and renders to SVG within a React project.

KKinjal-Goyani
93% match