Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Starter for Q1 SDV

✓ Published0🌍 Public
RRuthvik Bairaboina
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from React & D3 Starter

This choropleth displays global unemployment rates by country using a green color scale, with data embedded directly in the code for 30 nations. Tooltips reveal country names and rates on hover. The map renders as SVG using `d3.geoPath` with a Natural Earth projection, `d3.geoGraticule` for latitude/longitude lines, and TopoJSON country boundaries. Built with React and D3 v7, the visualization loads world geometry and unemployment data as static objects.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React Starter

A choropleth map of U.S. county unemployment rates colors each county with a blue sequential scale, using a quantize scale with nine bins from 1% to 10%. The visualization loads unemployment data from a CSV file and county and state boundaries from a TopoJSON file. The React app renders an SVG via D3’s `geoPath` projection, with state borders stroked in white and hover tooltips showing county names, state names, and exact rates.

AAndrey Getmanov
83% match
Loading thumbnail…

Fork of React & D3 Starter - ICE_8_1

A choropleth map of world GDP in trillions of USD, colored on a red scale from light to bright red, with country boundaries in white and a graticule overlay. It uses D3 v7’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to render the SVG, with TopoJSON data for country shapes. A hover tooltip displays country-specific GDP values from a hardcoded dataset.

Vvijaysaichigullapally1@gmail.com
82% 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
81% match
Loading thumbnail…

Fork of React Starter

A choropleth map of world countries colors each nation by continent using a D3 geo path generator and a color scale. The visualization renders as an SVG globe inside a React component built with React hooks, fetching geographic data from the World Atlas TopoJSON and TSV files. Hovering reveals country names and indices appended as SVG title elements, while a transparent sphere outline frames the map. The code leverages d3.json, d3.tsv, and d3.geoPath to construct the projection and interactivity.

IIgor Bojković
81% match
Loading thumbnail…

Fork of React & D3 Starter

This example presents a world map rendered in an SVG container, visually distinguishing a subset of countries by coloring them orange according to a small, hardcoded population dataset, while all other nations appear in gray. It uses the `d3.geoMercator` and `d3.geoPath` APIs to project and draw geographic boundaries from a TopoJSON source loaded via `d3.json`. The map is built within a React application, and the code demonstrates a non-reactive workflow by appending paths directly to the SVG element.

Kkodalijagadeesh9@gmail.com
81% 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
81% match
Loading thumbnail…

Fork of React & D3 Starter - ice 8 - 1

This choropleth map shows the number of internet users by country in millions for 2022, using a blue color scale to represent the range from small (e.g., Switzerland, Australia) to large values (e.g., China, India). It renders a Natural Earth projection of the world with a graticule layer and a hover tooltip, built with D3 v7’s `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. The code assigns country-specific values via an ISO3 lookup table mapped from TopoJSON’s numeric IDs.

Vvijaysaichigullapally1@gmail.com
80% 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
80% match