Skip to main content
SimilarExport ZIP
100%

ICE 8: Country Map

✓ Published0🌍 Public
KK V VINITHA
Last edited Apr 2, 2022
Created on Apr 1, 2022
Forked from HTML Starter

This map of India colors each state with a distinct color from a categorical scale, providing a clear visual overview of the country's administrative divisions. Built with React and D3 v5, it loads TopoJSON data and renders the geography using the Mercator projection and `d3.geoPath`. The `d3.zoom` module is imported for potential interaction, while hover effects change state colors to red.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

ICE 8 country map

This interactive SVG map visualizes the country of India using a Mercator projection, with each region colored according to a categorical color scale. Built with React and D3 v5, the map loads TopoJSON geographic data from a GitHub Gist and renders paths via `d3.geoPath` and `d3.geoMercator`. The code assigns fill colors using `d3.scaleOrdinal` with the `schemeCategory10` palette, and region names appear as tooltips through appended `title` elements. The styling applies a coral fill with black strokes via CSS.

Mmanojgne
93% match
Loading thumbnail…

ICE 8 country map

This example displays a choropleth map of India, coloring each state with a categorical color scale. The map uses the Mercator projection to render geographic boundaries from a TopoJSON file. The visualization is built with React, D3 v5, and the `topojson` library, which parse the data and generate SVG paths. The `d3.geoPath` and `d3.geoMercator` functions handle projection and rendering, while a CSS hover effect highlights individual states in yellow.

Nnagarjuna1968
92% match
Loading thumbnail…

ICE 8 : Country map -India

The map displays India’s states and districts, colored by state via a categorical scale, with zoom and pan support. It loads TopoJSON data for both administrative levels and renders them as SVG paths using `d3.geoPath` and `geoMercator`. Hovering over a district reveals a tooltip with its name and state. The code uses D3 v5, `topojson.feature`, and `d3.zoom` to enable interaction.

SShreeti Upreti
92% match
Loading thumbnail…

ICE 8 India Country Map

Using React and D3 v6, this interactive map of India displays state and district boundaries as SVG paths. A click on any region zooms and pans the map to that area, using `d3.zoom` with a smooth transition. The `geoMercator` projection and `geoPath` render the TopoJSON features, with boundary data loaded from two remote GeoJSON files. The map dynamically filters to show either all states or the districts of the selected state, with fill colors set via CSS.

SSrujana390
92% match
Loading thumbnail…

ICE 8 country map

This choropleth displays a map of India, with each state filled using the `d3.scaleOrdinal` and `d3.schemeCategory10` color scheme. The map is rendered as SVG paths, generated via `d3.geoPath` and `d3.geoMercator` projection. Hovering over a state turns it orange, as defined by the `.country:hover` CSS rule. The geographic data itself comes from a TopoJSON file fetched from a GitHub gist, which is parsed using the `feature` function from the `topojson` library.

Ssaivinay143
92% match
Loading thumbnail…

ICE - 8: Country Map

This interactive map of India displays state and district boundaries, letting users click a region to zoom in and drill down to its subdivisions. Built with React and D3 v6, it uses the `geoMercator` projection and `geoPath` for rendering GeoJSON features as SVG paths. Clicking triggers a `zoomToBoundingBox` function that calculates path bounds via `pathGenerator.bounds` and animates a zoom transition with `d3.zoom`. State boundaries come from a TopoJSON file converted through the `topojson` feature API.

RRajeevMukhesh
91% match
Loading thumbnail…

ICE - 8 - Map

This example presents a choropleth map of India's administrative regions, coloring each state according to its name using a categorical color scale. It renders the map with D3's `geoPath` and a Mercator projection, drawing state boundaries as SVG paths with white strokes. Data is loaded from a GeoJSON file hosted on GitHub, processed with `topojson`'s `feature` function, and each state is labeled at its centroid. The visualization uses D3 v5 within a React framework, with styling applied via CSS classes.

Ggunasindhuja
91% match