Skip to main content
SimilarExport ZIP
100%

Fork state map_hd

✓ Published0🌍 Public
HHarshithaDontha@my.unt.edu
Last edited Nov 9, 2025
Created on Nov 9, 2025

This interactive SVG map displays the average household income for select Indian states, with a green-shaded choropleth and pop-up tooltips showing dollar amounts on hover. Built with D3.js, it loads GeoJSON state boundaries and applies a Mercator projection via `d3.geoMercator` and `d3.geoPath`. Color encoding uses `d3.scaleSequential` with an interpolator, and a gradient legend with `d3.axisBottom` summarizes the scale. Only four states (Maharashtra, Kerala, Bihar, Delhi) have values; others render gray.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Assignment_8_Making maps

A choropleth map of India colors each state by its poverty rate, measured as the headcount ratio percentage, using a sequential yellow-to-red color scale with gray for missing data. The visualization loads Indian state boundaries from a TopoJSON file and joins them with poverty data from a CSV. The code uses d3.geoPath with a Mercator projection to draw the SVG paths, plus d3.scaleSequential and d3.axisBottom for a horizontal legend, with hover tooltips via SVG title elements.

Ssravya7136@gmail.com
80% match
Loading thumbnail…

Fork of Fork of HTML Starter

This interactive map displays the states of India with hover effects that highlight each state and reveal its name in a tooltip. The visualization is built with React and D3.js, using the `d3.geoMercator` projection and `d3.geoPath` to render GeoJSON state boundaries as SVG paths. State polygons are colored a muted teal and brighten on mouseover. The GeoJSON data is loaded from an external GitHub repository, and the tooltip is implemented as an HTML overlay positioned via mouse event coordinates.

NNita
79% match
Loading thumbnail…

Fork of Fork of India map by Praneeth

This visualization displays a choropleth map of India’s states, with each state filled by a categorical color and labeled with its name at the centroid. It uses d3.json to load a TopoJSON file, d3.geoMercator for projection, and d3.geoPath to render state boundaries as SVG paths. State colors come from d3.scaleOrdinal with schemeCategory10, and hover effects are defined in CSS. The map excludes one feature via shift() and positions text labels using pathGenerator.centroid().

KKiran Jyothi Bodduluri-11604571
79% match
Loading thumbnail…

Fork of Fork of Fork of ICE 8 country map

This choropleth map displays Indian states, colored using a categorical scale based on interpolated attributes. The visualization uses D3 v5 with a Mercator projection and SVG rendering, loading state boundaries from a TopoJSON file hosted on GitHub. The code employs `d3.json`, `geoMercator`, `geoPath`, and `scaleOrdinal` with `schemeCategory10` to fill each state path. Interactive hover effects are defined in CSS, though the map itself does not implement zooming or panning. The viewport dimensions drive the SVG size, with a custom translate and scale applied to the projection.

DDINESH SAI BOPPANA
79% match
Loading thumbnail…

Fork of Fork of Fork of Map of India with D3 - chloropleth map

This choropleth map renders the states of India as SVG paths, with each state colored by a categorical scale and labeled with its name at the path centroid. The visualization uses d3.json to load TopoJSON state boundaries, then converts them with topojson.feature and projects them using d3.geoMercator. d3.geoPath generates the path data, while d3.scaleOrdinal and d3.schemeCategory10 assign fill colors. State names are placed via d3.geoPath.centroid, and the first feature is removed from the dataset before rendering.

Bbindhureddy98
79% match
Loading thumbnail…

Fork of ICE-8_Q1.2_India_CostIndex_Map

This choropleth map shows Indian states colored by their living cost index, with gray indicating missing data. Built with D3 v7, it loads GeoJSON boundaries via `d3.json` and renders paths with `d3.geoPath` using a Mercator projection fitted to the SVG. State names from the GeoJSON join with a hardcoded cost-index map, and a sequential YlGnBu color scale encodes values. Hovering displays a tooltip with the state name and index.

Jjanisha30gowda@gmail.com
79% 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
79% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE 8 country map

This visualization displays a choropleth map of India, with individual states filled using an ordinal color scale. The map is rendered as SVG paths generated via `d3.geoPath` and a Mercator projection, with the geographic data parsed from a TopoJSON file using the `feature` function. The code also integrates zoom and pan functionality from D3 v5, and applies a hover effect through CSS to highlight state boundaries.

DDINESH SAI BOPPANA
79% match