Skip to main content
100%

Fork of React & D3 Starter

✓ Published1🌍 Public
Ppavanireddy03sai@gmail.com
Last edited Apr 12, 2026
Created on Apr 12, 2026
Forked from React & D3 Starter

This example visualizes a world map highlighting selected countries based on custom data. It loads country boundaries as TopoJSON from the world-atlas package, converts them to GeoJSON using `topojson.feature`, and projects them with `d3.geoMercator` fitted to the viewport. The SVG path elements are drawn with `d3.geoPath`, and each country receives a fill color determined by a lookup table: orange for the USA, India, and China, gray otherwise. The React component integrates with D3 through a ref and the `useEffect` hook, displaying a simple text message from D3 alongside the map.

AI-generated description
MIT Licensed

Similar vizzes