Fork of Map

100%

✓ Published0🌍 Public

Last edited Apr 3, 2024

Created on Apr 2, 2024

This D3.js example displays a map of India, focusing on the Bangalore region with a light blue fill and black borders. It loads TopoJSON data from a GitHub gist and converts it to GeoJSON using the topojson library's `feature` function. The map is rendered as SVG paths using the `geoPath` and `geoMercator` projection from D3 v5, with a categorical color scale available but not applied in the visible output.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Map of India with D3 - chloropleth map

This example shows a choropleth map of Indian districts, with each district filled by a categorical color based on its state (NAME_1) and labeled with the state name at the district’s centroid. It uses d3.json to load a TopoJSON file from the datameet repository, then converts it to GeoJSON with topojson.feature. The map is projected using d3.geoMercator and rendered as SVG paths via d3.geoPath, with a d3.scaleOrdinal and d3.schemeCategory10 assigning fill colors.

KKRITIKA RAI DWIVEDI

85% match

Loading thumbnail…

Fork India map

This example displays a choropleth map of India, with each state filled by a categorical color scale and labeled with its name. Using D3 v5, the map is rendered as SVG paths generated by `d3.geoPath` with a `geoMercator` projection. The code loads TopoJSON data from the world-atlas package, specifically targeting the `india-districts-2019-734` object, and assigns colors via `scaleOrdinal` with `schemeCategory10`. State labels are positioned at each path’s centroid using `pathGenerator.centroid`.

SSreejaBellamkonda

84% match

Loading thumbnail…

Fork of India Map

This fork of an India map visualizes state-level boundaries with each state colored using a categorical color scale, and labels placed at state centroids. The code loads TopoJSON data from a remote source, converts it to GeoJSON using `topojson.feature`, and renders SVG paths via `d3.geoPath` with a `geoMercator` projection. State names are added as SVG text elements positioned with `pathGenerator.centroid`, and hover effects are styled in CSS.

RRupeshGandham

84% match

Loading thumbnail…

Fork of country map

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.

Kkalyanikotha

84% match

Loading thumbnail…

Fork of Fork of India Map

This example displays a choropleth map of Indian states, coloring each region with a distinct category color and labeling it with the state name. It loads India’s state boundaries from a TopoJSON file via `d3.json`, then converts and projects the data using `topojson.feature` and a `d3.geoMercator` projection. The map is rendered as SVG paths with `d3.geoPath`, and a D3 ordinal scale with `schemeCategory10` assigns fills. State labels are placed at path centroids.

NNICHAPA

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

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

83% match

Loading thumbnail…

Fork of Map of India with D3 - chloropleth map

This example shows a choropleth map of India’s states, with each state filled by a categorical color scale and labeled by name at its centroid. The visualization uses D3 v5’s `geoMercator` projection, `geoPath`, and `scaleOrdinal` to render the SVG paths. TopoJSON data from a remote GitHub source is parsed with `feature` to draw state boundaries, while state names are positioned using `pathGenerator.centroid`. The map omits the first feature from the dataset, likely removing a national outline or disputed region.

NNita

83% match