Skip to main content
SimilarExport ZIP
100%

Saipriya ICE-8 Country map

✓ Published1🌍 Public
SSaiipriiya
Last edited Mar 27, 2023
Created on Mar 27, 2023
Forked from HTML Starter

This example presents a choropleth map of Indian states, rendered as SVG paths using D3’s geoMercator projection and geoPath generator. Each state is filled with a categorical color from scaleOrdinal, with its name overlaid at the centroid. The code loads TopoJSON from a remote URL, extracts features via topojson.feature, and appends hover tooltips via title elements. Styling in CSS adds black state borders.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Saipriya ICE-8

This example displays an interactive world map using an equirectangular projection, with countries rendered as yellow SVG paths against a blue sphere background. Hovering over a country highlights it in red. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `json()`, converts them using `feature` from topojson, and draws them with `geoPath` and `geoEquirectangular` from d3. Styling and hover effects are handled through CSS classes on the SVG path elements.

SSaiipriiya
87% 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
87% 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
86% 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
85% 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
85% match
Loading thumbnail…

ICE8 Country Map

This example shows a choropleth map of Indian states, with each state filled by a distinct color from a categorical scale. The map uses a Mercator projection and renders SVG paths via d3.geoPath. State boundaries are drawn from TopoJSON data loaded with d3.json, and each path includes a tooltip title showing the state name. The color scale is created with d3.scaleOrdinal and d3.schemeCategory10, while the SVG is selected using d3.select.

EEshwarreddyt
85% 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
85% match
Loading thumbnail…

Fork of ICE-8

This example shows a choropleth map of Indian states colored with a categorical scale, with each state’s name rendered at its centroid. Using d3.json to load TopoJSON data, the code applies a geoMercator projection and d3.geoPath to generate SVG paths for state boundaries. State names are positioned via pathGenerator.centroid, while a d3.scaleOrdinal assigns colors from schemeCategory10. The map updates hover effects through CSS on the `.states` class, with red strokes outlining each state.

TTekmal-Bhavana
85% match