import React, { useEffect, useMemo, useRef, useState, } from 'react'; import * as d3 from 'd3'; import { feature } from 'topojson-client'; import { Play, Pause, Clock, Map as MapIcon, } from 'lucide-react'; // D3/Topojson data URL for a world map const TOPOJSON_URL = 'https://unpkg.com/world-atlas@2/countries-110m.json'; export default function SAConsultationsTimeMap() { const containerRef = useRef(null); const svgRef = useRef(null); const canvasRef = useRef(null); // State variables const [saGeo, setSaGeo] = useState(null); const [rows, setRows] = useState([]); const [domain, setDomain] = useState([null, null]); const [cursorTime, setCursorTime] = useState(null); const [isPlaying, setIsPlaying] = useState(false); // Hardcoded dimensions for the map const width = 1000; const height = 700; // Generate 100 random consultation points within South Africa's bounds useEffect(() => { const randomRows = d3 .range(100) .map((i) => { const lat = -35 + Math.random() * (-22 - -35); const lon = 16 + Math.random() * (33 - 16); const date = new Date( Date.now() - Math.random() * 1000 * 60 * 60 * 24 * 30, ); return { id: `id-${i + 1}`, date, lat, lon }; }) .sort((a, b) => a.date - b.date); setRows(randomRows); setDomain([ randomRows[0].date, randomRows[randomRows.length - 1].date, ]); setCursorTime(randomRows[0].date); }, []); // Fetch the TopoJSON data for South Africa's geometry useEffect(() => { (async () => { try { const topo = await ( await fetch(TOPOJSON_URL) ).json(); const countries = feature( topo, topo.objects.countries, ); const sa = countries.features.find( (f) => f.id === '710', ); setSaGeo(sa); } catch (e) { console.error('Failed to load topojson', e); } })(); }, []); // Set up the D3 geo-projection const projection = useMemo(() => { return d3 .geoMercator() .center([24, -29]) .scale(800) .translate([width / 2, height / 2]); }, [width, height]); const path = useMemo( () => d3.geoPath(projection), [projection], ); const fmt = useMemo( () => d3.timeFormat('%Y-%m-%d %H:%M'), [], ); // Draw the SVG map elements useEffect(() => { const svg = d3.select(svgRef.current); svg.selectAll('*').remove(); svg .append('rect') .attr('width', width) .attr('height', height) .attr('fill', '#0b1120'); const graticule = d3.geoGraticule().step([5, 5]); svg .append('path') .attr('d', path(graticule())) .attr('fill', 'none') .attr('stroke', '#172554') .attr('stroke-width', 0.6); if (saGeo) { svg .append('path') .attr('d', path(saGeo)) .attr('fill', '#0ea5e9') .attr('opacity', 0.07) .attr('stroke', '#38bdf8') .attr('stroke-width', 1.2); } svg .append('text') .attr('x', 16) .attr('y', 32) .attr('fill', '#e2e8f0') .attr('fontWeight', 600) .attr('fontSize', 18) .text('South Africa Consultations'); }, [saGeo, path]); // Draw the animated light points on the canvas useEffect(() => { const ctx = canvasRef.current?.getContext('2d'); if (!ctx || !cursorTime) return; ctx.clearRect(0, 0, width, height); const windowMs = 1000 * 60 * 60 * 24 * 7; for (const d of rows) { if (d.date <= cursorTime) { const [x, y] = projection([d.lon, d.lat]) || []; if (!x || !y) continue; const age = cursorTime - d.date; const alpha = age < windowMs ? 0.9 - 0.8 * (age / windowMs) : 0.1; const r = 3 + Math.max(0, 4 - 3 * (age / windowMs)); ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = `rgba(56, 189, 248, ${alpha})`; ctx.fill(); } else break; } }, [rows, cursorTime, projection]); // Handle the play/pause animation useEffect(() => { let timer; if (isPlaying && domain[0] && domain[1]) { timer = d3.timer(() => { setCursorTime((t) => { const nextTime = new Date( t.getTime() + 1000 * 60 * 60 * 2, ); if (nextTime > domain[1]) { setIsPlaying(false); return domain[1]; } return nextTime; }); }); } return () => timer?.stop(); }, [isPlaying, domain]); const timeScale = useMemo(() => { if (!domain[0] || !domain[1]) return null; return d3.scaleTime().domain(domain).range([0, 1000]); }, [domain]); const sliderValue = useMemo(() => { if (!timeScale || !cursorTime) return 0; return timeScale(cursorTime); }, [timeScale, cursorTime]); return (

Lives in Motion — SA Consultations

{/* === CORRECTED CODE BLOCK WITH INLINE STYLES === */}

{/* === END CORRECTED CODE BLOCK === */}

{ if (!timeScale) return; const inv = d3 .scaleLinear() .domain([0, 1000]) .range(domain); setCursorTime(inv(+e.target.value)); setIsPlaying(false); }} className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-sky-400" />

{cursorTime ? fmt(cursorTime) : ''} —{' '} { rows.filter((r) => r.date <= cursorTime) .length }{' '} consultations

); }

Messing around

hamzavdr