Skip to main content
SimilarExport ZIP
100%

country map

✓ Published0🌍 Public
Kkranthireddyskr
Last edited Apr 3, 2022
Created on Apr 3, 2022
Forked from ICE 8 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.

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

Country map fork

This example displays a choropleth map of India using the Mercator projection, with each state colored via a categorical color scale. The visualization renders SVG paths derived from TopoJSON data fetched from a GitHub gist, using `d3.geoPath` and `d3.geoMercator` for geometry and projection. The code employs `d3.select`, `d3.json`, `d3.scaleOrdinal`, and `schemeCategory10` for styling, while the `country` class applies a hover effect that turns regions yellow. The map is built within a React framework using D3 v5.

Nnagarjuna1968
91% 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
89% match
Loading thumbnail…

Fork of country map

This example displays a choropleth map of India, with each state colored according to a categorical color scheme. The visualization uses the Mercator projection via `d3.geoMercator` and renders geographic boundaries with `d3.geoPath`. GeoJSON data is fetched from a GitHub Gist, parsed with `topojson`'s `feature` function, and drawn as SVG paths. The map is built with D3 v5, React, and a CSS hover effect that changes state fill colors.

Ssaidhiraj16
89% match