Interactive World Map with React and D3

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Global Invitation Network</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: "Inter", sans-serif;
            background: linear-gradient(to bottom right, #020617, #0f172a, #020617);
            color: #f8fafc;
            min-height: 100vh;
        }

.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

.card {
            background: rgba(30, 41, 59, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(148, 163, 184, 0.1);
            border-radius: 1rem;
            padding: 1.5rem;
        }

.country-card {
            background: rgba(30, 41, 59, 0.6);
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 0.75rem;
            padding: 0.75rem;
            transition: all 0.2s;
            cursor: pointer;
        }

.country-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

.region-button {
            width: 100%;
            text-align: left;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            transition: all 0.2s;
            border: 1px solid transparent;
            background: transparent;
            color: #cbd5e1;
            cursor: pointer;
        }

.region-button:hover {
            background: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.3);
        }

.region-button.active {
            background: #3b82f6;
            color: white;
            font-weight: 600;
        }

.stat-bar {
            height: 8px;
            border-radius: 4px;
            transition: width 0.5s ease;
        }

.tooltip {
            position: fixed;
            background: rgba(30, 41, 59, 0.95);
            backdrop-filter: blur(12px);
            border: 2px solid #3b82f6;
            border-radius: 0.75rem;
            padding: 1rem;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            z-index: 1000;
        }

svg {
            width: 100%;
            height: 100%;
        }

@media (max-width: 1024px) {
            .grid-responsive {
                grid-template-columns: 1fr !important;
            }
        }

@media (max-width: 767px) and (min-width: 640px) {
            .grid-responsive {
                grid-template-columns: 1fr !important;
                grid-template-rows: 600px auto auto !important;
                gap: 1.5rem !important;
            }

.map-section {
                grid-column: 1 !important;
                grid-row: 1 !important;
            }

.middle-row {
                grid-column: 1 !important;
                grid-row: 2 !important;
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 1.5rem !important;
            }

.countries-section {
                grid-column: 1 !important;
                grid-row: 3 !important;
            }

.sidebar-section {
                display: none !important;
            }
        }

@media (max-width: 639px) {
            .grid-responsive {
                grid-template-columns: 1fr !important;
                grid-template-rows: 500px auto auto auto !important;
                gap: 1.5rem !important;
            }

.map-section {
                grid-column: 1 !important;
                grid-row: 1 !important;
            }

.regions-mobile {
                grid-column: 1 !important;
                grid-row: 2 !important;
                display: block !important;
            }

.statistics-mobile {
                grid-column: 1 !important;
                grid-row: 3 !important;
                display: block !important;
            }

.countries-section {
                grid-column: 1 !important;
                grid-row: 4 !important;
            }

.sidebar-section,
            .middle-row {
                display: none !important;
            }
        }

.middle-row,
        .regions-mobile,
        .statistics-mobile {
            display: none;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    
    <script type="text/babel">
        const {useState, useEffect, useRef} = React;

const regions = [
            {
                name: "Southeast Asia",
                color: "#10b981",
                countries: [
                    {name: "Singapore", code: "SGP", coordinates: [1.3521, 103.8198]},
                    {name: "Thailand", code: "THA", coordinates: [15.87, 100.9925]},
                    {name: "Indonesia", code: "IDN", coordinates: [-0.7893, 113.9213]},
                    {name: "Vietnam", code: "VNM", coordinates: [14.0583, 108.2772]},
                    {name: "Philippines", code: "PHL", coordinates: [12.8797, 121.774]},
                    {name: "Brunei", code: "BRN", coordinates: [4.5353, 114.7277]},
                    {name: "Cambodia", code: "KHM", coordinates: [12.5657, 104.991]},
                ],
            },
            {
                name: "South Asia",
                color: "#3b82f6",
                countries: [
                    {name: "India", code: "IND", coordinates: [20.5937, 78.9629]},
                    {name: "Bangladesh", code: "BGD", coordinates: [23.685, 90.3563]},
                    {name: "Sri Lanka", code: "LKA", coordinates: [7.8731, 80.7718]},
                    {name: "Pakistan", code: "PAK", coordinates: [30.3753, 69.3451]},
                    {name: "Nepal", code: "NPL", coordinates: [28.3949, 84.124]},
                ],
            },
            {
                name: "East Asia",
                color: "#8b5cf6",
                countries: [
                    {name: "China", code: "CHN", coordinates: [35.8617, 104.1954]},
                    {name: "Japan", code: "JPN", coordinates: [36.2048, 138.2529]},
                    {name: "South Korea", code: "KOR", coordinates: [35.9078, 127.7669]},
                    {name: "Taiwan", code: "TWN", coordinates: [23.6978, 120.9605]},
                ],
            },
            {
                name: "Middle East",
                color: "#f59e0b",
                countries: [
                    {name: "Saudi Arabia", code: "SAU", coordinates: [23.8859, 45.0792]},
                    {name: "Qatar", code: "QAT", coordinates: [25.3548, 51.1839]},
                    {name: "Emirates", code: "ARE", coordinates: [23.4241, 53.8478]},
                    {name: "Oman", code: "OMN", coordinates: [21.4735, 55.9754]},
                    {name: "Syria", code: "SYR", coordinates: [34.8021, 38.9968]},
                    {name: "Jordan", code: "JOR", coordinates: [30.5852, 36.2384]},
                ],
            },
            {
                name: "Europe",
                color: "#ec4899",
                countries: [
                    {name: "United Kingdom", code: "GBR", coordinates: [55.3781, -3.436]},
                    {name: "France", code: "FRA", coordinates: [46.2276, 2.2137]},
                    {name: "Germany", code: "DEU", coordinates: [51.1657, 10.4515]},
                    {name: "Italy", code: "ITA", coordinates: [41.8719, 12.5674]},
                    {name: "Spain", code: "ESP", coordinates: [40.4637, -3.7492]},
                    {name: "Türkiye", code: "TUR", coordinates: [38.9637, 35.2433]},
                ],
            },
            {
                name: "Africa",
                color: "#ef4444",
                countries: [
                    {name: "Egypt", code: "EGY", coordinates: [26.8206, 30.8025]},
                    {name: "Morocco", code: "MAR", coordinates: [31.7917, -7.0926]},
                    {name: "South Africa", code: "ZAF", coordinates: [-30.5595, 22.9375]},
                    {name: "Kenya", code: "KEN", coordinates: [-0.0236, 37.9062]},
                ],
            },
            {
                name: "Oceania",
                color: "#06b6d4",
                countries: [
                    {name: "Australia", code: "AUS", coordinates: [-25.2744, 133.7751]},
                    {name: "New Zealand", code: "NZL", coordinates: [-40.9006, 174.886]},
                ],
            },
        ];

const WIDTH = 1200;
        const HEIGHT = 600;

const projection = d3
            .geoMercator()
            .scale(WIDTH / (2 * Math.PI))
            .translate([WIDTH / 2, HEIGHT / 2]);

const pathGenerator = d3.geoPath().projection(projection);

function InteractiveWorldMap({selectedRegion}) {
            const svgRef = useRef(null);
            const [geojson, setGeojson] = useState(null);
            const [selectedCountry, setSelectedCountry] = useState(null);
            const [mousePos, setMousePos] = useState({x: 0, y: 0});
            const mapContainerRef = useRef(null);

useEffect(() => {
                const url = "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson";
                d3.json(url)
                    .then((data) => {
                        setGeojson(data);
                    })
                    .catch((err) => {
                        console.error("Failed to load GeoJSON:", err);
                    });
            }, []);

useEffect(() => {
                if (!geojson) return;
                const svg = d3.select(svgRef.current);
                svg.selectAll("*").remove();

const defs = svg.append("defs");
                defs
                    .append("pattern")
                    .attr("id", "grid")
                    .attr("width", 40)
                    .attr("height", 40)
                    .attr("patternUnits", "userSpaceOnUse")
                    .append("path")
                    .attr("d", "M 40 0 L 0 0 0 40")
                    .attr("fill", "none")
                    .attr("stroke", "#334155")
                    .attr("stroke-width", 0.5)
                    .attr("opacity", 0.3);

svg
                    .append("rect")
                    .attr("width", WIDTH)
                    .attr("height", HEIGHT)
                    .attr("fill", "url(#grid)");

const worldGroup = svg.append("g").attr("class", "world-base");
                worldGroup
                    .selectAll("path")
                    .data(geojson.features)
                    .join("path")
                    .attr("d", pathGenerator)
                    .attr("fill", "rgba(148,163,184,0.04)")
                    .attr("stroke", "rgba(148,163,184,0.06)")
                    .attr("stroke-width", 0.3);

const featureByName = new Map();
                geojson.features.forEach((f) => {
                    const n = f.properties && f.properties.name ? f.properties.name.toLowerCase() : null;
                    if (n) featureByName.set(n, f);
                });

const countryGroup = svg.append("g").attr("class", "translated-countries");

regions.forEach((region) => {
                    region.countries.forEach((c) => {
                        if (selectedRegion && region.name !== selectedRegion) {
                            return;
                        }

const targetNameLower = c.name.toLowerCase();

let feature =
                            featureByName.get(targetNameLower) ||
                            featureByName.get(targetNameLower.replace("turkiye", "turkey")) ||
                            featureByName.get(targetNameLower.replace("united kingdom", "united kingdom of great britain and northern ireland")) ||
                            null;

if (!feature) {
                            for (const [k, f] of featureByName.entries()) {
                                if (k.includes(targetNameLower) || targetNameLower.includes(k)) {
                                    feature = f;
                                    break;
                                }
                            }
                        }

if (!feature) {
                            return;
                        }

const g = countryGroup.append("g").attr("class", "country-wrapper");
                        const path = g
                            .append("path")
                            .datum(feature)
                            .attr("d", pathGenerator)
                            .attr("fill", region.color)
                            .attr("opacity", selectedRegion ? 0.3 : 0.15)
                            .attr("stroke", region.color)
                            .attr("stroke-width", selectedRegion ? 0.8 : 0.4)
                            .style("cursor", "pointer");

let centroid;
                        try {
                            centroid = pathGenerator.centroid(feature);
                            if (!Array.isArray(centroid) || isNaN(centroid[0])) {
                                const bounds = pathGenerator.bounds(feature);
                                centroid = [
                                    (bounds[0][0] + bounds[1][0]) / 2,
                                    (bounds[0][1] + bounds[1][1]) / 2,
                                ];
                            }
                        } catch (e) {
                            const bounds = pathGenerator.bounds(feature);
                            centroid = [
                                (bounds[0][0] + bounds[1][0]) / 2,
                                (bounds[0][1] + bounds[1][1]) / 2,
                            ];
                        }

const desired = projection([c.coordinates[1], c.coordinates[0]]);
                        const dx = desired[0] - centroid[0];
                        const dy = desired[1] - centroid[1];

g.attr("transform", `translate(${dx},${dy})`);

g.on("mouseenter", (event) => {
                            setSelectedCountry(c);
                            const mapRect = mapContainerRef.current.getBoundingClientRect();
                            const relativeX = event.clientX - mapRect.left;
                            const relativeY = event.clientY - mapRect.top;
                            setMousePos({x: relativeX, y: relativeY});
                            path.transition().duration(120).attr("opacity", selectedRegion ? 0.6 : 0.45);
                        });

g.on("mousemove", (event) => {
                            const mapRect = mapContainerRef.current.getBoundingClientRect();
                            const relativeX = event.clientX - mapRect.left;
                            const relativeY = event.clientY - mapRect.top;
                            setMousePos({x: relativeX, y: relativeY});
                        });

g.on("mouseleave", () => {
                            setSelectedCountry(null);
                            path.transition().duration(120).attr("opacity", selectedRegion ? 0.3 : 0.15);
                        });

g.append("circle")
                            .attr("cx", desired[0] - dx)
                            .attr("cy", desired[1] - dy)
                            .attr("r", selectedRegion ? 10 : 8)
                            .attr("fill", region.color)
                            .attr("opacity", selectedRegion ? 0.8 : 0.6)
                            .style("pointer-events", "none");

g.append("circle")
                            .attr("cx", desired[0] - dx)
                            .attr("cy", desired[1] - dy)
                            .attr("r", selectedRegion ? 5 : 4)
                            .attr("fill", region.color)
                            .style("pointer-events", "none");
                    });
                });

svg.append("line")
                    .attr("x1", 0)
                    .attr("y1", HEIGHT / 2)
                    .attr("x2", WIDTH)
                    .attr("y2", HEIGHT / 2)
                    .attr("stroke", "#475569")
                    .attr("stroke-width", 1)
                    .attr("opacity", 0.5)
                    .attr("stroke-dasharray", "5,5");

svg.append("line")
                    .attr("x1", WIDTH / 2)
                    .attr("y1", 0)
                    .attr("x2", WIDTH / 2)
                    .attr("y2", HEIGHT)
                    .attr("stroke", "#475569")
                    .attr("stroke-width", 1)
                    .attr("opacity", 0.5)
                    .attr("stroke-dasharray", "5,5");
            }, [geojson, selectedRegion]);

return (
                <div ref={mapContainerRef} style={{position: "relative", width: "100%", height: "100%", background: "rgba(15, 23, 42, 0.5)", borderRadius: "0.75rem", overflow: "hidden"}}>
                    <svg ref={svgRef} viewBox={`0 0 ${WIDTH} ${HEIGHT}`} style={{width: "100%", height: "100%", maxHeight: "600px"}} />
                    {selectedCountry && (
                        <div className="tooltip" style={{left: `${mousePos.x}px`, top: `${mousePos.y}px`}}>
                            <div style={{fontWeight: "bold", fontSize: "1.125rem", marginBottom: "0.25rem"}}>
                                {selectedCountry.name}
                            </div>
                            <div style={{fontSize: "0.875rem", color: "#94a3b8"}}>
                                {selectedCountry.coordinates[0].toFixed(2)}°, {selectedCountry.coordinates[1].toFixed(2)}°
                            </div>
                            <div style={{fontSize: "0.75rem", color: "#3b82f6", marginTop: "0.25rem"}}>
                                {regions.find((r) => r.countries.some((c) => c.code === selectedCountry.code))?.name}
                            </div>
                        </div>
                    )}
                </div>
            );
        }

function RegionButtons({selectedRegion, setSelectedRegion}) {
            return (
                <div style={{display: "flex", flexDirection: "column", gap: "0.5rem"}}>
                    <button onClick={() => setSelectedRegion(null)} className={`region-button ${!selectedRegion ? "active" : ""}`}>
                        <span>All Regions ({regions.length})</span>
                    </button>
                    {regions.map((region) => (
                        <button key={region.name} onClick={() => setSelectedRegion(region.name)} className={`region-button ${selectedRegion === region.name ? "active" : ""}`} style={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                            <div style={{display: "flex", alignItems: "center", gap: "0.5rem"}}>
                                <div style={{width: "12px", height: "12px", borderRadius: "50%", background: region.color}}></div>
                                <span>{region.name}</span>
                            </div>
                            <span style={{fontSize: "0.875rem", opacity: 0.7}}>{region.countries.length}</span>
                        </button>
                    ))}
                </div>
            );
        }

function Statistics({regions, totalCountries}) {
            return (
                <div style={{display: "flex", flexDirection: "column", gap: "1rem"}}>
                    {regions.map((region) => (
                        <div key={region.name}>
                            <div style={{display: "flex", justifyContent: "space-between", marginBottom: "0.5rem", fontSize: "0.875rem"}}>
                                <div style={{display: "flex", alignItems: "center", gap: "0.5rem"}}>
                                    <div style={{width: "8px", height: "8px", borderRadius: "50%", background: region.color}}></div>
                                    <span>{region.name}</span>
                                </div>
                                <span style={{fontWeight: "bold"}}>{region.countries.length}</span>
                            </div>
                            <div style={{width: "100%", height: "8px", background: "rgba(51, 65, 85, 0.5)", borderRadius: "4px", overflow: "hidden"}}>
                                <div className="stat-bar" style={{width: `${(region.countries.length / totalCountries) * 100}%`, background: region.color}}></div>
                            </div>
                        </div>
                    ))}
                </div>
            );
        }

function App() {
            const totalCountries = regions.reduce((acc, r) => acc + r.countries.length, 0);
            const [selectedRegion, setSelectedRegion] = useState(null);
            const filteredRegions = selectedRegion ? regions.filter((r) => r.name === selectedRegion) : regions;

return (
                <div style={{minHeight: "100vh"}}>
                    <header style={{borderBottom: "1px solid rgba(148, 163, 184, 0.2)", backdropFilter: "blur(12px)", background: "rgba(2, 6, 23, 0.3)"}}>
                        <div className="container" style={{padding: "1.5rem"}}>
                            <div style={{display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem"}}>
                                <div>
                                    <h1 style={{fontSize: "clamp(1.5rem, 4vw, 2rem)", fontWeight: "bold", marginBottom: "0.25rem"}}>
                                        Global Network
                                    </h1>
                                    <p style={{fontSize: "0.875rem", color: "#94a3b8"}}>
                                        Interactive visualization of {totalCountries} countries
                                    </p>
                                </div>
                                <div style={{textAlign: "right"}}>
                                    <div style={{fontSize: "2.5rem", fontWeight: "bold", color: "#3b82f6"}}>{totalCountries}</div>
                                    <div style={{fontSize: "0.75rem", color: "#94a3b8", textTransform: "uppercase", letterSpacing: "0.05em"}}>Countries</div>
                                </div>
                            </div>
                        </div>
                    </header>
                    <main className="container" style={{padding: "1.5rem"}}>
                        <div className="grid-responsive" style={{display: "grid", gridTemplateColumns: "2fr 1fr", gridTemplateRows: "600px auto", gap: "1.5rem"}}>
                            <div className="map-section" style={{gridColumn: "1", gridRow: "1"}}>
                                <div className="card" style={{height: "100%"}}>
                                    <div style={{display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1rem", flexWrap: "wrap", gap: "0.5rem"}}>
                                        <h2 style={{fontSize: "1.25rem", fontWeight: "bold"}}>World Map</h2>
                                        <div style={{fontSize: "0.875rem", color: "#94a3b8"}}>Hover over countries to see details</div>
                                    </div>
                                    <div style={{height: "calc(100% - 60px)"}}>
                                        <InteractiveWorldMap selectedRegion={selectedRegion} />
                                    </div>
                                </div>
                            </div>

<div className="countries-section" style={{gridColumn: "1", gridRow: "2"}}>
                                <div className="card">
                                    <h2 style={{fontSize: "1.25rem", fontWeight: "bold", marginBottom: "1.5rem"}}>
                                        {selectedRegion ? `${selectedRegion} Countries` : "Countries"}
                                    </h2>
                                    <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: "0.75rem"}}>
                                        {filteredRegions.flatMap((region) =>
                                            region.countries.map((country) => (
                                                <div key={country.code} className="country-card">
                                                    <div style={{display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.5rem"}}>
                                                        <div style={{width: "8px", height: "8px", borderRadius: "50%", background: region.color}}></div>
                                                        <div style={{fontWeight: "600", fontSize: "0.875rem"}}>{country.name}</div>
                                                    </div>
                                                    <div style={{fontSize: "0.75rem", color: "#94a3b8"}}>
                                                        {country.coordinates[0].toFixed(1)}°, {country.coordinates[1].toFixed(1)}°
                                                    </div>
                                                </div>
                                            ))
                                        )}
                                    </div>
                                </div>
                            </div>

<div className="sidebar-section" style={{gridColumn: "2", gridRow: "1 / span 2"}}>
                                <div style={{display: "flex", flexDirection: "column", gap: "1.5rem"}}>
                                    <div className="card">
                                        <h3 style={{fontSize: "1.125rem", fontWeight: "bold", marginBottom: "1rem"}}>Regions</h3>
                                        <RegionButtons selectedRegion={selectedRegion} setSelectedRegion={setSelectedRegion} />
                                    </div>
                                    <div className="card">
                                        <h3 style={{fontSize: "1.125rem", fontWeight: "bold", marginBottom: "1rem"}}>Statistics</h3>
                                        <Statistics regions={regions} totalCountries={totalCountries} />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </main>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("root"));
    </script>
</body>
</html>

Interactive World Map with React and D3

Recommended

Beauty and the Beast Enchanted Rose

CodePen Home Stars and Warp Speed

CSS Stage with Light Strings and Stairs

HTML

CSS

JS

Recommended

Beauty and the Beast Enchanted Rose

CodePen Home Stars and Warp Speed

CSS Stage with Light Strings and Stairs

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS