Skip to main content
SimilarExport ZIP
100%

Fork of GeoVisualization - Choropleth map of the world

✓ Published0🌍 Public
YYerlan Yeszhanov
Last edited Nov 25, 2022
Created on Nov 25, 2022

This choropleth map of the world visualizes population by country using a threshold color scale, with dark blue representing higher populations. The map renders in SVG and responds to mouse-over and mouse-leave events by adjusting the opacity of all countries and highlighting the hovered one with a black stroke. The code loads GeoJSON boundaries and CSV population data via `Promise.all`, projects the paths using `d3.geoPath` with a Mercator projection, and colors each country through `d3.scaleThreshold` and `d3.schemeBlues`. Interactions are handled with D3 transitions for smooth visual feedback.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of GeoVisualization - Choropleth map of the world

This example shows a choropleth map of the world coloring each country by population, with a blue threshold color scale. It uses `d3.geoPath` and `d3.geoMercator` to project and draw country boundaries from a GeoJSON file, while population data is loaded from a CSV and mapped by country code. Mouseover transitions dim all countries except the hovered one, which gains a black stroke. The visualization is built with D3 v6 and rendered as SVG, using `d3.scaleThreshold` and `d3.schemeBlues[7]` for the color encoding.

EEjenavi16
93% match
Loading thumbnail…

Fork of GeoVisualization - Choropleth map of the world

This visualization presents an orthographic choropleth map of the world, coloring each country by its population using a threshold scale with sequential blue shades. The code loads GeoJSON country boundaries and CSV population data via `d3.json` and `d3.csv`, projecting them with `d3.geoOrthographic` and rendering paths through `d3.geoPath`. Hover interactions trigger opacity transitions and stroke highlights on the SVG countries, while all elements are drawn with D3 v6 in a React environment.

KKetaki789
93% match
Loading thumbnail…

GeoVisualization - Choropleth map of the world

This example presents a choropleth map of the world, coloring each country according to its population using a threshold color scale with sequential blues. The visualization uses D3.js (v6) to load GeoJSON and CSV data, projecting the map with a Mercator projection via `d3.geoMercator` and drawing paths with `d3.geoPath`. Interactivity highlights countries on mouseover by adjusting opacity and stroke, while the SVG rendering displays the result.

AAlark Joshi
89% 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
86% 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
86% match
Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This choropleth map colors world countries by population, using darker blues for more populous nations while unlisted countries appear gray. A legend explains the visual encoding. The example loads world-atlas TopoJSON, converts it to GeoJSON features using topojson-client, and projects the map with d3.geoNaturalEarth1 and d3.geoPath. A d3.scaleLinear maps population values to a light-to-dark color range, and SVG paths render each country with tooltips showing population figures.

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

Fork of React & D3 Vibecoding Starter

This choropleth world map visualizes population data for nine countries, using darker blue shades to represent higher populations. It loads country boundaries from the world-atlas TopoJSON dataset, converts them to GeoJSON with topojson-client’s feature function, and renders them as SVG paths via d3.geoPath with a Natural Earth projection. A d3.scaleLinear color scale maps population values to a light-to-dark blue range, and each country includes an SVG title tooltip showing the name and population in millions.

SSathviKankanala@my.unt.edu
86% match