Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Vibecoding Starter

✓ Published0🌍 Public
SSathviKankanala@my.unt.edu
Last edited Nov 11, 2025
Created on Nov 11, 2025
Forked from HTML 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.

AI-generated description
MIT Licensed

Similar vizzes

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
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 React & D3 Starter

This example shows a world population map where individual countries are shaded with a blue sequential color scale, and hovering over a country reveals its name and population in millions via a tooltip. It renders a Natural Earth projection using `d3.geoPath` and `d3.geoNaturalEarth1`, with geographic data loaded from TopoJSON via `topojson.feature` and country names from a TSV file. The code uses `d3.scaleSequential` with `d3.interpolateBlues` to map population values to fill colors, and SVG paths for country boundaries.

Ppvvaishnavi93@gmail.com
90% match
Loading thumbnail…

Fork of Fork of D3 Starter-maps

This choropleth displays world population figures for a selection of countries, with darker blues representing higher populations and gray for countries without data. It uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to render country boundaries from a TopoJSON world-atlas dataset. Population values are mapped through a sequential `d3.scaleSequential` with an `interpolateBlues` color scale. Hovering reveals a tooltip with the country name and population in millions, powered by SVG `title` elements.

Aaddalalikitha15@gmail.com
88% 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
88% 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
87% 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
87% match