Skip to main content
SimilarExport ZIP
100%

ICE-8

✓ Published0🌍 Public
HHarishma Nallala
Last edited Jul 10, 2022
Created on Jul 10, 2022

This visualization renders a choropleth map of India using a spherical Mercator projection, with each state filled by a categorical color scale and labeled with its name. The map is drawn as SVG paths generated via `d3.geoPath` and `geoMercator`, using TopoJSON data from the `IND_adm1` collection. State boundaries are emphasized with thick black strokes, and each state’s centroid, calculated with `pathGenerator.centroid`, positions its text label. The code loads data via D3’s `json` promise and applies `scaleOrdinal` with `schemeCategory10` for coloring.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8

This visualization displays a map of Indian states, each filled with a distinct color from a categorical scale and labeled with its name. The SVG rendering uses `d3.geoMercator` for projection and `d3.geoPath` to generate state boundaries from TopoJSON data. State names are positioned at each path’s centroid, and hover effects are applied to county paths via CSS. The color mapping relies on `scaleOrdinal` with `schemeCategory10`, while the geographic data comes from a remote India-states TopoJSON file.

DDineshK2602
94% match
Loading thumbnail…

ICE-8 INDIA

This visualization displays a choropleth map of Indian states, with each state filled by a distinct color from D3’s `schemeCategory10` and labeled with its name. It loads GeoJSON TopoJSON data from a GitHub repository, converts it using `topojson.feature`, and renders the paths via `d3.geoPath` with a `geoMercator` projection. State names are positioned at path centroids using `pathGenerator.centroid`, with SVG text elements styled in CSS. The code relies on D3 v5 and the `topojson` client library.

Yyaswanthsen
93% match
Loading thumbnail…

India Map: ICE-8

This visualization renders a choropleth map of Indian states using a geoMercator projection. It loads TopoJSON data from a remote GitHub repository and converts it to GeoJSON with the topojson `feature` method, then draws each state as an SVG path using `d3.geoPath`. A categorical `scaleOrdinal` with `schemeCategory10` assigns colors to states. State names appear as SVG text elements positioned at path centroids via `pathGenerator.centroid`. The code uses D3 v5 selection methods like `selectAll` and `enter`/`append`, with a React-based bundle.

RRohithReddy-thoughts
93% match
Loading thumbnail…

ICE - 8 : India Map

This visualization displays a choropleth map of India, with each state filled by a distinct color from a categorical scale based on its name. The map renders as an SVG using D3 v5, with geographic paths generated via `d3.geoPath` and a `geoMercator` projection. State boundaries come from a TopoJSON file parsed with `topojson.feature`, and hover interactions change the fill color through CSS.

MMahitha-Moparthi
93% match
Loading thumbnail…

ICE 8 - Country Map

This visualization displays a choropleth map of India, with each state filled using a categorical color scheme. It uses `d3.geoMercator` projection and `d3.geoPath` to render the geographic boundaries, with `d3.scaleOrdinal` and `d3.schemeCategory10` for coloring. The map loads TopoJSON data from a GitHub gist via `topojson.feature` and renders as SVG. Hovering over a state turns it orange via CSS, while a title attribute reveals the state’s interpolated color value.

SSheela2930
93% match
Loading thumbnail…

ICE 8

This example presents a choropleth map of India, rendered using the Mercator projection via `d3.geoMercator` and drawn with SVG paths. Each state is filled with a color from `scaleOrdinal(schemeCategory10)`, and hovering over a region turns it brown. The visualization loads TopoJSON data from a GitHub gist, parses it with the `topojson.feature` method, and projects the geometry using `d3.geoPath`. An explicit title element is added per state based on the data’s `interpolateRainbow` property, though no such property exists in the dataset.

Ppavan0828
93% match
Loading thumbnail…

ICE 8 India Map

This example displays a choropleth map of Indian states rendered as SVG paths, with each state filled using a categorical color scale and labeled with its name at the centroid. It uses D3 v5’s `geoMercator` projection and `geoPath` to draw the boundaries, while `topojson.feature` extracts the geometry from a remote India states dataset. State polygons are hover-highlighted via CSS, and the color scheme is generated with `d3.scaleOrdinal` and `schemeCategory10`.

Ddivyakota99
92% match
Loading thumbnail…

ICE-8:India Map with states

This example displays a choropleth map of India with each state filled by a categorical color scale. It uses D3 v5’s `geoMercator` projection and `geoPath` to render SVG paths from TopoJSON state boundaries, sourced from a remote GitHub repository. State names are shown as tooltips via appended `title` elements. The color mapping uses `scaleOrdinal` with `schemeCategory10`, and boundary styling is applied through CSS.

DDeeraj Thakkilapati
92% match