OG
JS
Docs
Demos
Examples
Dataset evolution
Shared identities move continuously while departing and arriving elements cross-fade.
Evolve dataset
ready · 3 nodes
// Stable ids tell OGJS which entities persist between snapshots. `evolveGraph` owns the // enter, update, exit, position tween, and final graph replacement, so applications provide // the next dataset without hand-scheduling fades or rebuilding interaction state. import { Ogjs } from '../../src/index'; const initial = { nodes: [ { id: 'anchor', label: 'Anchor', x: -180, y: 30, size: 14, color: '#3b82f6' }, { id: 'stable', label: 'Stable identity', x: -70, y: -70, size: 14, color: '#ef4444', image: 'data:image/svg+xml,stable-old' }, { id: 'leaving', label: 'Leaving', x: 75, y: 70, size: 12, color: '#f59e0b' }, ], edges: [ { source: 'anchor', target: 'stable', width: 2, color: '#64748b' }, { source: 'stable', target: 'leaving', width: 3, color: '#f59e0b' }, ], }; // Reusing `anchor` and `stable` declares identity across revisions. `leaving` exits, // `entering` arrives, and the stable entity may change position, style, label, and image. const target = { nodes: [ { id: 'anchor', label: 'Anchor', x: -155, y: 45, size: 14, color: '#3b82f6' }, { id: 'stable', label: 'Stable identity', x: 90, y: -30, size: 18, color: '#22c55e', image: 'data:image/svg+xml,stable-next' }, { id: 'entering', label: 'Entering', x: 175, y: 80, size: 16, color: '#8b5cf6', image: 'data:image/svg+xml,entering' }, ], edges: [ { source: 'anchor', target: 'stable', width: 2.5, color: '#64748b' }, { source: 'stable', target: 'entering', width: 4, color: '#8b5cf6' }, ], }; const og = new Ogjs({ container: '#viz', theme: 'light' }); og.setGraph(initial); // Selection is applied before evolution to demonstrate that identity-based state survives // while topology and presentation attributes change around the selected entity. og.setSelected('stable', true); og.camera.fit(); const button = document.querySelector('#evolve'); const status = document.querySelector('#status'); button.addEventListener('click', async () => { button.disabled = true; status.textContent = 'evolving · identity-preserving'; // One awaited call coordinates enter, update, exit, and the final graph replacement. The // application does not schedule separate fades or guess when the new revision is settled. await og.evolveGraph(target, { duration: 760 }); status.textContent = 'settled · 3 nodes'; button.disabled = false; });