Skip to main content
SimilarExport ZIP
100%

Fork of Fork of React & D3 Vibecoding Starter

✓ Published0🌍 Public
SSathviKankanala@my.unt.edu
Last edited Nov 11, 2025
Created on Nov 11, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This choropleth map visualizes world population data by country, where darker blue tones correspond to higher population figures. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1`, with country boundaries drawn using `d3.geoPath` and rendered as SVG paths. Population values are matched to country names from the world-atlas TopoJSON source, then mapped to a color scale using `d3.scaleLinear` from light to dark blue. The code loads world-atlas data via TopoJSON and processes it with `feature` from the topojson-client library to convert it to GeoJSON features for rendering.

Ssaisanthoshravula@my.unt.edu
95% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This choropleth map visualizes world population data by country, where darker blue tones correspond to higher population figures. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1`, with country boundaries drawn using `d3.geoPath` and rendered as SVG paths. Population values are matched to country names from the world-atlas TopoJSON source, then mapped to a color scale using `d3.scaleLinear` from light to dark blue. The code loads world-atlas data via TopoJSON and processes it with `feature` from the topojson-client library to convert it to GeoJSON features for rendering.

Ssaisanthoshravula@my.unt.edu
95% 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
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
88% match
Loading thumbnail…

Fork of Fork of map exemple

This example displays a choropleth world map where each country is colored according to its population estimate, ranging from red to dark maroon. The visualization uses d3.geoMercator for projection, d3.geoPath for rendering SVG paths, and topojson.feature to convert TopoJSON data from the World Atlas 50m dataset. Population values are loaded from a TSV file and mapped to colors via d3.scaleLinear. Hovering highlights countries in purple, and d3.zoom enables pan and zoom interactions.

Nnsatyaprakash22
88% 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
88% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example displays a choropleth map of U.S. states, using darker blue fills to indicate higher population values from a hardcoded dataset for fourteen states, with unlisted states shown in light gray. It loads TopoJSON from the us-atlas package, converts it to GeoJSON with `feature`, and renders paths via `d3.geoPath` and the `d3.geoAlbersUsa` projection. A linear color scale maps population extents to a blue range, and hover tooltips appear through SVG `title` elements. The map uses D3 v7 and TopoJSON-client, with an SVG rendering approach.

Ssaisanthoshravula@my.unt.edu
88% match