country map with Topojson data

100%

country map with Topojson data

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

Forked from Let's make a map with D3.js!

A map of India displays district-level administrative boundaries, with each district colored by its state using an ordinal color scale derived from `d3.scaleOrdinal` and `d3.schemeCategory10`. The visualization loads two TopoJSON files—one for state outlines and one for districts—then projects them onto a `d3.geoMercator` projection centered on the country. `d3.geoPath` generates SVG paths for both layers, with hover effects on districts and zooming enabled via `d3.zoom`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

India map using Topojson

This visualization depicts India’s states using a Mercator projection and TopoJSON data from a GitHub gist. The code loads the data via `d3.json`, converts it with `topojson.feature`, and renders the paths using `d3.geoPath`. Each state is filled with a distinct color from a custom ordinal scale, and hover interactions are styled through CSS. The map is built with D3 v5 and the `d3-geo-projection` library.

PPriyaEnuganti

88% 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

87% match

Loading thumbnail…

Map of India

This visualization displays the districts of India as colored polygons, with state boundaries outlined in black. District polygons are colored according to their state, using a categorical color scheme, and each includes a hover tooltip showing the district and state name. The map supports zooming and panning via d3.zoom. The code uses d3.json to load TopoJSON data, d3.geoMercator with clipExtent, and d3.geoPath to render the features.

RRahulChaitu999

86% match

Loading thumbnail…

Country Map of India

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.

Kkranthireddyskr

86% 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

86% match

Loading thumbnail…

india map

This visualization shows India’s administrative boundaries with district-level polygons filled by state using a categorical color scale, overlaid with state outlines. Pan and zoom are enabled via d3.zoom. The map uses d3.geoMercator projection and d3.geoPath to render TopoJSON data from two external sources: state boundaries and district boundaries. District polygons include hover effects and tooltips displaying district and state names via SVG title elements.

PPujitha14challagulla

85% 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

85% 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

85% match