Fork of ICE 8 country map

100%

Fork of ICE 8 country map

✓ Published0🌍 Public

Last edited Nov 25, 2022

Created on Nov 25, 2022

This example displays a choropleth-style map of India, colored with the d3.scaleOrdinal and schemeCategory10 palette, with hover states that turn regions orange. The visualization uses d3.geoMercator projection, d3.geoPath for rendering, and topojson.feature to parse GeoJSON from a geoBoundaries TopoJSON file hosted on GitHub. The React-based code loads data via d3.json, appends SVG paths, and includes zoom functionality through d3.zoom, with the map heading and styling defined in HTML and CSS.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of India Map: ICE-8

This example displays a choropleth map of India’s administrative regions, colored with a categorical palette and labeled with state names. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to render TopoJSON boundaries, while `scaleOrdinal` and `schemeCategory10` assign fills. The code loads geographic data from a remote TopoJSON source and manipulates the feature collection by removing the first entry before drawing.

YYerlan Yeszhanov

94% 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

94% 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

93% 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

92% 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

92% 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

92% 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

92% 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

92% match