Skip to main content
SimilarExport ZIP
100%

Fork of Fork of India Map: ICE-8

✓ Published0🌍 Public
Tttummala17
Last edited Jul 9, 2022
Created on Jul 9, 2022

This visualization displays a map of Indian administrative regions, colored with a categorical palette from D3’s `schemeCategory10` and labeled with each state’s name at its centroid. The code uses `geoMercator` with custom translation and scale for projection, `geoPath` to generate SVG paths, and TopoJSON’s `feature` to extract geometries from a remote Argentine COVID-19 dataset mislabeled as Indian regions. It loads data asynchronously via `d3.json`, then renders the map and text labels into an SVG. The styling sets black state borders with a semi-transparent stroke.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of India Map: ICE-8

This visualization displays a map of India with its states, each filled with a distinct categorical color and labeled with state names positioned at their centroids. It uses a Mercator projection configured with specific translation and scaling to focus the geographic region. The code loads TopoJSON state boundaries from a GitHub repository, then leverages d3’s `geoPath` projection generator to render the SVG paths, with `scaleOrdinal` and `schemeCategory10` for coloring. State names are drawn as SVG text elements at each polygon’s centroid.

KKinjal-Goyani
93% match
Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a map of India, with each state rendered as a colored SVG path and labeled with its name. The map uses a spherical Mercator projection, achieved through `d3.geoMercator()` with custom translation and scaling. State boundaries are drawn with a black stroke, and each state’s fill color is assigned from a categorical color scale using `scaleOrdinal` and `schemeCategory10`. State names are positioned at each state’s centroid via `geoPath.centroid()`. The geographic data is loaded from a TopoJSON file containing India’s administrative divisions, processed with the `topojson` library’s `feature` function.

Tttummala17
92% match
Loading thumbnail…

Fork of Fork of India Map: ICE-8

This visualization renders a choropleth map of Indian states, using a Mercator projection to display each administrative region with a distinct color from the `d3.scaleOrdinal` categorical scheme. The code loads GeoJSON state boundaries via the `d3.json` function and generates SVG paths with `d3.geoPath`, also placing state name labels at each polygon's centroid. The map is styled with a black stroke between states and is built using D3 v5.

JJustin Roberts
92% match
Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, colored with a categorical scheme and labeled with state names at their geographic centroids. Using D3 v5, it loads TopoJSON data for India’s administrative boundaries, removes the first feature, and projects the geometry with `geoMercator`. Paths are generated via `d3.geoPath`, while text labels are positioned using `pathGenerator.centroid`. The SVG rendering includes hover titles and a color scale from `scaleOrdinal(schemeCategory10)`, with styling applied through CSS.

DDINESH SAI BOPPANA
92% match
Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, each filled with a distinct categorical color from D3's `schemeCategory10` and labeled with its name at the centroid. The map uses a `geoMercator` projection from `d3.geoPath`, with state boundaries rendered as SVG paths and stroked black for separation. Data comes from a TopoJSON file of India’s administrative regions, processed via `topojson.feature`, and one feature is removed with `shift()`. Text labels are positioned using `pathGenerator.centroid()`.

RRahulChaitu999
92% match
Loading thumbnail…

Fork of Fork of Data visualization ICE-8 Country map

This visualization displays a choropleth map of Indian states, with each state filled by a categorical color and labeled with its name at its centroid. It uses D3.js v5 with topojson to load and parse Indian state boundary data from a remote TopoJSON file, then renders the shapes as SVG paths via `d3.geoPath` and a Mercator projection. The code applies a `scaleOrdinal` color scheme to differentiate regions and appends text elements positioned using `pathGenerator.centroid`, demonstrating a basic geographic data mapping workflow.

Vvamshisoletii
91% match
Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, with each state filled by a color from the d3 schemeCategory10 scale and labeled with its name. It uses d3.geoMercator and d3.geoPath to project and render the TopoJSON data loaded from a GitHub repository, adding interactivity through SVG title elements. The map includes an adjustment that shifts the data array and custom projection settings to frame the country appropriately.

Aamiralitah
91% match
Loading thumbnail…

Fork of Fork of India Map: ICE-8

This example visualizes a map of India with each state filled using a categorical color scale. It renders every state as an SVG path and labels each one with its name centered on the state's centroid. The code uses D3 v5 APIs including `geoMercator`, `geoPath`, `scaleOrdinal`, and `schemeCategory10`, along with TopoJSON's `feature` method. State boundary data comes from a remote GeoJSON file hosted on GitHub, and the map is drawn with thick black strokes between states.

GGalineeharika
91% match