Skip to main content
SimilarExport ZIP
100%

Map

✓ Published0🌍 Public
DDINESH SAI BOPPANA
Last edited Jul 9, 2022
Created on Jul 9, 2022
Forked from D3 Starter

This example displays a choropleth map of Indian states, with each state filled by a distinct categorical color and labeled with its name. It uses D3 v4's `d3.geoPath` with the `d3.geoMercator` projection to render SVG paths from TopoJSON data, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. State labels are positioned using the path generator's centroid method. The map also generates tooltips via appended `title` elements, loading geographic data from a remote TopoJSON source.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript See also React Starter.

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
94% 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…

India Map

This example displays a choropleth map of Indian states, colored with a categorical color scale and labeled with state names positioned at each region's centroid. It renders SVG paths using `d3.geoPath` with a `geoMercator` projection, and loads GeoJSON data via `d3.json` from a public gist. State boundaries are styled with orange strokes, and tooltips appear on hover via appended `title` elements. The visualization uses `scaleOrdinal` with `schemeCategory10` to assign colors to each state based on its `NAME_1` property.

Aachyutanandmishra17@gmail.com
90% match
Loading thumbnail…

Country Map

This example displays a choropleth map of India rendered as an SVG, with each state filled using a categorical color scale. The visualization uses D3’s `geoMercator` projection, `geoPath`, and `scaleOrdinal` to draw the country’s boundaries from a TopoJSON file hosted on GitHub. Title text appears above the map, and hovering over any state highlights it in red via CSS. The code relies on the D3 v5, TopoJSON, and d3-geo-projection libraries.

Vvaddepallinaveen
90% match
Loading thumbnail…

IndiaMap

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.

Aabdhaseeeb
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 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
89% match