Fork of ICE-8

100%

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

Forked from ICE-8

This example shows a choropleth map of Indian states colored with a categorical scale, with each state’s name rendered at its centroid. Using d3.json to load TopoJSON data, the code applies a geoMercator projection and d3.geoPath to generate SVG paths for state boundaries. State names are positioned via pathGenerator.centroid, while a d3.scaleOrdinal assigns colors from schemeCategory10. The map updates hover effects through CSS on the `.states` class, with red strokes outlining each state.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8 Q 1.2

This example displays a choropleth map of India, using color to differentiate each state. The visualization is rendered as SVG paths generated with `d3.geoPath` and a `geoMercator` projection, with state names placed at each region’s centroid. It loads TopoJSON data from a GitHub gist, processes it with the `topojson.feature` API, and colors states using `d3.scaleOrdinal` and `d3.schemeCategory10`. The map also includes hover styling through CSS, turning states white when moused over.

Ssivamani

92% match

Loading thumbnail…

Fork of Fork of Fork of ICE 8 country map

This choropleth map displays Indian states, colored using a categorical scale based on interpolated attributes. The visualization uses D3 v5 with a Mercator projection and SVG rendering, loading state boundaries from a TopoJSON file hosted on GitHub. The code employs `d3.json`, `geoMercator`, `geoPath`, and `scaleOrdinal` with `schemeCategory10` to fill each state path. Interactive hover effects are defined in CSS, though the map itself does not implement zooming or panning. The viewport dimensions drive the SVG size, with a custom translate and scale applied to the projection.

DDINESH SAI BOPPANA

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

This example renders a choropleth map of India using a Mercator projection, with each state filled by a categorical color scale. The visualization loads GeoJSON data from a TopoJSON file hosted on GitHub, then applies `d3.geoPath` to draw the state boundaries as SVG paths. The code uses `d3.zoom` and `d3.event` for interactivity, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The map includes a static title and uses `d3.geoMercator` with manual translation and scale settings.

DDINESH SAI BOPPANA

91% match

Loading thumbnail…

Fork of ICE 8 country map

This example presents an interactive choropleth map of India, rendered as SVG paths using the Mercator projection. The visualization colors each state based on a categorical scale, with hover effects highlighting regions in orange. Built with D3 v5, the code loads TopoJSON data from a GitHub gist and uses `d3.geoPath` and `d3.geoMercator` for geographic rendering. The implementation leverages `d3.json` for data loading and `d3.schemeCategory10` for color assignment, with CSS controlling the hover interaction.

TTejucmandava

91% match

Loading thumbnail…

Fork of India Map

This example renders a choropleth map of Indian states using D3 v5 and TopoJSON, with each state colored by a categorical color scale and labeled with its name at the centroid. The visualization uses a geoMercator projection and d3.geoPath to draw state boundaries from the external TopoJSON source, while d3.scaleOrdinal and schemeCategory10 assign colors. State names are positioned using pathGenerator.centroid, and hover effects are not implemented.

Vvamshisoletii

91% 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…

ICE-8 Q 1.2

This example renders a choropleth map of India using D3.js v5 and TopoJSON, with each state colored via a categorical scale and labeled with its name. The map uses a Mercator projection and d3.geoPath to draw state boundaries as SVG paths, while state names are positioned using pathGenerator.centroid. The data comes from a remote India GeoJSON file, and the visualization highlights interactivity through a CSS hover effect that turns filled states white.

117761A04F1

91% match