Skip to main content
SimilarExport ZIP
100%

ICE-8 INDIA

✓ Published0🌍 Public
Yyaswanthsen
Last edited Mar 27, 2023
Created on Mar 27, 2023
Forked from Hello VizHub

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.

AI-generated description

Map Of India

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 INDIA

This visualization displays an SVG map of India with all states colored using D3’s `scaleOrdinal` and `schemeCategory10`, and labels each state name at its centroid via `d3.geoPath().centroid`. It loads TopoJSON state boundaries from a remote GitHub source, projecting them with `geoMercator`. State paths receive black strokes from CSS, while hover titles show names using appended `title` elements. The code uses `topojson.feature`, `d3.json`, and `d3.selectAll` to render the choropleth-style static map.

HHarshinireddyy19
93% match
Loading thumbnail…

ICE-8

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.

HHarishma Nallala
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

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

Country map ICE-8

A choropleth map of Indian states renders each region in a distinct categorical color, with state names shown as hover titles. The visualization uses d3.geoMercator for projection and d3.geoPath to generate SVG paths from TopoJSON data. State boundaries are stroked in black for clarity, while d3.scaleOrdinal with schemeCategory10 assigns the fill colors. The code loads the India states TopoJSON from a remote URL and removes the first feature before rendering.

Ppethavenu
92% 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
91% match