/* global React, d3, topojson */ /** * globe-car.jsx * * Contains two visual components used in the About section: * * Globe — An interactive rotating globe built with D3's geoOrthographic * projection and real country geometry from the world-atlas package. * Visited countries (India, UAE, USA) are highlighted in electric blue. * City dot markers pause the rotation and show a label on hover. * * F1Car — A static side-view SVG silhouette of a Ferrari F1 car (Rosso Corsa * gradient, halo, helmet, rear wing, chrome wheels). No animation — * it exists purely as a visual hobby marker in the About section. * * Dependencies (loaded via CDN in index.html before this file): * d3@7 — geoOrthographic, geoPath, geoDistance * topojson-client — converts TopoJSON topology to GeoJSON features * * Exports: window.Globe, window.F1Car, window.PLACES */ const { useState: useStateG, useEffect: useEffectG, useRef: useRefG, useMemo: useMemoG } = React; /** * Cities/regions Saketh has lived in or visited. * Each entry is projected as a dot on the globe when facing the viewer. */ const PLACES = [ { name: "Hyderabad", lat: 17.4, lng: 78.5 }, { name: "Goa", lat: 15.3, lng: 74.1 }, { name: "Uttarakhand", lat: 30.3, lng: 78.0 }, { name: "Tamil Nadu", lat: 11.1, lng: 78.7 }, { name: "Tirupati", lat: 13.6, lng: 79.4 }, { name: "Delhi", lat: 28.6, lng: 77.2 }, { name: "Ambala", lat: 30.4, lng: 76.8 }, { name: "Dubai", lat: 25.3, lng: 55.3 }, { name: "Abu Dhabi", lat: 24.5, lng: 54.4 }, { name: "Massachusetts", lat: 42.4, lng: -71.4 }, { name: "Maine", lat: 45.3, lng: -69.0 }, { name: "New Hampshire", lat: 43.2, lng: -71.6 }, { name: "New York", lat: 42.2, lng: -75.0 }, { name: "Vermont", lat: 44.0, lng: -72.7 }, { name: "Washington DC", lat: 38.9, lng: -77.0 }, { name: "Pennsylvania", lat: 41.2, lng: -77.2 }, { name: "Chicago", lat: 41.9, lng: -87.6 }, { name: "Illinois", lat: 40.0, lng: -89.0 }, { name: "Denver", lat: 39.7, lng: -104.9 }, { name: "Wisconsin", lat: 44.5, lng: -89.5 }, { name: "Pittsburgh", lat: 40.4, lng: -79.9 }, ]; /** * ISO M49 numeric codes for countries to fill with electric blue. * 356 = India · 784 = United Arab Emirates · 840 = United States * These codes match the feature.id values in the world-atlas TopoJSON. */ const VISITED_COUNTRIES = new Set(["356", "784", "840"]); /** * Globe — rotating orthographic world map. * * @param {number} size — SVG canvas size in px (diameter, default 280) */ function Globe({ size = 280 }) { const [topology, setTopology] = useStateG(null); // world-atlas TopoJSON const [error, setError] = useStateG(false); // fetch failed const [lambda, setLambda] = useStateG(0); // longitudinal rotation angle const [hovered, setHovered] = useStateG(null); // index of hovered city dot const reqRef = useRefG(); // rAF handle const lastRef = useRefG(); // previous timestamp for delta-time rotation const pausedRef = useRefG(false); // true while mouse is over the globe // Fetch the 110m-resolution world topology once on mount. useEffectG(() => { let cancelled = false; fetch("https://unpkg.com/world-atlas@2.0.2/countries-110m.json") .then((r) => r.json()) .then((topo) => { if (!cancelled) setTopology(topo); }) .catch(() => { if (!cancelled) setError(true); }); return () => { cancelled = true; }; }, []); // Animation loop — increments lambda by ~0.012°/ms (~1 full rotation per 30 s). // Delta-time approach keeps rotation speed consistent regardless of frame rate. useEffectG(() => { const animate = (t) => { if (lastRef.current == null) lastRef.current = t; const dt = t - lastRef.current; lastRef.current = t; if (!pausedRef.current) { setLambda((l) => (l + dt * 0.012) % 360); } reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(reqRef.current); }, []); const R = size / 2 - 4; const cx = size / 2; const cy = size / 2; const projection = useMemoG(() => { if (!window.d3) return null; return window.d3 .geoOrthographic() .scale(R) .translate([cx, cy]) .rotate([lambda, -15, 0]) .clipAngle(90); }, [lambda, size]); const pathGen = useMemoG(() => { if (!projection || !window.d3) return null; return window.d3.geoPath(projection); }, [projection]); const features = useMemoG(() => { if (!topology || !window.topojson) return []; const fc = window.topojson.feature(topology, topology.objects.countries); return fc.features; }, [topology]); // Returns true if [lat, lng] is on the front hemisphere currently facing the viewer. // Uses the great-circle distance from the current projection center; points // beyond 90° are behind the globe and should not render. const isVisible = (lat, lng) => { if (!projection || !window.d3) return false; const rotate = projection.rotate(); const center = [-rotate[0], -rotate[1]]; const dist = window.d3.geoDistance(center, [lng, lat]); return dist < Math.PI / 2 - 0.02; // small margin avoids edge clipping }; return (
(pausedRef.current = true)} onMouseLeave={() => { pausedRef.current = false; setHovered(null); }} > {pathGen && features.length > 0 && ( {features.map((f, i) => { const d = pathGen(f); if (!d) return null; const visited = VISITED_COUNTRIES.has(String(f.id)); return ( ); })} )} {pathGen && ( )} {!topology && !error && ( {[-60, -30, 0, 30, 60].map((lat) => ( ))} )} {projection && PLACES.map((p, i) => { const [x, y] = projection([p.lng, p.lat]) || [null, null]; const visible = x != null && isVisible(p.lat, p.lng); if (!visible) return null; const isHover = hovered === i; return ( setHovered(i)} onMouseLeave={() => setHovered(null)} style={{ cursor: "pointer", transition: "r 0.2s" }} /> ); })}
{hovered !== null && ( {PLACES[hovered].name} )}
{error && (
Map unavailable
)}
); } /** * F1Car — stylised Ferrari F1 silhouette (Rosso Corsa). Static — no animation. * * @param {number} width — rendered width in px (height is derived from aspect ratio) */ function F1Car({ width = 280 }) { const w = width; const h = Math.round(w * 0.36); return (
{/* Ground shadow line */} {/* Front wing */} {/* Nose cone */} {/* Cockpit / monocoque */} {/* Shine */} {/* Halo */} {/* Sidepod */} {/* Airbox */} {/* Rear wing */} {/* Diffuser */} {/* Driver helmet */} {/* Yellow shield accent */} {/* Front wheel */} {/* Rear wheel */}
); } // Expose to window so sections.jsx can use Globe and F1Car without imports window.Globe = Globe; window.F1Car = F1Car; window.PLACES = PLACES;