Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Mmhzahdeh@dons.usfca.edu

Last edited Jan 18, 2026

Created on Jan 18, 2026

This example displays a choropleth of Middle Eastern countries on a Mercator projection, highlighting listed nations and showing their assigned ID numbers in a tooltip on hover. It loads world GeoJSON data and uses `d3.geoMercator` with `fitExtent` to focus the map on the relevant region. The SVG visualization relies on `d3.json` for data loading and `d3.select` for DOM interaction, with country shapes styled and tooltips positioned using CSS transitions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example displays a choropleth map of the world, coloring countries by their sample population values using a sequential blue color scale. The map is rendered with SVG and D3.js’s `d3.geoMercator` projection and `d3.geoPath`. It loads real world geometry from a local GeoJSON file (`countries.geo.json`) and overlays tooltips via SVG `title` elements. Population data is provided as a static JavaScript object, with missing countries shown in gray.

RRuthvik Bairaboina

86% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows a world map with countries colored by population using a threshold scale, rendered as SVG paths via `d3.geoPath` with a Mercator projection. The choropleth uses a quantized color range from light to dark blue, and hover interactions trigger tooltips built with `d3-tip`, displaying each country’s name and population. Data comes from a TopoJSON file and a TSV of population figures, both loaded asynchronously with the queue library.

Ddaniel

85% match

Loading thumbnail…

Fork of HTML Starter

This example displays a world map colored by values joined from a CSV dataset, with a hover tooltip showing each country’s name and numeric value. It renders an SVG using D3 v7’s `d3.geoNaturalEarth1` projection and `d3.geoPath`, loading country boundaries from TopoJSON via `world-atlas`. Country colors are assigned through a sequential `d3.scaleSequential` interpolator, while the CSV is joined using a `Map`. The tooltip appears on mouseover events, positioned at the cursor.

Ssaiabhishekmunnangi@gmail.com

84% match

Loading thumbnail…

Fork of Fork of HTML Starter

This interactive choropleth map visualizes global population by country, with each nation color-coded according to population size using a threshold scale and a blue sequential color palette. Hovering over a country highlights its borders and displays a tooltip showing the country name and exact population figure. The visualization loads geographic data from a TopoJSON file and population statistics from a TSV file, then renders the map using `d3.geoMercator` projection and `d3.geoPath`. Tooltips are implemented with the d3-tip library, while the queue library manages asynchronous data loading.

Sshindeayush76@gmail.com

81% match

Loading thumbnail…

Fork of HTML Starter

This choropleth map visualizes world population data from a CSV file, displaying countries in a sequential blue color scale based on their population size. It renders an SVG with D3 v6, using `d3.geoNaturalEarth1` and `d3.geoPath` to draw country boundaries from TopoJSON world-atlas data. Interactive tooltips appear on mousemove, showing country names and population values, while a gradient legend indicates the color scale up to 1.5 billion people.

BBalaji Dasari

81% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays world countries colored in light green on a blue sphere, with hover effects turning countries red. It uses D3 v5 and TopoJSON to load and render world geography from the world-atlas dataset. The code combines `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interactive panning and zooming. Country names are joined from a TSV file and shown as SVG `<title>` tooltips.

Ggharakhani1986

81% match

Loading thumbnail…

Fork of World Map with D3.js!

This example displays an interactive world map where each country is rendered as a green SVG path with a black stroke. A blue sphere provides the background, and hovering over a country highlights it in orange. Built with D3.js v5 and TopoJSON, it uses `d3.geoPath` with `d3.geoEquirectangular` projection to draw the map from the world-atlas countries-110m.json data source. The SVG rendering is styled via CSS classes, with hover effects defined in the stylesheet.

BBajiSharifPatan@my.unt.edu

80% match

Loading thumbnail…

HTML Starter

This example displays a world map using the geoMercator projection, with country boundaries rendered as SVG paths. The map is generated from the world-atlas countries-110m GeoJSON dataset, loaded via d3.json. The code imports d3.geoPath and d3.geoMercator from d3.v5, and topojson’s feature function to extract country features. The resulting paths are appended to an SVG canvas of 960 by 500 pixels, demonstrating a minimal HTML setup with inline styling.

PPaul Chen

80% match