Skip to main content
SimilarExport ZIP
100%

India Map: ICE-8

✓ Published0🌍 Public
MMalempatiSaranya
Last edited Jul 8, 2022
Created on Jul 8, 2022
Forked from Hello VizHub

This example displays an interactive map of India with state capitals marked as colored circles, using a CSV dataset that includes city coordinates, population, and color values. It renders the geographic boundaries and city points as SVG elements, with D3 v5 and TopoJSON handling the map projection and path generation. The visualization uses `d3.csv` to load the data, `d3.geoPath` to draw the map, and `d3.select` to bind city positions to the SVG, with hover colors defined per city. The map is centered on India with a fixed 900x1500 viewport.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 India Map

This example displays a choropleth map of Indian states rendered as SVG paths, with each state filled using a categorical color scale and labeled with its name at the centroid. It uses D3 v5’s `geoMercator` projection and `geoPath` to draw the boundaries, while `topojson.feature` extracts the geometry from a remote India states dataset. State polygons are hover-highlighted via CSS, and the color scheme is generated with `d3.scaleOrdinal` and `schemeCategory10`.

Ddivyakota99
88% match
Loading thumbnail…

India Map: ICE-8

This example visualizes India’s administrative states as an SVG map, with each state filled by a categorical color from D3’s `schemeCategory10` and named via tooltips. The code loads GeoJSON from a gist, uses `d3.geoMercator` for projection and `d3.geoPath` to generate paths, while `topojson.feature` extracts the state boundaries. A black stroke between the states highlights the borders. The map displays all states except the first feature, which is removed from the dataset.

VVenkat-Dhulipalla
88% match
Loading thumbnail…

ICE8 - India map

This visualization displays a choropleth map of India, with each district and state boundary rendered as SVG paths. District polygons are filled with colors from `d3.scaleOrdinal` and `schemeCategory10`, while state outlines appear in green with hover effects turning districts black. The map uses `d3.geoMercator` projection and `d3.geoPath` to render TopoJSON data for districts and states. Users can pan and zoom via `d3.zoom`, with tooltips showing district and state names on hover.

Aavnreddy95
87% match
Loading thumbnail…

India map ICE-8

This visualization displays a map of India with district boundaries colored by state and state outlines highlighted. It uses d3.geoPath and geoMercator projection to render GeoJSON TopoJSON data from GitHub sources for both state and district features. The map supports zooming via d3.zoom, and district hover effects change fill color to black. State capitals are not plotted but district tooltips reveal district and state names using SVG title elements.

Aajaysonu
87% match
Loading thumbnail…

India map ICE-8

This visualization displays a map of India with district boundaries colored by state and state outlines highlighted. It uses d3.geoPath and geoMercator projection to render GeoJSON TopoJSON data from GitHub sources for both state and district features. The map supports zooming via d3.zoom, and district hover effects change fill color to black. State capitals are not plotted but district tooltips reveal district and state names using SVG title elements.

Aajaysonu
87% match
Loading thumbnail…

ICE-8 INDIA MAP

This example visualizes the states of India as colored polygons, with each state filled by a categorical color from d3.scaleOrdinal and labeled with its name. It uses d3.geoMercator for projection and d3.geoPath to render the TopoJSON geometry into SVG paths. The map displays state borders with black strokes and positions name labels at each state’s centroid. Data comes from a remote TopoJSON file of Indian administrative boundaries, processed via the topojson library’s `feature` method.

Ssreesushmav
87% match
Loading thumbnail…

ICE - 8 : India Map

This visualization displays a choropleth map of India, with each state filled by a distinct color from a categorical scale based on its name. The map renders as an SVG using D3 v5, with geographic paths generated via `d3.geoPath` and a `geoMercator` projection. State boundaries come from a TopoJSON file parsed with `topojson.feature`, and hover interactions change the fill color through CSS.

MMahitha-Moparthi
87% match
Loading thumbnail…

Map of India - ICE8

This choropleth of India displays each state as a colored SVG path, with state names overlaid as text labels. The visualization uses a TopoJSON dataset of Indian administrative regions, loaded from a GitHub repository and processed via the topojson `feature` API. D3’s `geoMercator` projection and `geoPath` generate the map geometry, while `scaleOrdinal` with `schemeCategory10` assigns distinct fills to each state. Rendering is entirely SVG-based, with hover interactions defined in CSS.

KKolliTeja
87% match