Skip to main content
SimilarExport ZIP
100%

Fork of IndiaMap

✓ Published0🌍 Public
KKinjal-Goyani
Last edited Oct 20, 2022
Created on Oct 20, 2022
Forked from 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.

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

Fork of Fork of India Map: ICE-8

This visualization displays a map of India with its states, each filled with a distinct categorical color and labeled with state names positioned at their centroids. It uses a Mercator projection configured with specific translation and scaling to focus the geographic region. The code loads TopoJSON state boundaries from a GitHub repository, then leverages d3’s `geoPath` projection generator to render the SVG paths, with `scaleOrdinal` and `schemeCategory10` for coloring. State names are drawn as SVG text elements at each polygon’s centroid.

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

Fork of India Map

This example renders a choropleth map of Indian states using D3 v5 and TopoJSON, with each state colored by a categorical color scale and labeled with its name at the centroid. The visualization uses a geoMercator projection and d3.geoPath to draw state boundaries from the external TopoJSON source, while d3.scaleOrdinal and schemeCategory10 assign colors. State names are positioned using pathGenerator.centroid, and hover effects are not implemented.

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

Fork of India Map: ICE-8

This visualization displays a map of India, with each state rendered as a colored SVG path and labeled with its name. The map uses a spherical Mercator projection, achieved through `d3.geoMercator()` with custom translation and scaling. State boundaries are drawn with a black stroke, and each state’s fill color is assigned from a categorical color scale using `scaleOrdinal` and `schemeCategory10`. State names are positioned at each state’s centroid via `geoPath.centroid()`. The geographic data is loaded from a TopoJSON file containing India’s administrative divisions, processed with the `topojson` library’s `feature` function.

Tttummala17
92% match
Loading thumbnail…

Fork of Fork of India Map: ICE-8

This example visualizes a map of India with each state filled using a categorical color scale. It renders every state as an SVG path and labels each one with its name centered on the state's centroid. The code uses D3 v5 APIs including `geoMercator`, `geoPath`, `scaleOrdinal`, and `schemeCategory10`, along with TopoJSON's `feature` method. State boundary data comes from a remote GeoJSON file hosted on GitHub, and the map is drawn with thick black strokes between states.

GGalineeharika
92% match
Loading thumbnail…

Fork of India Map

This visualization displays a choropleth map of India with its districts and states, rendered using the Mercator projection and geographic path generation. It overlays district boundaries colored by state using `d3.scaleOrdinal` with `schemeCategory10`, while state borders are stroked in black, and hovering highlights districts in dark blue. The map supports interactive zooming via `d3.zoom`, with district and state data loaded from GeoJSON and TopoJSON sources, and uses SVG paths for rendering.

GGogineni44
91% match