nafi@portfolio:~$
bash — ~/projects/ddos-attack-map
$cd ~/projects/ddos-attack-map && cat summary.txt
Interactive 3D globe visualization rendering simulated DDoS attack traffic as animated arcs between country centroids. Dual-mode: fully static in-browser simulation + optional Express + WebSocket backend for real-time event streaming. Live metrics panel with O(1) incremental counters.

LIVE DDOS ATTACK MAP

Full-Stack Developer · #b52d6e9 visualization
React · Vite · Three.js (globe.gl) · Node.js · Express · WebSocket github.com/sleepyhead000/ddos-attack-map
~/projects/ddos-attack-map $

cat README.md

README.md
$cat overview.txt
Built an interactive 3D globe that visualizes DDoS attack traffic as animated arcs connecting source and target countries. The globe runs entirely in-browser using Three.js via globe.gl — zero backend required for the simulation mode. For production deployments, an optional Node.js/Express + WebSocket backend streams real attack events to connected clients in real time.
$cat globe.txt
globe.gl (Three.js wrapper) renders a WebGL globe with country polygons. Attack arcs are great-circle paths generated from country centroid coordinates (GeoJSON). Arc animation: particles flow along the curve using a custom shader; color encodes attack type (volumetric, protocol, application). Globe supports drag/rotate/zoom; hover shows country name + active attack count.
$cat metrics.txt
Metrics panel updates at 60fps using O(1) incremental counters: events/sec (exponential moving average), top 5 source countries (min-heap), attack-type breakdown (fixed-size array). No full re-render on each event — counters mutate in place, React re-renders only changed values via useRef + useSyncExternalStore pattern.
$cat dualmode.txt
Two entry points: index.html (static, self-contained, GitHub Pages ready) and server/ (Express + WebSocket). Static mode uses a seeded PRNG to generate deterministic but varied attack streams. Server mode: clients subscribe to 'events' channel; backend publishes normalized attack objects. Graceful degradation — if WS fails, UI falls back to local simulation.
~/projects/ddos-attack-map $

ls -l features/

globe
globe.gl / Three.js · WebGL · country polygons · great-circle arcs
animation
Shader-based particle flow · attack-type color coding · 60fps target
metrics
O(1) incremental counters · EMA events/sec · min-heap top sources · fixed-array breakdown
dual-mode
Static (PRNG) + WS backend · graceful fallback · zero-config demo
interaction
Drag/rotate/zoom · hover tooltip · country filter · time-range scrubber
performance
Instanced mesh for arcs · frustum culling · requestAnimationFrame loop
~/projects/ddos-attack-map $

cat stack.yaml

frontend
React 18 · Vite · TypeScript
3d
Three.js r158+ · globe.gl · custom shaders (GLSL)
state
useRef + useSyncExternalStore (O(1) metrics)
backend
Node.js 20 · Express · ws (WebSocket)
data
GeoJSON centroids · seeded PRNG (static) / normalized events (WS)
deploy
GitHub Pages (static) · Docker + Fly.io (WS server)
~/projects/ddos-attack-map $

git log --oneline

#a1b2c3dfeat/globe

globe.gl integration & arc rendering

Three.js · globe.gl · GLSL
  • Loaded country polygons from Natural Earth GeoJSON; computed centroids via d3-geo.
  • Arc geometry: quadratic bezier on sphere surface; height proportional to attack intensity.
  • Custom fragment shader: particle position = f(time, progress) along curve; color by attack enum.
#b2c3d4efeat/metrics

O(1) live metrics panel

React · useSyncExternalStore
  • Events/sec: exponential moving average (alpha=0.1) updated per event — no array scan.
  • Top sources: bounded min-heap (size 5) per country; O(log 5) ≈ O(1) insert.
  • Type breakdown: fixed-length Uint32Array indexed by attack enum; atomic increment.
#c3d4e5ffeat/simulation

Deterministic in-browser attack simulation

TypeScript · seedrandom
  • Seeded PRNG (mulberry32) generates attack streams: source, target, type, intensity.
  • Configurable params: events/sec, geographic bias, type distribution, burst probability.
  • Deterministic — same seed = identical visualization; shareable via URL hash.
#d4e5f6afeat/ws-backend

Express + WebSocket real-time backend

Node.js · Express · ws · TypeScript
  • /ws endpoint: broadcasts normalized attack events to all subscribed clients.
  • Heartbeat (ping/pong) + auto-reconnect with exponential backoff on client.
  • Rate-limited ingestion endpoint (POST /ingest) for external collectors.
#e5f6a7bperf/render

Render loop optimization & instancing

Three.js · InstancedMesh · requestAnimationFrame
  • Arcs rendered via single InstancedMesh (max 500 concurrent); per-instance matrix + color.
  • Frustum culling via sphere bounds; off-screen arcs skipped in vertex shader.
  • RAF loop decoupled from React state — metrics update triggers re-render, globe runs independent.