Shish's Ice 8- Making Maps

100%

Shish's Ice 8- Making Maps

✓ Published1🌍 Public

Last edited Nov 10, 2025

Created on Nov 10, 2025

Forked from Map

This interactive world map visualizes synthetic 2025 population and GDP per capita data for major countries using a Natural Earth projection. Users click toggle buttons to switch between two sequential color scales, with D3 transitions animating the country fill colors over 900 milliseconds. The visualization loads TopoJSON world-atlas data via d3.json, renders paths with d3.geoPath, and displays graticules, a legend, and hover tooltips through D3 event handlers. Countries without data appear gray, while the legend gradient updates only for the population metric.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shish's Ice 8- Map

This choropleth maps sample population figures by country, joining an inline CSV to a world atlas via matching country names. The visualization uses D3 v7’s `geoNaturalEarth1` projection, `geoPath`, and `scaleSequential` with an YlGnBu interpolator, rendering graticules and country polygons as SVG paths. Tooltips appear on hover, and a TopoJSON (countries-110m.json) data source supplies the geometry.

SSai Shishir Koppula

87% match

Loading thumbnail…

ICE-8

This visualization presents global GDP data for 2022 on an interactive world map. Countries are colored using a sequential logarithmic scale with the RdYlGn interpolator, where hovering reveals tooltips with country names and values. A second map displays countries with rainbow-hued fills using d3.scaleSequential with interpolateRainbow, also featuring interactive tooltips. Both maps use d3.geoPath with different projections (geoEqualEarth and geoNaturalEarth1), loading geographic data from world-atlas TopoJSON and economic data from a CSV file.

HHARISH ARMUGAM

82% 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

82% match

Loading thumbnail…

ICE8-world-map

This world map visualizes population values for 20 countries using a sequential blue color scale, with lighter shades for smaller populations and darker shades for larger ones. Hovering over a country displays a tooltip with its name and population. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering SVG paths from TopoJSON data, and d3.scaleSequential with d3.interpolateBlues for coloring. Population data comes from a local CSV file, while country boundaries load from the world-atlas TopoJSON collection.

SSai Charan

81% match

Loading thumbnail…

ICE 8 making map

This choropleth map shows global population by country in 2022, with darker blue shading indicating higher population counts. The visualization uses d3.geoNaturalEarth1 for the map projection and d3.geoPath to render country outlines from TopoJSON data loaded via the world-atlas package. Population values are joined to country geometries using CSV data from a GitHub repository, with missing countries shown in gray. A sequential square-root color scale (d3.scaleSequentialSqrt) maps population values to the interpolateBlues color scheme, and hovering reveals a tooltip with the exact population via appended `<title>` elements.

Aadithiarikatla@gmail.com

81% match

Loading thumbnail…

ICE 8 making map

A world map shades each country according to its latest reported population, using a yellow-orange-red sequential color scale; countries without data appear gray. Hovering reveals a tooltip with the country name and its population. The visualization loads a world TopoJSON atlas and a population CSV, then projects the GeoJSON features with `d3.geoNaturalEarth1` and draws them as SVG paths via `d3.geoPath`. A linear gradient legend with axis ticks shows the population range.

Aadithiarikatla@gmail.com

81% match

Loading thumbnail…

ICE-8 world map

This visualization displays a world map using an equal-area natural Earth projection, with countries rendered as light green filled paths and the globe’s sphere filled in sky blue. It loads geographic data from a remote TopoJSON file, converts it to GeoJSON features via the `topojson.feature` API, and projects them using `d3.geoNaturalEarth1` and `d3.geoPath`. The map is drawn as SVG elements, with a stroked outline for each country and a semi-transparent border.

SSharmilaChowdhari

80% match

Loading thumbnail…

ICE8

This visualization displays a world map where each country is colored according to its population using a logarithmic rainbow color scale. The map is rendered as SVG using D3.js v7 with a Natural Earth projection and TopoJSON data loaded from world-atlas. Countries are drawn as paths using d3.geoPath, with colors assigned via d3.scaleSequentialLog and d3.interpolateRainbow based on population values from an embedded dataset. Hovering over a country triggers a tooltip showing additional information.

Ppashamsahithi2391@gmail.com

80% match