ICE-8 Map

100%

✓ Published0🌍 Public

Last edited Oct 30, 2025

Created on Oct 30, 2025

Forked from Map

This example presents two geographic maps side-by-side: a world map using the Natural Earth projection and an India map using the Mercator projection. Both are rendered as SVG elements via D3 v7 and TopoJSON, with country and state boundaries drawn using `d3.geoPath`. The world map includes a graticule layer and a blue fill for countries, while the India map displays all states with a light background. Data sources are the `world-atlas@2` countries file and a GitHub-hosted India states TopoJSON, respectively.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 - India Map

This example displays a map of India rendered as an SVG, with the country's administrative regions filled in green and outlined in black. It uses the D3 library's `geoNaturalEarth1` projection and `geoPath` to draw the geometry, while loading the map data from a TopoJSON file. The map is centered and scaled using the `projection.center` and `projection.scale` methods, and a sky-blue sphere is drawn behind the country for visual contrast.

Nnagarajuobbineni

88% match

Loading thumbnail…

ICE-8 World Map

This visualization displays a world map using a Natural Earth projection, rendering each country as a distinct SVG path colored in a muted green with thin gray borders. It loads world country boundaries in TopoJSON format from the world-atlas package, converts them to GeoJSON using the topojson library, and draws them with d3.geoPath. The map is centered and scaled within a 960-by-500-pixel SVG canvas.

HHarshithmullapudi@my.unt.edu

85% match

Loading thumbnail…

ICE 8 India Map

This example displays a choropleth map of Indian states rendered as SVG paths, with each state filled using a categorical color scale and labeled with its name at the centroid. It uses D3 v5’s `geoMercator` projection and `geoPath` to draw the boundaries, while `topojson.feature` extracts the geometry from a remote India states dataset. State polygons are hover-highlighted via CSS, and the color scheme is generated with `d3.scaleOrdinal` and `schemeCategory10`.

Ddivyakota99

85% match

Loading thumbnail…

Maps

This example presents two static SVG maps built with D3 v7 and TopoJSON. The first shows a world map using the `world-atlas@2` countries-110m dataset, rendered with a `d3.geoNaturalEarth1()` projection and a graticule layer. The second focuses on India, using a `d3.geoMercator()` projection centered on the country, with state boundaries loaded from a separate geoBoundaries ADM1 file. Both maps use `d3.geoPath` to convert GeoJSON features into SVG paths, with country and state outlines styled distinctly.

AALIMINETI SPOORTHY REDDY

85% match

Loading thumbnail…

ICE-8 INDIA

This visualization displays an SVG map of India with all states colored using D3’s `scaleOrdinal` and `schemeCategory10`, and labels each state name at its centroid via `d3.geoPath().centroid`. It loads TopoJSON state boundaries from a remote GitHub source, projecting them with `geoMercator`. State paths receive black strokes from CSS, while hover titles show names using appended `title` elements. The code uses `topojson.feature`, `d3.json`, and `d3.selectAll` to render the choropleth-style static map.

HHarshinireddyy19

85% match

Loading thumbnail…

ICE8 - World Map

This example renders a world map using the Natural Earth projection. It draws a blue sphere as the globe’s background, then fills each country with a light green color and subtle black strokes. The visualization loads geographic data from the world-atlas TopoJSON file, converts it using `topojson.feature`, and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. The SVG output is generated entirely through D3’s selection and data-join methods.

LLakshmiVandanaNunna

85% match

Loading thumbnail…

ICE-8 INDIA MAP

This example visualizes the states of India as colored polygons, with each state filled by a categorical color from d3.scaleOrdinal and labeled with its name. It uses d3.geoMercator for projection and d3.geoPath to render the TopoJSON geometry into SVG paths. The map displays state borders with black strokes and positions name labels at each state’s centroid. Data comes from a remote TopoJSON file of Indian administrative boundaries, processed via the topojson library’s `feature` method.

Ssreesushmav

84% match

Loading thumbnail…

ICE-8 World Map

This example displays a world map using a natural Earth projection, with each country rendered as a white SVG path with black outlines. The visualization loads geographic data from a GitHub-hosted TopoJSON file, then uses `d3.geoPath` and `geoNaturalEarth1` to project the features onto a 960x500 canvas. The code also draws a transparent sphere outline around the map. D3 v5’s `json` and `select` methods handle the asynchronous data loading and SVG element creation, while TopoJSON’s `feature` API converts the encoded boundaries into usable GeoJSON geometries.

Sspandhanabadekol

84% match