Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Starter - ICE_8_1

✓ Published0🌍 Public
Vvijaysaichigullapally1@gmail.com
Last edited Nov 8, 2025
Created on Nov 6, 2025
Forked from React & D3 Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of World Choropleth

This interactive choropleth map visualizes world countries colored by economy type, using a Natural Earth projection rendered as SVG through `d3.geoPath` and `geoNaturalEarth1`. The map, populated with country boundaries from TopoJSON and attribute data from a TSV source, supports zooming via `d3.zoom` and displays detailed country information—including population, GDP, and continent—in a custom tooltip on hover. A clickable legend highlights countries matching each economy category, while country labels are placed with overlap detection to maintain readability.

NNita
83% match
Loading thumbnail…

Fork of React & D3 Starter- ICE_8_1.2(country)

This choropleth map shows estimated tourist visits per U.S. state for 2024, using a red color scale from light to dark red to indicate increasing visitor counts. The visualization renders a U.S. map with state boundaries defined by white strokes, using the `d3.geoAlbersUsa` projection and `d3.geoPath` to generate SVG paths. A hover tooltip displays state-specific data, while a legend and caption provide context. The map is built with D3.js v7, pulling TopoJSON geographic data via the topojson-client library, with a fixed sample dataset embedded in the code.

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

Fork of React & D3 Starter for Q1 SDV

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.

RRuthvik Bairaboina
82% match