Skip to main content
SimilarExport ZIP
100%

Fork of Fork of ICE 8 country map

✓ Published1🌍 Public
DDINESH SAI BOPPANA
Last edited Jul 9, 2022
Created on Jul 9, 2022

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.

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 Fork of Fork of Fork of ICE 8 country map

This visualization displays a choropleth map of India, with individual states filled using an ordinal color scale. The map is rendered as SVG paths generated via `d3.geoPath` and a Mercator projection, with the geographic data parsed from a TopoJSON file using the `feature` function. The code also integrates zoom and pan functionality from D3 v5, and applies a hover effect through CSS to highlight state boundaries.

DDINESH SAI BOPPANA
95% 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 Fork of Fork of ICE 8 country map

This choropleth map displays Indian states, colored using a categorical scale based on interpolated attributes. The visualization uses D3 v5 with a Mercator projection and SVG rendering, loading state boundaries from a TopoJSON file hosted on GitHub. The code employs `d3.json`, `geoMercator`, `geoPath`, and `scaleOrdinal` with `schemeCategory10` to fill each state path. Interactive hover effects are defined in CSS, though the map itself does not implement zooming or panning. The viewport dimensions drive the SVG size, with a custom translate and scale applied to the projection.

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 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.

TTejucmandava
94% match
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
93% 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
93% 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
93% match