Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Aadewole-top
Last edited Oct 14, 2021
Created on Oct 14, 2021

This choropleth map of India renders state boundaries as SVG paths, with each state filled using a categorical color scale and labeled with its name at the path centroid. The visualization loads GeoJSON from a GitHub gist, then uses `d3.geoMercator` with a custom translation and scale, `d3.geoPath`, and TopoJSON’s `feature` method to generate the shapes. State names appear as SVG text elements positioned via the path generator’s centroid function, while CSS styling adds black stroke outlines and hover effects.

AI-generated description

The map of India - my country

MIT Licensed

Similar vizzes

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
96% 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
96% match
Loading thumbnail…

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

This choropleth map of India uses a sequential color scale to encode each state with a distinct category color and labels each state with its name. The visualization relies on TopoJSON data for Indian state boundaries, which is projected and rendered using `d3.geoMercator` and `d3.geoPath`. The code filters out the first feature from the dataset before drawing the SVG paths, applies `d3.scaleOrdinal` with `schemeCategory10` for fills, and positions text labels at path centroids using `pathGenerator.centroid`.

Bbhargavarathod
95% match
Loading thumbnail…

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

This choropleth map displays the states of India, each filled with a distinct color from a categorical scale and labeled with its name. The visualization uses D3 v5 and TopoJSON to load and render state boundaries from a GitHub-hosted TopoJSON file. SVG paths are generated with `d3.geoPath` and a Mercator projection, with state labels positioned using `pathGenerator.centroid`. The code assigns fill colors via `scaleOrdinal` and `schemeCategory10`, and applies static styling through CSS classes.

Bbindhureddy98
95% match
Loading thumbnail…

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

This choropleth map displays the states of India, each filled with a distinct color from a categorical scale and labeled with its name. The visualization uses D3 v5 and TopoJSON to load and render state boundaries from a GitHub-hosted TopoJSON file. SVG paths are generated with `d3.geoPath` and a Mercator projection, with state labels positioned using `pathGenerator.centroid`. The code assigns fill colors via `scaleOrdinal` and `schemeCategory10`, and applies static styling through CSS classes.

Bbindhureddy98
95% match
Loading thumbnail…

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

This choropleth map displays the states of India, with each state filled by a categorical color and labeled with its name. It uses D3 v5 with a geoMercator projection and d3.geoPath to render TopoJSON state boundaries from a GitHub-hosted dataset. State names are positioned at path centroids, while d3.scaleOrdinal with schemeCategory10 assigns fill colors. The initial feature is removed from the data, and the SVG renders both shapes and text labels.

RRahulSai05
95% match
Loading thumbnail…

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

This choropleth map displays the states of India, each filled with a distinct color from a categorical scale and labeled with its name at the centroid of its shape. The visualization uses D3 v5 to load TopoJSON data from a remote GitHub repository, converting it to GeoJSON via the `feature` method, and projects it with the Mercator projection. State paths are rendered as SVG elements using `d3.geoPath`, while text labels are positioned with `pathGenerator.centroid`. The state boundary stroke is styled with gray, and the map canvas is set to an SVG size of 960 by 1000 pixels.

RRuanzhenglin
94% match
Loading thumbnail…

Fork of Map of India with D3 - chloropleth map

This example shows a choropleth map of India’s states, with each state filled by a categorical color scale and labeled by name at its centroid. The visualization uses D3 v5’s `geoMercator` projection, `geoPath`, and `scaleOrdinal` to render the SVG paths. TopoJSON data from a remote GitHub source is parsed with `feature` to draw state boundaries, while state names are positioned using `pathGenerator.centroid`. The map omits the first feature from the dataset, likely removing a national outline or disputed region.

NNita
94% match