Skip to main content
SimilarExport ZIP
100%

Fork of Fork of India Map: ICE-8

✓ Published0🌍 Public
YYerlan Yeszhanov
Last edited Nov 25, 2022
Created on Nov 25, 2022

This example displays a choropleth map of India’s administrative regions, colored with a categorical palette and labeled with state names. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to render TopoJSON boundaries, while `scaleOrdinal` and `schemeCategory10` assign fills. The code loads geographic data from a remote TopoJSON source and manipulates the feature collection by removing the first entry before drawing.

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 ICE 8 country map

This example displays a choropleth-style map of India, colored with the d3.scaleOrdinal and schemeCategory10 palette, with hover states that turn regions orange. The visualization uses d3.geoMercator projection, d3.geoPath for rendering, and topojson.feature to parse GeoJSON from a geoBoundaries TopoJSON file hosted on GitHub. The React-based code loads data via d3.json, appends SVG paths, and includes zoom functionality through d3.zoom, with the map heading and styling defined in HTML and CSS.

YYerlan Yeszhanov
94% 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
93% match
Loading thumbnail…

Fork of Fork of India Map

This visualization displays a choropleth map of India’s administrative regions, with each state filled by a categorical color from d3.scaleOrdinal and labeled with its name. It uses d3.geoMercator projection and d3.geoPath to render the TopoJSON data loaded via d3.json, with the first feature removed. Text labels are positioned at each path’s centroid using pathGenerator.centroid. The map is drawn as SVG paths with styling from CSS, and labels use text-anchor middle for readability.

YYerlan Yeszhanov
92% 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
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
92% match
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
91% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE 8 country map

This visualization displays a choropleth map of India, with individual states filled using an ordinal color scale. The map is rendered as SVG paths generated via `d3.geoPath` and a Mercator projection, with the geographic data parsed from a TopoJSON file using the `feature` function. The code also integrates zoom and pan functionality from D3 v5, and applies a hover effect through CSS to highlight state boundaries.

DDINESH SAI BOPPANA
91% match