Skip to main content
SimilarExport ZIP
100%

Fork of ICE 8 country map

✓ Published0🌍 Public
TTejucmandava
Last edited Apr 10, 2023
Created on Apr 10, 2023
Forked from ICE 8 country map

This example presents an interactive choropleth map of India, rendered as SVG paths using the Mercator projection. The visualization colors each state based on a categorical scale, with hover effects highlighting regions in orange. Built with D3 v5, the code loads TopoJSON data from a GitHub gist and uses `d3.geoPath` and `d3.geoMercator` for geographic rendering. The implementation leverages `d3.json` for data loading and `d3.schemeCategory10` for color assignment, with CSS controlling the hover interaction.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 8 country map

This example visualizes an interactive choropleth map of India with hover highlighting, using a Mercator projection to render individual states as colored paths. The map displays each region with a categorical color scale and a tooltip title showing the region name. Built with D3 v5 and TopoJSON, the code loads India’s geographic data from a GitHub Gist, projects it using `geoMercator` and `geoPath`, and applies color via `scaleOrdinal` and `schemeCategory10`. The SVG rendering and zoom behavior are handled through D3’s selection and event APIs.

SSaiSreya1
96% match
Loading thumbnail…

Fork of ICE 8 country map

This example renders a choropleth map of India using a Mercator projection, with each state filled by a categorical color scale. The visualization loads GeoJSON data from a TopoJSON file hosted on GitHub, then applies `d3.geoPath` to draw the state boundaries as SVG paths. The code uses `d3.zoom` and `d3.event` for interactivity, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The map includes a static title and uses `d3.geoMercator` with manual translation and scale settings.

DDINESH SAI BOPPANA
95% match
Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India rendered in SVG, with each state filled by a categorical color scale. It loads TopoJSON data from a GitHub gist and projects the geometry using `d3.geoMercator` with a custom translation and scale. The visualization leverages `d3.json` for fetching, `topojson.feature` for conversion, and `d3.geoPath` to generate paths. Hovering over a state turns it orange via CSS, while the map is titled "India Map" using a simple text element.

Aamiralitah
95% match
Loading thumbnail…

Fork of Fork of ICE 8 country map

This example displays a choropleth map of India, with each state rendered as an SVG path and filled using a categorical color scale from `d3.scaleOrdinal` and `schemeCategory10`. The map is generated from TopoJSON data loaded from a GitHub gist, and the geographic paths are computed using `d3.geoMercator` and `d3.geoPath`. The visualization also incorporates a zoom interaction via `d3.zoom`, though no zoom behavior is explicitly attached to the paths. Hover effects are defined in CSS, though the fill property uses an invalid value.

DDINESH SAI BOPPANA
94% match
Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India rendered as SVG, with each state filled using a categorical color scale. The map is generated from a TopoJSON file hosted on GitHub, parsed with the TopoJSON `feature` API, and projected using a Mercator projection via `d3.geoMercator` and `d3.geoPath`. The page includes a zoomable viewport (though no zoom interaction is implemented) and highlights states on hover by changing their fill to orange. The code relies on D3 v5, the d3-geo-projection plugin, and React integration, with styling defined in an external CSS file.

Aavinashchinta99
94% match
Loading thumbnail…

Fork of ICE 8 country map

This visualization displays a choropleth-style map of India rendered as SVG paths, with each state filled by a categorical color and hover highlighting in yellow. It uses `d3.geoMercator` and `d3.geoPath` to project and draw features from a TopoJSON file fetched via `d3.json`, with `feature` from the `topojson` library for parsing. The color scale employs `d3.scaleOrdinal` with `schemeCategory10`, while zoom is not applied.

Nnagarjuna1968
94% match
Loading thumbnail…

Fork of ICE 8 country map

This visualization displays a choropleth-style map of India rendered as SVG paths, with each state filled by a categorical color and hover highlighting in yellow. It uses `d3.geoMercator` and `d3.geoPath` to project and draw features from a TopoJSON file fetched via `d3.json`, with `feature` from the `topojson` library for parsing. The color scale employs `d3.scaleOrdinal` with `schemeCategory10`, while zoom is not applied.

Nnagarjuna1968
94% match
Loading thumbnail…

Fork of ICE 8 country map

This visualization displays a choropleth-style map of India rendered as SVG paths, with each state filled by a categorical color and hover highlighting in yellow. It uses `d3.geoMercator` and `d3.geoPath` to project and draw features from a TopoJSON file fetched via `d3.json`, with `feature` from the `topojson` library for parsing. The color scale employs `d3.scaleOrdinal` with `schemeCategory10`, while zoom is not applied.

Nnagarjuna1968
94% match