India Map

100%

✓ Published0🌍 Public

Last edited Mar 11, 2021

Created on Mar 11, 2021

A map of India displays each state as a semi-transparent purple polygon, with state names overlaid at their geographic centers. The visualization uses D3 v5 with a Mercator projection (`geoMercator`) and `geoPath` to render TopoJSON administrative boundaries from a Vietnam TopoJSON repository. State colors are assigned sequentially via `scaleOrdinal` and `interpolatePurples`. The SVG map is built using a React-compatible setup, though the example runs as plain JavaScript with D3 selections.

AI-generated description

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

Similar vizzes

Loading thumbnail…

India Map

This example displays a map of India with its states, rendered as an SVG using D3.js v5 and React. The map uses a Mercator projection and colors each state with a purple scale, with state names labeled at their centroids. The visualization relies on d3-geoPath and a TopoJSON file for state boundaries, with a zoom feature available but not activated in the code.

0007ebey

92% match

Loading thumbnail…

India Map

This interactive map of India renders each state as a filled SVG path, with state names overlayed at their geographic centroids. The visualization uses D3's `geoMercator` projection and `geoPath` to generate the map geometry from a GeoJSON file containing `IND_adm1` administrative boundaries. Each state is colored using D3's `scaleOrdinal` with `schemeCategory10` palette, and hovering turns a state white. The vector data is processed through the TopoJSON library's `feature` function, with the map positioned and scaled via explicit projection translations.

AArun Pratap

91% match

Loading thumbnail…

India Map

This example displays a choropleth-style map of India, rendering each state as a green SVG path against an orange background. It uses React for component structure and d3’s `geoMercator` projection with `geoPath` to convert TopoJSON geographic data into scalable vector graphics. The map loads state boundaries from a remote gist URL via `d3.json`, processes them with `topojson.feature`, and fills the viewport dynamically. The visualization is simple and static, focusing on clear geographical layout rather than interactivity or data encoding.

Ssudhamshu24

90% match

Loading thumbnail…

IndiaMap

This example renders a choropleth map of Indian states, with each state filled by a categorical color and labeled with its name. It uses D3 v5’s `geoMercator` projection and `geoPath` to convert TopoJSON geometries into SVG paths, while `scaleOrdinal` and `schemeCategory10` assign colors. State boundaries are emphasized with white strokes, and hovering turns a state white. Data comes from a remote TopoJSON file, and the map is displayed within a fixed-width SVG on a teal gradient background.

VVamsi Krishna

89% match

Loading thumbnail…

Map of India

The map depicts India’s states, each filled with a distinct color from d3.scaleOrdinal and d3.schemeCategory10, with state names overlaid at path centroids. It uses d3.geoMercator projection and d3.geoPath to render GeoJSON derived from TopoJSON via topojson.feature, sourced from a GitHub-hosted Indian states dataset. State boundaries are stroked in black with hover highlighting on counties, though interactivity is limited to title elements showing state names.

NNita

88% match

Loading thumbnail…

India Map

This example displays a choropleth map of India’s states, with each state filled by a distinct color from d3’s `scaleOrdinal` and `schemeCategory10`. Using topojson data loaded from a remote GitHub repository, the code projects the geometry with `d3.geoMercator` and renders it as SVG paths via `d3.geoPath`. State names are positioned at each polygon’s centroid, while hover effects and a light pink stroke are defined in the accompanying CSS. The visualization relies on the D3 v5 library and topojson for geographic feature extraction.

NNithish Kumar

88% match

Loading thumbnail…

india map

This visualization shows India’s administrative boundaries with district-level polygons filled by state using a categorical color scale, overlaid with state outlines. Pan and zoom are enabled via d3.zoom. The map uses d3.geoMercator projection and d3.geoPath to render TopoJSON data from two external sources: state boundaries and district boundaries. District polygons include hover effects and tooltips displaying district and state names via SVG title elements.

PPujitha14challagulla

88% match

Loading thumbnail…

India map

This interactive map of India displays state and district boundaries as SVG paths, with districts colored by state using a categorical scale. Users can pan and zoom the map via d3.zoom. The visualization uses d3.geoMercator for projection, d3.geoPath to generate paths, and topojson.feature to parse geographic data from TopoJSON sources, including state and district boundary datasets. Hovering over a district path changes its fill to dark green and reveals a tooltip showing the district and state names.

Vvarun-030

88% match