Skip to main content
SimilarExport ZIP
100%

Assignment2_Task6_India_districts_States

✓ Published0🌍 Public
Ssreekarthanda@gmail.com
Last edited Jul 22, 2023
Created on Jul 21, 2023
Forked from Hello VizHub

This example presents an interactive choropleth of India’s districts and states, colored by state and overlaid with major city markers. A Mercator projection is used with `d3.geoPath` to render TopoJSON boundaries for districts and states, while a color scale assigns hues per state. Users can zoom and pan the map via `d3.zoom`, and hovering over a district shows its name and state in a tooltip. District paths are semi-transparent, with state outlines emphasized in white.

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…

India Map

This example displays an interactive choropleth map of India, with districts and states rendered as colored SVG paths that respond to zooming and hovering. It uses D3’s `geoMercator` projection, `geoPath` for drawing geographic features, and `topojson.feature` to extract polygon data from TopoJSON files. The map also applies `d3.scaleOrdinal` with `schemeCategory10` to color districts, and `d3.zoom` enables pan and zoom. State and district names appear in tooltips via appended text elements.

UUmarani Vemula
88% match
Loading thumbnail…

India Map

This example displays a choropleth map of India with district-level boundaries colored by state and state outlines highlighted in green. Built with React and D3, it uses `d3.geoMercator` for projection, `d3.geoPath` for rendering, and `d3.zoom` for pan and zoom interactions. The visualization renders as SVG, combining TopoJSON data from two sources—one for state borders and another for district polygons. Hovering over districts turns them black, with tooltips revealing district and state names.

Hharika-1929
87% match
Loading thumbnail…

INDIA

This interactive visualization presents a map of India, highlighting its states and districts in color. Users can explore the geography through zooming and panning via d3.zoom, while the map’s districts display hover tooltips that reveal district and state names. The visualization uses d3.geoPath with a geoMercator projection to render GeoJSON features built from TopoJSON data, which is sourced from external repositories for Indian state and district boundaries.

Aadapavaishnavi12
85% match
Loading thumbnail…

India map

A choropleth map of India displays districts and states, with district boundaries colored by state and hover states highlighting individual districts. The visualization uses D3.js version 5.16 and d3-geo-projection.v2 to project TopoJSON data for India’s states and districts from GitHub sources. Tooltips reveal district names and their parent states. The map employs the Mercator projection and includes zoom functionality via event handling.

Ddheeraj1509
85% match
Loading thumbnail…

india map

This interactive visualization displays a choropleth map of India, with district-level polygons colored by state and state boundaries outlined in black. Users can pan and zoom the map using d3.zoom. The map is rendered with SVG paths generated by d3.geoPath and a d3.geoMercator projection. District and state boundaries come from TopoJSON files, with district tooltips showing district and state names on hover. The map uses d3.scaleOrdinal with d3.schemeCategory10 for district coloring.

Bbindhureddy98
85% match
Loading thumbnail…

assignment

This interactive choropleth-style map displays a first-level drill-down from Indian states to their districts. Clicking a state triggers a smooth zoom animation into that region, revealing its district boundaries from a second TopoJSON dataset. Built with React and D3 v6, it uses `d3.geoMercator`, `d3.geoPath`, and `d3.zoom` to handle projection, path generation, and zoom-to-bounding-box transitions. SVG elements render all geographic features, with a stroke-width adjustment that responds to zoom scale for crisp outlines.

Ssri7harsha
85% match
Loading thumbnail…

India Map

This interactive visualization displays the states and districts of India on a zoomable SVG map. The code uses `d3.geoMercator` for projection and `d3.geoPath` to render geographic features, with district polygons filled via `scaleOrdinal` and `schemeCategory10`. It loads GeoJSON data from topojson files and applies a zoom behavior to pan and scale the map. Hovering over a district changes its fill color, while tooltips show the district and state names.

MMalempatiSaranya
85% 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
84% match