Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
KKRITIKA RAI DWIVEDI
Last edited Jul 6, 2021
Created on Jul 6, 2021

This example shows a choropleth map of Indian districts, with each district filled by a categorical color based on its state (NAME_1) and labeled with the state name at the district’s centroid. It uses d3.json to load a TopoJSON file from the datameet repository, then converts it to GeoJSON with topojson.feature. The map is projected using d3.geoMercator and rendered as SVG paths via d3.geoPath, with a d3.scaleOrdinal and d3.schemeCategory10 assigning fill colors.

AI-generated description

The map of India - my country

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This choropleth map displays India’s districts, colored by state (NAME_1 property) using a categorical color scale, with district names overlaid at each shape’s centroid. It uses d3.geoMercator for projection and d3.geoPath to render SVG paths from TopoJSON data sourced from the Datameet Indian district boundaries dataset. The code applies a scaleOrdinal with schemeCategory10 for fills, appends title tooltips, and labels each feature via pathGenerator.centroid, while CSS sets stroke styling for boundaries.

NNita
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
94% 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
93% 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
93% 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
93% 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
93% 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
93% 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
93% match