ICE8_WorldMap_hd

100%

ICE8_WorldMap_hd

✓ Published0🌍 Public

HHarshithaDontha@my.unt.edu

Last edited Nov 9, 2025

Created on Nov 9, 2025

This example presents two interactive SVG maps built with D3 v7 and TopoJSON: a world map showing random population density values and a U.S. map displaying random crime rates. The world map uses a Natural Earth1 projection, while the U.S. map employs an AlbersUsa projection. Both maps encode data through sequential color scales—YlOrRd for density and Blues for crime—applied to country and state polygons via `d3.geoPath`. The code fetches geographic data from world-atlas and us-atlas CDN packages, then appends tooltips with the corresponding random values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8 1A kumar danam

This example presents two side-by-side SVG map visualizations: a world map showing population data and a U.S. map displaying crime rates. The world map uses the `d3.geoNaturalEarth1` projection with a sequential color scale (`d3.scaleSequential` with `d3.interpolateYlOrRd`) to encode population values from a hardcoded dataset, while U.S. states are rendered via `d3.geoAlbersUsa`. Both maps load TopoJSON data from `world-atlas@2` and `us-atlas@3`, converting it with `topojson.feature` and drawing paths using `d3.geoPath`. Graticules and tooltips via SVG `<title>` elements enhance the display.

KKumar Danam

86% match

Loading thumbnail…

ICE-8

ICE-8 presents a pair of interactive SVG choropleth maps showing world GDP and US state values. The world map projects Natural Earth TopoJSON countries with a Natural Earth projection and uses a green sequential color scale, while the US map uses an Albers USA projection. Both maps use `d3.geoPath`, TopoJSON features, and tooltip interactions. Data is joined from remote CSV sources, with JavaScript fetch and D3’s data loaders handling URL fallbacks.

SSainathreddypotu@gmail.com

85% match

Loading thumbnail…

ICE8Wmap

This map shows global crime rates by country, using a yellow-to-red color scale to represent the range of synthetic crime rate values. Built with D3.js, it renders a Natural Earth projection using `d3.geoNaturalEarth1()` and draws country boundaries with `d3.geoPath()`. The code generates random crime rates and merges them with TopoJSON country data from the world-atlas package via `topojson.feature()`. It also adds a graticule layer with `d3.geoGraticule()` and an interactive color legend with axis labels.

Ddandamidhun41613@gmail.com

84% match

Loading thumbnail…

dinesh ice8 q1

This example presents a dual-map visualization: a world choropleth and a US states choropleth, rendered as SVG using D3.js v7. The world map uses `d3.geoNaturalEarth1` projection and color-coded countries based on population data from a CSV file, while the US map uses `d3.geoAlbersUsa` projection with state-level values. Both maps load GeoJSON from the world-atlas and us-atlas CDN packages, and use `topojson-client` functions `feature` and `mesh` for geometry processing. A hover tooltip displays values; the US section also includes state borders drawn via a mesh layer.

Ddineshsingiri18@gmail.com

84% match

Loading thumbnail…

ICE-8 NIHA

Two map examples show how D3.js renders geographic data with TopoJSON and custom projections. The world map uses `d3.geoNaturalEarth1` and a sequential blue color scale to encode population values from a CSV, overlaid with a graticule. The US map uses `d3.geoAlbersUsa` with state boundaries from `us-atlas@3`. Both use SVG paths via `d3.geoPath` and a fixed tooltip on hover.

118121a1545

84% match

Loading thumbnail…

Fork of ICE-8 world map_ USA map

This example presents two side-by-side SVG maps: a world map and a map of the United States, both filled with a constant blue color. It uses D3.js v7 and TopoJSON to load and render geographic features, with `d3.geoNaturalEarth1` for the world projection and `d3.geoPath` to draw paths. A graticule layer is added to the world map, and both maps include hover effects with a tooltip that displays country or state names. The maps use the world-atlas TopoJSON data source.

Ppasalabala22@gmail.com

84% match

Loading thumbnail…

ICE8_WorldMap

This example displays a world map with countries colored by population estimates, using a green fill that darkens on hover and supports interactive zooming. Built with D3 v5 and the topojson library, it loads geographic data from the world-atlas package and renders paths via `d3.geoPath` with a Mercator projection. The visualization applies a linear color scale based on population values from a TSV data file, and includes zoom functionality through D3’s `d3.zoom` module.

Ssrividya-bachina

83% match

Loading thumbnail…

ICE8 - World Map

This example displays a world map rendered as an SVG, with countries drawn in pink and the globe’s sphere filled in light blue. It uses D3 v5 and the TopoJSON library to load country boundaries from the world-atlas dataset, specifically the countries-110m.json file. The map employs a natural Earth projection via `geoNaturalEarth1` and generates SVG paths with `geoPath`. Country features are extracted using TopoJSON’s `feature` method and bound to SVG elements.

KKande2011

83% match