FZ_ICE8_Q1_WorldMap

100%

FZ_ICE8_Q1_WorldMap

✓ Published2🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

This choropleth map visualizes a sample “Digital Access Score” by country, using a blue color scale to represent the mock 0–100 indicator values. Built with D3 v7, the visualization uses a Natural Earth projection and `d3.geoPath` to render countries from TopoJSON data. It displays a graticule grid on a soft blue ocean sphere, with an interactive hover tooltip that reveals each nation’s score and name. The example demonstrates linking geographic boundaries with attribute values, with a legend and header clarifying the illustrative nature of the data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This choropleth map uses a Yellow-Orange-Red sequential color scale to show population density values for a subset of countries, with denser regions appearing darker. It plots country shapes from the world-atlas TopoJSON file onto an SVG canvas using the D3.js `geoNaturalEarth1` projection and `geoPath()` generator. Population figures are loaded from a CSV file and stored in a JavaScript `Map` for lookup by country name, with missing or unknown countries rendered in a neutral gray. Hovering over a country triggers a tooltip that displays the country’s name and density value, and a legend with color swatches below the map communicates the scale.

Mmadalahyndavi123@gmail.com

82% match

Loading thumbnail…

FZ_ICE8_Q1_USMap

This choropleth map of the United States colors each state by a fictional “CS & Tech Engagement Score” (0–100), representing student participation in coding clubs, hackathons, and STEM events. Hovering over a state highlights it and displays a tooltip with the score. Built with D3 v7, the visualization uses `d3.geoAlbersUsa` for projection, `d3.geoPath` for rendering state boundaries from TopoJSON data, and SVG polygons for interactive state shapes. The sample dataset is defined inline as a JavaScript Map, and the tooltip follows the mouse using fixed positioning.

Sshaikfayazfz64@gmail.com

82% match

Loading thumbnail…

Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This interactive world map displays country boundaries on a natural Earth projection, with each country shaded in a sequential blue color scale and identified by name via a tooltip on hover. The visualization loads TopoJSON data from the world-atlas package, converts it to GeoJSON features using topojson-client, and renders the map as SVG paths via `d3.geoPath` with a `d3.geoNaturalEarth1` projection. The D3.js v7 code also implements interactive mouse events to show tooltips with country names.

Mmadalahyndavi123@gmail.com

81% match

Loading thumbnail…

ICE8 - World Map

This visualization displays a world map using a Natural Earth projection, with countries filled in pink and outlined in black against a blue ocean sphere. It uses the d3 library’s geoNaturalEarth1 and geoPath to render geographic shapes from a TopoJSON dataset, while the topojson library’s feature function extracts country boundaries. Interactive hover effects change the fill color of individual countries to dark blue.

AAmanullah007

80% match

Loading thumbnail…

World Map-ICE8

A choropleth-style world map displays countries as light red filled regions with white strokes against a light blue sphere. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render geographic outlines, reading GeoJSON TopoJSON data from a GitHub gist. The `topojson` library’s `feature` function extracts country boundaries, which are then drawn as SVG paths within a 960×500 viewport.

HHarshinireddyy19

80% match

Loading thumbnail…

ICE-8 WORLD MAP

This visualization displays a world map using a natural Earth projection, rendering countries as green filled polygons with blue strokes. The code loads geographic data from the world-atlas TopoJSON source and converts it using `topojson.feature`, then applies `d3.geoPath` with `d3.geoNaturalEarth1` to generate SVG paths. A blue sphere outline highlights the globe’s boundary. The countries appear as static shapes without interaction, with styling defined via CSS classes for the sphere and country paths.

Ssaidhiraj16

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

80% match

Loading thumbnail…

ICE-8 1A kumar danam

This choropleth map visualizes a small dataset of numeric values for selected countries using a dark-to-light blue-green color scale. It displays world country boundaries from the `world-atlas` TopoJSON source, rendered as SVG paths via `d3.geoPath` with a Natural Earth projection. The map uses `topojson.feature` to process countries, `d3.scaleSequential` with an `interpolateYlGnBu` scheme for coloring, and a legend built with `d3.axisBottom`. Hovering over a country reveals its ISO numeric ID and value via a tooltip, with missing data shown in gray.

KKumar Danam

80% match