Charan Fork of India Map

100%

Charan Fork of India Map

✓ Published0🌍 Public

Last edited Jul 10, 2022

Created on Jul 10, 2022

This fork displays a choropleth-style map of India, rendered as a single SVG path per state with a uniform salmon fill (#ffa789). The geographic data originates from a GitHub-hosted TopoJSON file, which is converted to GeoJSON features using `topojson.feature`. React renders each state path, while D3’s `geoMercator` projection and `geoPath` API handle the map’s projection and geometry. The visualization adapts to the browser window’s dimensions, centering the map on coordinates 80°E, 19.7°N, and shows a loading message until the data is fetched.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Charan: Fork of India Map

This fork of the India Map renders two hierarchical boundary layers—states and districts—as an SVG using React. It fetches TopoJSON data from two remote sources and draws the geometries with `d3.geoPath` and a Mercator projection, colored by district using `d3.scaleOrdinal`. The visualization supports interactive zoom and pan via `d3.zoom`, and hovering over a district displays its name and state in a tooltip.

Ccharanchand9

93% match

Loading thumbnail…

Fork of Fork of Fork of India Map

A choropleth map of India renders each state as a filled SVG path, with colors assigned via d3.scaleOrdinal and d3.schemeCategory10. State names appear as SVG text labels positioned using d3.geoPath.centroid. The code loads TopoJSON state boundaries from a GitHub repository, projects them with d3.geoMercator, and uses d3.json, d3.geoPath, and topojson.feature to process the data.

DDhiva21

86% 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

85% match

Loading thumbnail…

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

A choropleth map of India displays each state as a colored SVG path, with state names labeled at path centroids. The visualization uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render TopoJSON data from a remote GitHub repository. State colors are assigned via `d3.scaleOrdinal` with `schemeCategory10`, while `topojson.feature` extracts the geographic shapes. The code excludes the first feature, presumably to remove a national boundary, and appends hover-less, static text labels for each state.

Nnagamaheswar

85% match

Loading thumbnail…

Fork of india map

This choropleth map displays India’s districts and states, colored by district name via a categorical scale. It uses d3.geoPath and d3.geoMercator to project TopoJSON boundaries from GitHub sources, with district and state paths rendered as SVG. Pan and zoom interactions are enabled using d3.zoom, applying a transform to the grouped geometry.

PPujitha14challagulla

85% match

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

85% match

Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, with each state filled by a color from the d3 schemeCategory10 scale and labeled with its name. It uses d3.geoMercator and d3.geoPath to project and render the TopoJSON data loaded from a GitHub repository, adding interactivity through SVG title elements. The map includes an adjustment that shifts the data array and custom projection settings to frame the country appropriately.

Aamiralitah

85% match

Loading thumbnail…

Fork of country map

This example displays a choropleth map of India, with each state colored according to a categorical color scheme. The visualization uses the Mercator projection via `d3.geoMercator` and renders geographic boundaries with `d3.geoPath`. GeoJSON data is fetched from a GitHub Gist, parsed with `topojson`'s `feature` function, and drawn as SVG paths. The map is built with D3 v5, React, and a CSS hover effect that changes state fill colors.

Ssaidhiraj16

85% match