ICE 8

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

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

ICE-8 INDIA MAP

This example visualizes the states of India as colored polygons, with each state filled by a categorical color from d3.scaleOrdinal and labeled with its name. It uses d3.geoMercator for projection and d3.geoPath to render the TopoJSON geometry into SVG paths. The map displays state borders with black strokes and positions name labels at each state’s centroid. Data comes from a remote TopoJSON file of Indian administrative boundaries, processed via the topojson library’s `feature` method.

Ssreesushmav

ICE 8 India

This example presents a map of India, rendered as a collection of purple SVG paths on a full-screen canvas. The visualization loads geographic data from a GitHub-hosted TopoJSON file and converts it into GeoJSON features using the TopoJSON `feature` API. The map is drawn using D3’s `geoMercator` projection and `geoPath` generator, invoked within a React component structure. The code demonstrates an integration of React for component management, D3 v5 for geographic projection and path generation, and a minimal HTML/CSS setup for display.

Aachalasam

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

ICE8 Country Map

This visualization renders a choropleth map of Indian states using D3.js with a Mercator projection. It loads GeoJSON data containing administrative boundaries and assigns each state a distinct color from D3’s schemeCategory10 palette. The code employs `d3.geoPath` with the projection to generate SVG paths, appending tooltip titles that display state names. The map uses topojson’s `feature` method to extract geometry, and the styling includes a light green background with white state borders, rendered via SVG elements.

Aakhila157

ICE8 11554625

This visualization displays a map of Indian states, rendered as an SVG using a Mercator projection centered on Europe. The code employs React for the page structure while D3.js v5 handles the geographic rendering. It loads TopoJSON data from a GitHub repository, converts it to GeoJSON via the topojson library, and draws each state boundary as a white-filled path with grey strokes. The `d3.geoPath` generator applies the projection to transform geographic coordinates into screen positions.

MManohar Kowthavarapu

ICE-8 Q 1.2

This example renders a choropleth map of India using D3.js v5 and TopoJSON, with each state colored via a categorical scale and labeled with its name. The map uses a Mercator projection and d3.geoPath to draw state boundaries as SVG paths, while state names are positioned using pathGenerator.centroid. The data comes from a remote India GeoJSON file, and the visualization highlights interactivity through a CSS hover effect that turns filled states white.

117761A04F1