Skip to main content
SimilarExport ZIP
100%

Fork of Country Map of India

✓ Published1🌍 Public
Ssaidhiraj16
Last edited Apr 3, 2022
Created on Apr 3, 2022

This interactive SVG map visualizes the country of India, colored by state using a categorical color scale. The visualization employs a Mercator projection to render the geographic boundaries, and hovering over a state highlights it in pink. Built with React and D3 v5, the code uses `d3.geoMercator`, `d3.geoPath`, and `d3.scaleOrdinal` to process and display TopoJSON data loaded from a GitHub gist. The map is rendered as SVG paths within a fixed 1060x900 canvas.

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 Country Map of India

This interactive map of India displays each state as a distinct SVG path, colored using a categorical scheme from `d3.scaleOrdinal`. The visualization uses `d3.geoMercator` with a custom translation and scale to project geographic coordinates, and `d3.geoPath` renders each feature. TopoJSON data from a GitHub Gist provides the map boundaries. Hovering highlights the state in pink. The example is built with React and relies on `d3.select` to manage the SVG, demonstrating projection, path generation, and categorical color encoding within D3 v5.

KKinjal-Goyani
96% match
Loading thumbnail…

Fork of Country Map for the India

This map shows the country of India with individual states rendered as colored regions, each assigned a distinct fill from a categorical color scale. A title reading "Country Map of India" appears above the visualization, and hovering over any state turns it red. The visualization uses D3 v5 with the `geoMercator` projection and `geoPath` to draw geographic boundaries from TopoJSON data loaded from a GitHub gist. The code also incorporates `scaleOrdinal` and `schemeCategory10` for color assignment, along with the `d3-geo-projection` library, all rendered as SVG elements.

Rrohinikotha
92% match
Loading thumbnail…

Fork of country map

This example displays a choropleth map of India, with each state colored according to a categorical color scheme. The visualization uses the Mercator projection via `d3.geoMercator` and renders geographic boundaries with `d3.geoPath`. GeoJSON data is fetched from a GitHub Gist, parsed with `topojson`'s `feature` function, and drawn as SVG paths. The map is built with D3 v5, React, and a CSS hover effect that changes state fill colors.

Ssaidhiraj16
91% match
Loading thumbnail…

Fork of IndiaMap

This visualization displays a color-coded map of India’s states, with each state labeled by name and rendered using D3’s `geoMercator` projection and `geoPath` generator. State boundaries are drawn with a white stroke, and hovering over a state fills it white. The code loads TopoJSON data from a GitHub gist, applies a `scaleOrdinal` with `schemeCategory10` for fill colors, and positions state name labels at path centroids. It uses D3 v5, TopoJSON, and renders to SVG within a React project.

KKinjal-Goyani
91% match
Loading thumbnail…

Fork of Fork of india map

This visualization displays a map of India with its states and districts, colored by state using a categorical color scale. It shows district-level boundaries with hover effects that turn districts black, and state boundaries with orange strokes. The map supports zooming and panning via d3.zoom. Built with React, it uses d3.json to load TopoJSON data from GitHub sources, d3.geoMercator for projection, and d3.geoPath to render the SVG paths.

Ssaiteja0725
90% match
Loading thumbnail…

Fork of India Map

This interactive map of India displays state and district boundaries, with each district colored by its state using a categorical color scale. The visualization uses d3.geoMercator for projection, d3.geoPath to render TopoJSON features for both administrative levels, and d3.zoom to enable panning and zooming. Hovering over a district reveals a tooltip with its name and state; the code also attempts to label states with text positioned via path centroids, though that feature is incomplete.

SsreepavanKothapalli
90% match
Loading thumbnail…

Fork of India Map

This fork of an India map visualizes state-level boundaries with each state colored using a categorical color scale, and labels placed at state centroids. The code loads TopoJSON data from a remote source, converts it to GeoJSON using `topojson.feature`, and renders SVG paths via `d3.geoPath` with a `geoMercator` projection. State names are added as SVG text elements positioned with `pathGenerator.centroid`, and hover effects are styled in CSS.

RRupeshGandham
90% match
Loading thumbnail…

Fork of india map

This interactive visualization displays India’s administrative divisions, using distinct colors for districts and dark green highlighting on hover. It also marks state boundaries with a black stroke. The map is rendered as SVG using `d3.geoPath` with a Mercator projection, and supports zoom and pan via `d3.zoom`. District and state boundaries come from TopoJSON files, with district names and states shown as tooltips. The code also loads a CSV of Indian cities, though city markers are not rendered.

Bbindhureddy98
90% match