OG
JS
Docs
Demos
Examples
Node style gallery
One compact view of circular fills, borders, glyphs, status dots, count capsules, and combinations.
6 style recipes · light theme
// Node records declare fills, borders, glyphs, badges, and combined treatments. // OGJS composes those attributes in one mark and preserves normal labels, picking, and // selection; applications only map domain state to style data. import { Ogjs } from '../../src/index'; const og = new Ogjs({ container: '#viz', theme: 'light' }); // Every item remains an ordinary node. Glyphs, badges, borders, dials, and beacons are // composable attributes, not separate DOM or canvas layers with independent lifecycles. og.setGraph({ nodes: [ { id: 'fill', label: 'Fill', x: -170, y: -80, size: 28, color: '#4f7fbf' }, { id: 'border', label: 'Border', x: 0, y: -80, size: 28, color: '#496a7d', borderWidth: 3, borderColor: '#d39a3c' }, { id: 'icon', label: 'Glyph', x: 170, y: -80, size: 30, color: '#8064b5', icon: 'DB' }, { id: 'badge', label: 'Status', x: -170, y: 90, size: 26, color: '#3f8f72', badgeColor: '#d66a72' }, { id: 'count', label: 'Count', x: 0, y: 90, size: 30, color: '#3f8fa6', icon: 'Q', badgeText: '12' }, { id: 'combined', label: 'Combined', x: 170, y: 90, size: 32, color: '#b86645', borderWidth: 3, borderColor: '#e9c875', icon: '!', badgeColor: '#4aa978', badgeText: '3' }, ], edges: [], }); // Fitting includes composed mark bounds and labels, so larger treatments remain visible // without the application calculating their rendered dimensions. og.camera.fit();
<!doctype html> <html lang="en"><head><meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>Ogjs example — Node style gallery</title> <link rel="stylesheet" href="../site.css"/><link rel="stylesheet" href="./data-lifecycle.css"/> <style>#viz { left: 452px; } @media (max-width: 760px) { #viz { top: 260px; left: 0; } }</style> </head><body> <header class="rail"><a class="wordmark" href="../index.html">OG<b>JS</b></a><nav> <a href="../docs.html">Docs</a><a href="../demos.html">Demos</a> <a href="./index.html" aria-current="page">Examples</a></nav></header> <div id="viz"></div> <section class="workflow-panel"><h1>Node style gallery</h1> <p>One compact view of circular fills, borders, glyphs, status dots, count capsules, and combinations.</p> <div class="status">6 style recipes · light theme</div> </section> <script type="module"> // Node records declare fills, borders, glyphs, badges, and combined treatments. // OGJS composes those attributes in one mark and preserves normal labels, picking, and // selection; applications only map domain state to style data. import { Ogjs } from '../../src/index'; const og = new Ogjs({ container: '#viz', theme: 'light' }); // Every item remains an ordinary node. Glyphs, badges, borders, dials, and beacons are // composable attributes, not separate DOM or canvas layers with independent lifecycles. og.setGraph({ nodes: [ { id: 'fill', label: 'Fill', x: -170, y: -80, size: 28, color: '#4f7fbf' }, { id: 'border', label: 'Border', x: 0, y: -80, size: 28, color: '#496a7d', borderWidth: 3, borderColor: '#d39a3c' }, { id: 'icon', label: 'Glyph', x: 170, y: -80, size: 30, color: '#8064b5', icon: 'DB' }, { id: 'badge', label: 'Status', x: -170, y: 90, size: 26, color: '#3f8f72', badgeColor: '#d66a72' }, { id: 'count', label: 'Count', x: 0, y: 90, size: 30, color: '#3f8fa6', icon: 'Q', badgeText: '12' }, { id: 'combined', label: 'Combined', x: 170, y: 90, size: 32, color: '#b86645', borderWidth: 3, borderColor: '#e9c875', icon: '!', badgeColor: '#4aa978', badgeText: '3' }, ], edges: [], }); // Fitting includes composed mark bounds and labels, so larger treatments remain visible // without the application calculating their rendered dimensions. og.camera.fit(); </script></body></html>