Fork of ICE 8 country map

100%

Fork of ICE 8 country map

✓ Published1🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

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.

AI-generated description

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

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

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

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

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

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

94% match

Loading thumbnail…

Fork of ICE 8 country map

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.

YYerlan Yeszhanov

94% match