Ice_8_map

100%

✓ Published1🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

This interactive choropleth map visualizes population data for a subset of countries on a world map, using a sequential orange color scale to represent population values, with countries lacking data rendered in gray. Built with D3 v7 and TopoJSON, it projects the world using `d3.geoMercator` and draws country boundaries with `d3.geoPath`. The map features a "Zoom to India" button that smoothly animates a zoom and pan transition via `transition().duration(800)`, alongside a "Reset View" button to restore the original projection.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Ice_8_tree

This example shows a choropleth world map coloring select countries by population, with interactive buttons to zoom into India or reset the view. It uses D3 v7 and TopoJSON to load world geography, projecting countries with d3.geoMercator and rendering them as SVG paths filled via d3.scaleSequential with an orange interpolator. Population values for India, the USA, China, Brazil, France, and Germany are drawn from an inline array and matched to country IDs. A d3 transition animates the map transform when zooming or resetting.

Vvineelaviswanadham07@gmail.com

91% match

Loading thumbnail…

ICE8_ Map

This choropleth map displays population distribution across selected countries, using an orange sequential color scale to encode values from a CSV dataset. Built with D3.js v7 and TopoJSON, the visualization projects country boundaries with `d3.geoNaturalEarth1` and renders them as SVG paths via `d3.geoPath`. Hovering triggers a tooltip showing country ID and formatted population, while a gradient legend with an axis communicates the color scale. The base geometry comes from the world-atlas TopoJSON file, and countries without data appear gray.

Ssaitejak1619@gmail.com

87% match

Loading thumbnail…

ICE 8 - 1

This visualization displays a choropleth world map highlighting population distribution across selected countries using a red sequential color scale. The SVG-based map uses the Mercator projection via `d3.geoMercator` and renders country boundaries from TopoJSON world-atlas data with `d3.geoPath`. Population values for five nations, including India and China, are mapped through `d3.scaleSequential` with `d3.interpolateReds`; countries without data appear gray.

Aanirudhrao345@gmail.com

86% match

Loading thumbnail…

ICE8

This interactive world map visualizes country populations with a sequential YlGnBu color scale. It loads TopoJSON world boundaries via `d3.json` and population data from a CSV, then joins them through ISO country codes. The SVG map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render countries, with hover tooltips and an axis-labeled gradient legend built using `d3.scaleSequential` and `d3.axisBottom`. Missing values are shown in gray.

Ppashamsahithi2391@gmail.com

85% match

Loading thumbnail…

ICE8_Map

This example presents a world map colored to display sample population data for a selection of countries, with a grayscale fill for regions without data. It loads country boundaries as TopoJSON from the world-atlas package and uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering, and a sequential color scale with d3.interpolateBlues to encode values. Interactive mouseover events highlight countries in orange, while the map is rendered as SVG with a bold title.

YYash Raj Mathur

85% match

Loading thumbnail…

Q1_Ice8

This choropleth map visualizes world population data by country, using a Plasma color scale to represent population magnitudes. Built with D3 v7 and TopoJSON, it loads countries-110m.json and a CSV population dataset, then renders each country as an SVG path via `d3.geoPath` with a Natural Earth projection. Hover interactions trigger a tooltip displaying country name and population, while a color legend explains the scale. Countries without data appear gray, and the map refreshes with smooth transitions.

SSaiSriSuryaBandaru@my.unt.edu

84% match

Loading thumbnail…

ICE-8 – World Map

This visualization displays a world map where each country is colored according to its population, using a sequential blue scale to encode population magnitude. Country areas without matching data appear gray. The map uses an equirectangular projection with `d3.geoPath`, drawing country boundaries from TopoJSON data from the world-atlas package. Population values from a CSV file are joined to country names, and the color scale uses `d3.scaleSequential` with `d3.interpolateBlues`. A continuous color legend is rendered using Canvas and `d3.axisBottom` for context.

Jjanisha30gowda@gmail.com

84% match

Loading thumbnail…

ICE8_Map

This example shows a world map where countries are colored according to sample population data using a sequential blue color scale. Hovering over a country highlights it in orange, and moving the cursor away restores its original fill. The map is rendered as SVG with the `d3.geoNaturalEarth1` projection and `d3.geoPath` using TopoJSON data from world-atlas, while population values are mapped through `d3.scaleSequential` and `d3.interpolateBlues`.

Ggayathrisaxena23@gmail.com

84% match