Fork of country map

100%

Fork of country map

✓ Published0🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

This choropleth-style map displays the regions of India, colored with a categorical palette based on data values. Built with D3 v5 and the TopoJSON library, it loads geographic data from a GitHub Gist and applies the Mercator projection using `d3.geoMercator` and `d3.geoPath`. The SVG rendering includes a header and hover effects that change the fill color of each region to purple.

AI-generated description

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

Similar vizzes

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

91% match

Loading thumbnail…

Fork of Country map fork

This example displays a choropleth-style map of India, with each state filled using a categorical color scale. The visualization renders geographic boundaries as SVG paths using `d3.geoPath` with a Mercator projection, loading TopoJSON data from a GitHub gist. Hovering over a state turns it yellow via CSS. The code uses `d3.json` for data fetching, `topojson.feature` for parsing, and `d3.scaleOrdinal` with `schemeCategory10` for colors, though the fill assignment references an undefined `interpolateRainbow` property rather than actual data values.

Nnagarjuna1968

89% match

Loading thumbnail…

Fork of Country map

This choropleth map of India displays each state as a distinct colored polygon, with state names rendered at their centroid positions. Built with D3 v5, it uses `d3.geoPath` with a Mercator projection to generate the SVG paths from a TopoJSON file containing India’s administrative boundaries. A categorical color scale colors the states, while topojson’s `feature` extracts the geometry. Text labels are placed via the path generator’s centroid method, and state borders are styled through the CSS class `states`.

Bbhargavarathod

89% match

Loading thumbnail…

Fork of Country Map of India

This interactive SVG map visualizes the country of India, colored by state using a categorical color scale. The visualization employs a Mercator projection to render the geographic boundaries, and hovering over a state highlights it in pink. Built with React and D3 v5, the code uses `d3.geoMercator`, `d3.geoPath`, and `d3.scaleOrdinal` to process and display TopoJSON data loaded from a GitHub gist. The map is rendered as SVG paths within a fixed 1060x900 canvas.

Ssaidhiraj16

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

88% match

Loading thumbnail…

Fork of india map

This choropleth map displays India’s districts and states, colored by district name via a categorical scale. It uses d3.geoPath and d3.geoMercator to project TopoJSON boundaries from GitHub sources, with district and state paths rendered as SVG. Pan and zoom interactions are enabled using d3.zoom, applying a transform to the grouped geometry.

PPujitha14challagulla

88% match

Loading thumbnail…

Fork of Country Map of India

This interactive map of India displays each state as a distinct SVG path, colored using a categorical scheme from `d3.scaleOrdinal`. The visualization uses `d3.geoMercator` with a custom translation and scale to project geographic coordinates, and `d3.geoPath` renders each feature. TopoJSON data from a GitHub Gist provides the map boundaries. Hovering highlights the state in pink. The example is built with React and relies on `d3.select` to manage the SVG, demonstrating projection, path generation, and categorical color encoding within D3 v5.

KKinjal-Goyani

88% match

Loading thumbnail…

Fork of Country Map for the India

This map shows the country of India with individual states rendered as colored regions, each assigned a distinct fill from a categorical color scale. A title reading "Country Map of India" appears above the visualization, and hovering over any state turns it red. The visualization uses D3 v5 with the `geoMercator` projection and `geoPath` to draw geographic boundaries from TopoJSON data loaded from a GitHub gist. The code also incorporates `scaleOrdinal` and `schemeCategory10` for color assignment, along with the `d3-geo-projection` library, all rendered as SVG elements.

Rrohinikotha

88% match