Skip to main content
SimilarExport ZIP
100%

Fork of Country Map of India

✓ Published0🌍 Public
KKinjal-Goyani
Last edited Oct 20, 2022
Created on Oct 20, 2022

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.

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

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

Fork of Country map

This choropleth map of India displays each state as a distinct colored polygon, with state names rendered at their centroid positions. Built with D3 v5, it uses `d3.geoPath` with a Mercator projection to generate the SVG paths from a TopoJSON file containing India’s administrative boundaries. A categorical color scale colors the states, while topojson’s `feature` extracts the geometry. Text labels are placed via the path generator’s centroid method, and state borders are styled through the CSS class `states`.

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

Fork of Fork of India Map

The map displays India’s administrative states, with each state filled by a categorical color and labeled with its name. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to render TopoJSON boundaries from a GitHub-hosted India states dataset. State names are positioned using `pathGenerator.centroid()`, and colored via `scaleOrdinal` with `schemeCategory10`. The code removes the first feature from the dataset before rendering, and SVG elements include interactive title tooltips.

SSam-010
91% 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