JavaScript Force Directed Graph

1import {
2    SciChartSurface,
3    NumericAxis,
4    XyDataSeries,
5    XyxyDataSeries,
6    XyScatterRenderableSeries,
7    FastLineSegmentRenderableSeries,
8    EllipsePointMarker,
9    NumberRange,
10    ZoomPanModifier,
11    ZoomExtentsModifier,
12    MouseWheelZoomModifier,
13    EAutoRange,
14} from "scichart";
15import { appTheme } from "../../../theme";
16import {
17    SimNode,
18    SimEdge,
19    EdgeHoverState,
20    NodeTooltipModifier,
21    NodeDragModifier,
22    NodeHoverPaletteProvider,
23    DragStateRef,
24} from "./nodeModifiers";
25import { AIRPORTS, ROUTES } from "./airportData";
26
27// ─── Build simulation state ───────────────────────────────────────────────────
28
29function buildSimulation(): { nodes: SimNode[]; edges: SimEdge[] } {
30    const iataToIdx = new Map<string, number>();
31    const centerLon = -96;
32    const centerLat = 38;
33    const scaleX = 4.5;
34    const scaleY = 5.5;
35
36    const nodes: SimNode[] = AIRPORTS.map((a, i) => {
37        iataToIdx.set(a.iata, i);
38        const geoX = (a.lon - centerLon) * scaleX;
39        const geoY = (a.lat - centerLat) * scaleY;
40        return { iata: a.iata, label: `${a.iata} – ${a.city}, ${a.state}`, x: geoX, y: geoY, vx: 0, vy: 0, geoX, geoY };
41    });
42
43    const edges: SimEdge[] = ROUTES
44        .map(r => {
45            const si = iataToIdx.get(r.origin);
46            const ti = iataToIdx.get(r.destination);
47            if (si === undefined || ti === undefined) return null;
48            return { sourceIdx: si, targetIdx: ti };
49        })
50        .filter((e): e is SimEdge => e !== null);
51
52    return { nodes, edges };
53}
54
55// ─── Force simulation tick ────────────────────────────────────────────────────
56
57const REPULSION_STRENGTH = -120;
58const REPULSION_MIN_DIST = 1;
59const SPRING_K = 0.3;
60const SPRING_REST_LENGTH = 20;
61const GEO_ANCHOR_STRENGTH = 0.12;
62const VELOCITY_DECAY = 0.6;
63
64function tick(nodes: SimNode[], edges: SimEdge[], alpha: number): void {
65    for (let i = 0; i < nodes.length; i++) {
66        for (let j = i + 1; j < nodes.length; j++) {
67            const dx = nodes[j].x - nodes[i].x;
68            const dy = nodes[j].y - nodes[i].y;
69            const dist = Math.max(Math.sqrt(dx * dx + dy * dy), REPULSION_MIN_DIST);
70            const force = (REPULSION_STRENGTH * alpha) / (dist * dist);
71            const fx = force * (dx / dist);
72            const fy = force * (dy / dist);
73            nodes[i].vx += fx;
74            nodes[i].vy += fy;
75            nodes[j].vx -= fx;
76            nodes[j].vy -= fy;
77        }
78    }
79
80    for (const edge of edges) {
81        const src = nodes[edge.sourceIdx];
82        const tgt = nodes[edge.targetIdx];
83        const dx = (tgt.x + tgt.vx) - (src.x + src.vx);
84        const dy = (tgt.y + tgt.vy) - (src.y + src.vy);
85        const dist = Math.max(Math.sqrt(dx * dx + dy * dy), 1);
86        const force = SPRING_K * (dist - SPRING_REST_LENGTH) * alpha;
87        const fx = force * (dx / dist);
88        const fy = force * (dy / dist);
89        src.vx += fx * 0.5;
90        src.vy += fy * 0.5;
91        tgt.vx -= fx * 0.5;
92        tgt.vy -= fy * 0.5;
93    }
94
95    for (const node of nodes) {
96        node.vx += (node.geoX - node.x) * GEO_ANCHOR_STRENGTH * alpha;
97        node.vy += (node.geoY - node.y) * GEO_ANCHOR_STRENGTH * alpha;
98    }
99
100    for (const node of nodes) {
101        node.vx *= VELOCITY_DECAY;
102        node.vy *= VELOCITY_DECAY;
103        node.x += node.vx;
104        node.y += node.vy;
105    }
106}
107
108// ─── Chart initialization ─────────────────────────────────────────────────────
109
110export const drawExample = async (rootElement: string | HTMLDivElement) => {
111    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
112        theme: appTheme.SciChartJsTheme,
113    });
114
115    const xAxis = new NumericAxis(wasmContext, { isVisible: false, autoRange: EAutoRange.Never });
116    const yAxis = new NumericAxis(wasmContext, { isVisible: false, autoRange: EAutoRange.Never });
117    xAxis.visibleRange = new NumberRange(-300, 300);
118    yAxis.visibleRange = new NumberRange(-300, 300);
119    sciChartSurface.xAxes.add(xAxis);
120    sciChartSurface.yAxes.add(yAxis);
121
122    const { nodes, edges } = buildSimulation();
123
124    const edgeHover = new EdgeHoverState();
125
126    const edgeDataSeries = new XyxyDataSeries(wasmContext);
127    sciChartSurface.renderableSeries.add(new FastLineSegmentRenderableSeries(wasmContext, {
128        dataSeries: edgeDataSeries,
129        stroke: "#47bde650",
130        strokeThickness: 2,
131    }));
132
133    const edgeHighlightDataSeries = new XyxyDataSeries(wasmContext);
134    sciChartSurface.renderableSeries.add(new FastLineSegmentRenderableSeries(wasmContext, {
135        dataSeries: edgeHighlightDataSeries,
136        stroke: "#47bde6",
137        strokeThickness: 3,
138    }));
139
140    const nodeDataSeries = new XyDataSeries(wasmContext);
141    sciChartSurface.renderableSeries.add(new XyScatterRenderableSeries(wasmContext, {
142        dataSeries: nodeDataSeries,
143        pointMarker: new EllipsePointMarker(wasmContext, {
144            width: 10,
145            height: 10,
146            fill: "#274b92",
147            stroke: "#47bde6",
148            strokeThickness: 1.5,
149        }),
150        paletteProvider: new NodeHoverPaletteProvider(edgeHover),
151    }));
152
153    const dragState: DragStateRef = { current: null };
154
155    let alpha = 1.0;
156    let running = true;
157    let loopAlive = false;
158    let autoZoomed = false;
159    let animFrameId: number = 0;
160
161    function frame() {
162        if (!running || sciChartSurface.isDeleted) { loopAlive = false; return; }
163
164        const simActive = alpha >= 0.001 || !!dragState.current;
165
166        if (simActive) {
167            tick(nodes, edges, alpha);
168            alpha *= 0.9772;
169
170            if (!autoZoomed && alpha < 0.5) {
171                autoZoomed = true;
172                sciChartSurface.zoomExtents(200);
173            }
174
175            if (dragState.current) {
176                const n = nodes[dragState.current.nodeIdx];
177                n.x = dragState.current.dataX;
178                n.y = dragState.current.dataY;
179                n.vx = 0;
180                n.vy = 0;
181                alpha = Math.max(alpha, 0.1);
182            }
183        }
184
185        const ex: number[] = [], ey: number[] = [], ex1: number[] = [], ey1: number[] = [];
186        const hx: number[] = [], hy: number[] = [], hx1: number[] = [], hy1: number[] = [];
187        const h = edgeHover.hoveredNodeIdx;
188        for (const edge of edges) {
189            const src = nodes[edge.sourceIdx], tgt = nodes[edge.targetIdx];
190            if (h !== -1 && (edge.sourceIdx === h || edge.targetIdx === h)) {
191                hx.push(src.x); hy.push(src.y); hx1.push(tgt.x); hy1.push(tgt.y);
192            } else {
193                ex.push(src.x); ey.push(src.y); ex1.push(tgt.x); ey1.push(tgt.y);
194            }
195        }
196        edgeDataSeries.clear();
197        edgeDataSeries.appendRange(ex, ey, ex1, ey1);
198        edgeHighlightDataSeries.clear();
199        edgeHighlightDataSeries.appendRange(hx, hy, hx1, hy1);
200
201        nodeDataSeries.clear();
202        nodeDataSeries.appendRange(nodes.map(n => n.x), nodes.map(n => n.y));
203
204        if (simActive) {
205            animFrameId = requestAnimationFrame(frame);
206        } else {
207            loopAlive = false;
208        }
209    }
210
211    function startLoop() {
212        if (!loopAlive) {
213            loopAlive = true;
214            animFrameId = requestAnimationFrame(frame);
215        }
216    }
217
218    sciChartSurface.chartModifiers.add(
219        new NodeTooltipModifier(nodes, edges, edgeHover, () => startLoop()),
220        new NodeDragModifier(nodes, dragState, () => { alpha = Math.max(alpha, 0.3); startLoop(); }),
221        new ZoomPanModifier(),
222        new ZoomExtentsModifier(),
223        new MouseWheelZoomModifier()
224    );
225
226    startLoop();
227
228    return {
229        sciChartSurface,
230        wasmContext,
231        stopAnimation: () => {
232            running = false;
233            if (animFrameId) cancelAnimationFrame(animFrameId);
234        },
235    };
236};
237