Skip to main content
SimilarExport ZIP
100%

Prasanth ICE - 8 - Map

✓ Published0🌍 Public
PPrasanth
Last edited Apr 13, 2023
Created on Apr 13, 2023
Forked from ICE - 8 - Map

This map visualization displays the administrative regions of India, with each state filled using a categorical color scale and labeled with its name. The geographic data is loaded as a TopoJSON file from a GitHub gist, and the map is rendered using D3 v5’s `geoPath` with a `geoMercator` projection. The code builds SVG paths from the TopoJSON features using `topojson.feature`, applies colors via `scaleOrdinal` and `schemeCategory10`, and places text labels at each state’s centroid. The visualization highlights how D3’s geo and selection APIs combine to create a choropleth-style administrative map.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Prasanth ICE - 8 - World Map

This interactive world map displays countries in green over a blue sphere, with countries highlighting red on hover. Built with React and D3 v5, the visualization uses `d3.geoEquirectangular` projection and `d3.geoPath` to render geographic boundaries. GeoJSON data is fetched from a GitHub gist and processed through TopoJSON's `feature` function. Styling via CSS classes controls sphere fill, country colors, and hover effects.

PPrasanth
85% match
Loading thumbnail…

ICE - 8 - Map

This example visualizes the administrative regions of India as a choropleth map, with each state or territory filled by a distinct color and labeled with its name. It uses D3 v5’s `geoMercator` projection and `geoPath` to render TopoJSON boundaries loaded from a GitHub-hosted India dataset, after removing the first feature. The code applies D3’s `scaleOrdinal` with `schemeCategory10` for coloring, and positions each state label at the computed centroid of its path.

IIndiraSiripurapu
85% match
Loading thumbnail…

ICE - 8 - Map

This example presents a choropleth map of India's administrative regions, coloring each state according to its name using a categorical color scale. It renders the map with D3's `geoPath` and a Mercator projection, drawing state boundaries as SVG paths with white strokes. Data is loaded from a GeoJSON file hosted on GitHub, processed with `topojson`'s `feature` function, and each state is labeled at its centroid. The visualization uses D3 v5 within a React framework, with styling applied via CSS classes.

Ggunasindhuja
84% match
Loading thumbnail…

India ICE - 8 - Map

This example renders a choropleth map of India’s administrative regions, with each state filled by a categorical color and labeled with its name. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` generator to draw the SVG paths from TopoJSON data. State boundaries are stroked in white, and each polygon includes a tooltip via `title` elements. Colors come from `scaleOrdinal` with `schemeCategory10`, while labels are positioned using `pathGenerator.centroid`. The code loads the India dataset from a GitHub gist and shifts off a duplicate feature before rendering.

PPrasanth
84% match
Loading thumbnail…

India Map ICE-8

This example presents a choropleth-style map of India’s administrative regions, colored by each state’s name using a categorical scale. The map is rendered as SVG with D3.js v5, using `d3.geoMercator` for projection and `d3.geoPath` to generate shapes. TopoJSON data is loaded from a GitHub gist and converted to GeoJSON via the `topojson` library. State labels are placed at polygon centroids, while hovering highlights a region in yellow. The background uses a soft linear gradient, and each state’s name appears as a tooltip.

Ggaddamthanmayeereddy759@gmail.com
83% 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
82% 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
82% match
Loading thumbnail…

Data visualization ICE-8 Country map

This visualization renders a choropleth map of Indian states, colored by category using a D3 ordinal color scale. It loads TopoJSON data from a remote source and converts it to GeoJSON with the TopoJSON `feature` API. The map is projected using `geoMercator` and drawn as SVG paths via `d3.geoPath`. Each state is labeled with its name placed at the path’s centroid, and state boundaries are highlighted with a yellow stroke and semi-transparent opacity.

Vvamshisoletii
82% match