IndiaMap

100%

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 10, 2023

This example renders a choropleth-style map of India using D3 v5 and TopoJSON, with each state filled by a categorical color from `d3.scaleOrdinal` and labeled via `d3.geoPath` centroids. The map is projected with `d3.geoMercator` and drawn as SVG paths from a hosted GeoJSON-like TopoJSON file, with hover effects defined in CSS. It uses `topojson.feature` to extract state boundaries and appends hover tooltips via `<title>` elements, demonstrating basic geographic data binding and interaction.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

IndiaMap

This example renders a choropleth map of Indian states, with each state filled by a categorical color and labeled with its name. It uses D3 v5’s `geoMercator` projection and `geoPath` to convert TopoJSON geometries into SVG paths, while `scaleOrdinal` and `schemeCategory10` assign colors. State boundaries are emphasized with white strokes, and hovering turns a state white. Data comes from a remote TopoJSON file, and the map is displayed within a fixed-width SVG on a teal gradient background.

VVamsi Krishna

93% match

Loading thumbnail…

India Map made with D3

This example shows a choropleth map of India’s states, each filled with a distinct color from a categorical scale and labeled with its name. Built with D3 v5, it loads TopoJSON state boundaries and renders them as SVG paths using a Mercator projection via `d3.geoPath` and `geoMercator`. State names are placed at each path’s centroid, while `d3.scaleOrdinal` and `schemeCategory10` assign colors.

TTusar

92% match

Loading thumbnail…

India Map

This example displays a choropleth map of India’s states, with each state filled by a distinct color from d3’s `scaleOrdinal` and `schemeCategory10`. Using topojson data loaded from a remote GitHub repository, the code projects the geometry with `d3.geoMercator` and renders it as SVG paths via `d3.geoPath`. State names are positioned at each polygon’s centroid, while hover effects and a light pink stroke are defined in the accompanying CSS. The visualization relies on the D3 v5 library and topojson for geographic feature extraction.

NNithish Kumar

91% match

Loading thumbnail…

Map of India with D3

This example 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 loads TopoJSON data from a GitHub repository and renders it as SVG paths using `d3.geoPath` with a `geoMercator` projection. State names are drawn as SVG text elements positioned via `pathGenerator.centroid`. The code also applies `scaleOrdinal` with `schemeCategory10` for coloring and relies on the `topojson` library to convert the TopoJSON features.

NNita

91% match

Loading thumbnail…

country map

This example displays a choropleth-style map of India rendered as SVG paths, with each state filled using a categorical color scale from `schemeCategory10`. The visualization uses `d3-geoMercator` for projection and `d3.geoPath` to generate the state boundaries from TopoJSON data loaded via `d3.json`. A zoom interaction is enabled, and hovering over a state changes its fill to grey via CSS. The map includes a title and is built with React, though the core logic relies on D3 v5 and the `topojson` feature API.

Nnagarjuna1968

90% match

Loading thumbnail…

Map of India with D3 - chloropleth map

This choropleth map of India colors each state using D3’s `scaleOrdinal` and `schemeCategory10`, with state names placed at the centroid of each polygon via `geoPath.centroid`. It uses the `geoMercator` projection, `topojson.feature` to parse India’s states from a TopoJSON file, and renders SVG paths with black strokes between states. The map loads data from a remote TopoJSON source and appends interactive tooltips using SVG `<title>` elements.

RRavi Teja Bonam

90% match

Loading thumbnail…

Fork of India Map

This example renders a choropleth map of Indian states using D3 v5 and TopoJSON, with each state colored by a categorical color scale and labeled with its name at the centroid. The visualization uses a geoMercator projection and d3.geoPath to draw state boundaries from the external TopoJSON source, while d3.scaleOrdinal and schemeCategory10 assign colors. State names are positioned using pathGenerator.centroid, and hover effects are not implemented.

Vvamshisoletii

90% match

Loading thumbnail…

India Map

This example displays a choropleth-style map of India, rendering each state as a green SVG path against an orange background. It uses React for component structure and d3’s `geoMercator` projection with `geoPath` to convert TopoJSON geographic data into scalable vector graphics. The map loads state boundaries from a remote gist URL via `d3.json`, processes them with `topojson.feature`, and fills the viewport dynamically. The visualization is simple and static, focusing on clear geographical layout rather than interactivity or data encoding.

Ssudhamshu24

90% match