Skip to main content
SimilarExport ZIP
100%

ICE-8 Hasini Map

✓ Published0🌍 Public
Hhasinipriyad7@gmail.com
Last edited Nov 2, 2025
Created on Nov 2, 2025
Forked from Map

This visualization presents two choropleth maps: one of global countries and another of U.S. states, displaying literacy rates. The world map uses a static color for all countries, while the U.S. map colors each state according to its literacy percentage, sourced from fictional data. Built with D3.js v7 and the topojson-client, the example projects geographic data using `d3.geoNaturalEarth1` and `d3.geoAlbersUsa`, and renders shapes via `d3.geoPath`. A color gradient legend and interactive tooltips, powered by `d3.select` and mouse events, reveal individual state values.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 Sanjana

This visualization presents global literacy rates through a static world map alongside a U.S. state-level map with simulated data values from 70 to 100. The U.S. map uses a soft blue gradient color scale via `d3.scaleSequential` and `d3.interpolateGnBu`, with hover tooltips showing state names and values. Rendered in SVG using `d3.geoPath` with `d3.geoMercator` and `d3.geoAlbersUsa` projections, it includes a legend built with `d3.axisBottom`. Geographic data comes from World Atlas and US Atlas TopoJSON sources, while state values are randomly auto-generated in the code.

Mmynedisanjana@gmail.com
86% match
Loading thumbnail…

ICE-8 Hasini

This example presents a side-by-side comparison of two geographic visualizations: a world map displaying country borders with no data, and a map of India colored by state-wise literacy rates from Census 2011. The India map uses a sequential yellow-green color scale, ranging from 60 to 95 percent, to encode literacy data. It is rendered using `d3.geoMercator` and `d3.geoPath` on an SVG canvas, with interactive tooltips appearing on hover. The project loads geographical data from `visionscarto-world-atlas` and `india-atlas` JSON sources.

Hhasinipriyad7@gmail.com
85% match
Loading thumbnail…

ICE 8

This visualization displays a choropleth map of the United States, with each state filled by a categorical color from the D3 category10 scheme. The map uses the geoAlbersUsa projection and renders state boundaries as SVG paths with white strokes via d3.geoPath. It loads US Atlas TopoJSON data from a CDN, extracts state features using topojson’s feature function, and shows state names as tooltips on hover.

66264kusuma@gmail.com
82% match
Loading thumbnail…

ICE-8 1A Ankit goud Poodhari

This D3.js visualization presents two interactive choropleth maps. The global map displays internet usage as a percentage of the population across countries, using the `d3.geoMercator()` projection and a blue sequential color scale. The United States map depicts renewable energy share per state, employing the `d3.geoAlbersUsa()` projection with `d3.geoPath()` for rendering. Both maps load TopoJSON data from external sources using `d3.json()`, processing it with the `topojson-client` library to generate SVG paths with tooltips.

Aankitgoudpoodhari07@gmail.com
81% match
Loading thumbnail…

Fork of ICE-8_hd

This visualization pairs a world map with a U.S. choropleth map, drawing on D3.js v7. The world map uses the Aitoff projection via `d3.geoAitoff` and `d3.geoPath` with `topojson-client` to render country shapes. The U.S. map projects states using `d3.geoAlbersUsa` and shades them according to median household income, with a color legend and hover tooltips. A graticule grid overlays the world map. Both maps use SVG paths, and the income datapoints are embedded as CSV text. The title notes the U.S. map is a choropleth, with hover states revealing exact values.

HHarshithaDontha@my.unt.edu
80% 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
80% match
Loading thumbnail…

ICE 8-1Q Sadvik

This visualization presents two interactive geographic maps side by side: a world map using the Natural Earth projection and a United States map using the Albers USA projection. The world map colors countries by population (in millions) using a sequential blue interpolator, while the US map shades states by crime rate using a green interpolator. Built with D3 v7 and TopoJSON, both maps load geographic data from CDN-hosted world-atlas and us-atlas JSON files, rendering SVG paths via `d3.geoPath` with hover tooltips displaying country or state names and their corresponding values. Non-highlighted regions appear gray, indicating missing data.

SSadvik
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