Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Data visualization ICE-8 Country map

✓ Published0🌍 Public
Vvamshisoletii
Last edited Mar 30, 2023
Created on Mar 30, 2023
Forked from Hello VizHub

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.

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

Fork of ICE 08 11540905 India Map

This visualization displays a choropleth map of Indian states, with each state filled by a distinct color from a categorical scale and labeled with its name. The map uses a Mercator projection customized through translation and scaling to center on India. Built with React and D3 v5, the code loads TopoJSON data representing India’s administrative regions, converts it to GeoJSON using `feature`, and renders paths via `d3.geoPath`. State names are positioned using `pathGenerator.centroid`, and hover effects change fill color to wheat.

GGogineni44
93% match
Loading thumbnail…

Data visualization ICE-8 Country map

This visualization renders a choropleth map of Indian states, colored by category using a D3 ordinal color scale. It loads TopoJSON data from a remote source and converts it to GeoJSON with the TopoJSON `feature` API. The map is projected using `geoMercator` and drawn as SVG paths via `d3.geoPath`. Each state is labeled with its name placed at the path’s centroid, and state boundaries are highlighted with a yellow stroke and semi-transparent opacity.

Vvamshisoletii
92% match