Skip to main content
SimilarExport ZIP
100%

Data visualization ICE-8 Country map

✓ Published0🌍 Public
Vvamshisoletii
Last edited Mar 30, 2023
Created on Mar 30, 2023

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 - Country Map

This visualization displays a choropleth map of India, with each state filled using a categorical color scheme. It uses `d3.geoMercator` projection and `d3.geoPath` to render the geographic boundaries, with `d3.scaleOrdinal` and `d3.schemeCategory10` for coloring. The map loads TopoJSON data from a GitHub gist via `topojson.feature` and renders as SVG. Hovering over a state turns it orange via CSS, while a title attribute reveals the state’s interpolated color value.

SSheela2930
93% match
Loading thumbnail…

India Map: ICE-8

This visualization renders a choropleth map of Indian states using a geoMercator projection. It loads TopoJSON data from a remote GitHub repository and converts it to GeoJSON with the topojson `feature` method, then draws each state as an SVG path using `d3.geoPath`. A categorical `scaleOrdinal` with `schemeCategory10` assigns colors to states. State names appear as SVG text elements positioned at path centroids via `pathGenerator.centroid`. The code uses D3 v5 selection methods like `selectAll` and `enter`/`append`, with a React-based bundle.

RRohithReddy-thoughts
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…

Country map ICE-8

A choropleth map of Indian states renders each region in a distinct categorical color, with state names shown as hover titles. The visualization uses d3.geoMercator for projection and d3.geoPath to generate SVG paths from TopoJSON data. State boundaries are stroked in black for clarity, while d3.scaleOrdinal with schemeCategory10 assigns the fill colors. The code loads the India states TopoJSON from a remote URL and removes the first feature before rendering.

Ppethavenu
92% match
Loading thumbnail…

ICE-8 INDIA

This visualization displays a choropleth map of Indian states, with each state filled by a distinct color from D3’s `schemeCategory10` and labeled with its name. It loads GeoJSON TopoJSON data from a GitHub repository, converts it using `topojson.feature`, and renders the paths via `d3.geoPath` with a `geoMercator` projection. State names are positioned at path centroids using `pathGenerator.centroid`, with SVG text elements styled in CSS. The code relies on D3 v5 and the `topojson` client library.

Yyaswanthsen
91% match
Loading thumbnail…

ICE8 Country Map

This visualization renders a choropleth map of Indian states using D3.js with a Mercator projection. It loads GeoJSON data containing administrative boundaries and assigns each state a distinct color from D3’s schemeCategory10 palette. The code employs `d3.geoPath` with the projection to generate SVG paths, appending tooltip titles that display state names. The map uses topojson’s `feature` method to extract geometry, and the styling includes a light green background with white state borders, rendered via SVG elements.

Aakhila157
91% match
Loading thumbnail…

ICE-8

This visualization renders a choropleth map of India using a spherical Mercator projection, with each state filled by a categorical color scale and labeled with its name. The map is drawn as SVG paths generated via `d3.geoPath` and `geoMercator`, using TopoJSON data from the `IND_adm1` collection. State boundaries are emphasized with thick black strokes, and each state’s centroid, calculated with `pathGenerator.centroid`, positions its text label. The code loads data via D3’s `json` promise and applies `scaleOrdinal` with `schemeCategory10` for coloring.

HHarishma Nallala
91% match
Loading thumbnail…

ICE 8

This example presents a choropleth map of India, rendered using the Mercator projection via `d3.geoMercator` and drawn with SVG paths. Each state is filled with a color from `scaleOrdinal(schemeCategory10)`, and hovering over a region turns it brown. The visualization loads TopoJSON data from a GitHub gist, parses it with the `topojson.feature` method, and projects the geometry using `d3.geoPath`. An explicit title element is added per state based on the data’s `interpolateRainbow` property, though no such property exists in the dataset.

Ppavan0828
90% match