Skip to main content
SimilarExport ZIP
100%

Country Map of India

✓ Published3🌍 Public
Kkranthireddyskr
Last edited Apr 3, 2022
Created on Apr 3, 2022

This example renders a choropleth map of India using D3.js and TopoJSON. The visualization applies the Mercator projection through thegeoMercator and geoPath APIs to draw state boundaries, with each region colored using a categorical color scheme. The map loads geographic data from a remote TopoJSON file and renders it as SVG paths, with a hover effect that highlights individual states in pink. The interface displays the map within an SVG canvas, with the state names and colors derived from the dataset's properties.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

country map

This example displays a choropleth map of India, rendered as SVG paths using the Mercator projection. The map visualizes the country’s regions with categorical colors from `d3.scaleOrdinal` and `schemeCategory10`, and each region shows a tooltip title on hover. The code loads TopoJSON data from a GitHub gist via `d3.json`, parses it with `feature` from the topojson library, and draws paths using `d3.geoPath`. Hovering changes the fill color to pink, and the map includes a heading text layer.

Kkranthireddyskr
92% match
Loading thumbnail…

country map

This interactive visualization displays a choropleth map of India rendered as SVG paths. Using D3 v5 with the geoMercator projection and geoPath API, it draws country boundaries with colors assigned via scaleOrdinal. Data is loaded from a Gist-hosted TopoJSON file and parsed through the topojson library’s feature function. Hovering highlights regions in violet. The visualization also includes a white header text, with styling handled by an external CSS file.

Ppavankalyan1507
91% match
Loading thumbnail…

India map

This visualization displays a choropleth map of India, using a Mercator projection to render the country’s geographic boundaries as SVG paths. The map is colored using a categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`), and individual regions change to a pink hover color via CSS. The geographic data is loaded as a TopoJSON file from a GitHub gist, parsed with the `topojson` library’s `feature` function, and drawn using `d3.geoPath`. The map is built with React, with an interactive header and styled via an external stylesheet.

66264kusuma@gmail.com
91% 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
91% match
Loading thumbnail…

country map

This example displays a choropleth map of India, rendering each state as a distinct colored path using geographic features loaded from a GitHub gist. The visualization employs a Mercator projection via `d3.geoMercator` and converts TopoJSON data to GeoJSON features with the `topojson.feature` function. Each state is drawn as an SVG path generated by `d3.geoPath`, with fill colors assigned from `d3.scaleOrdinal` and `schemeCategory10`. The map includes a title and uses hover styling, with all rendering handled through React and D3 v5.

Nnagarjuna1968
91% match
Loading thumbnail…

India Map Country

This example displays a choropleth map of Indian states, rendered as orange-highlighted SVG paths on hover. It uses d3.json to load a TopoJSON file of India’s administrative boundaries, converts it to GeoJSON via topojson.feature, and projects it with d3.geoMercator and fitExtent. The d3.geoPath generator draws each state, while state names are placed using path.centroid. The map fills the viewport with skyblue polygons and black strokes, and a bold title labels the visualization.

Nnsatyaprakash22
90% match
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
90% match