OGJS

Examples

Focused examples backed by shipped Ogjs behavior. Grades describe this repository's evidence only: verified means code, an automated check, and a runnable example; partial means one of those is still incomplete.

Anchored cards Position node tooltips, world cards, and interactive context controls through one camera-aware lifecycle. VERIFIED code + browser + live example Overview composition Synchronize the main camera through an accessible overview and compose opted-in raster surfaces into PNG/PDF. VERIFIED code + browser + live example Strata workbench Order custom underlays and overlays with camera-aware frames, pointer policy, and deterministic teardown. VERIFIED code + browser + live example Graph editing history Add and remove connected data, then undo or redo each exact mutation. VERIFIED code + unit + browser Forge editing workbench Join, retarget, resize, rename, snap, drop, validate, and undo through one graph-native toolset. VERIFIED code + unit + browser Data format import Load JSON, CSV, GraphML, and GEXF into one deterministic graph surface. VERIFIED code + unit + browser Database result lab Convert Neo4j, Gremlin, SPARQL, and SQL result shapes into a live graph. VERIFIED code + unit + browser Data export studio Preview and download graph data as JSON, CSV, or XML. VERIFIED code + unit + browser Image export lab Download the current graph viewport as SVG, PNG, or PDF with verified file output. VERIFIED code + unit + browser Semantic navigation Traverse nodes and labeled edges, select by keyboard, and read the same graph as a synchronized semantic list. VERIFIED code + browser + live example Selection workbench Select exact ids, draw freehand or rectangular regions, clear state, and cancel safely. VERIFIED code + browser + live example Investigation overlays Outline communities and attach restorable text, regions, arrows, and node callouts. VERIFIED code + unit + browser Timeline brush Brush a point-time histogram and compose its window with independent graph filters. VERIFIED code + browser + live example Interval playback Play, pause, and seek overlapping node and relationship lifespans while filters stay independent. VERIFIED code + unit + browser City map Anchor four cities over a deterministic raster layer and verify its lifecycle. VERIFIED code + unit + browser Vector geography Compose validated GeoJSON regions, routes, and sites beneath anchored graph data and raster tiles. VERIFIED code + unit + browser Analysis explorer Compare fewest-hop and weighted routes, connected components, and seeded communities. VERIFIED code + unit + browser Insights workbench Run centralities, spanning forests, and multilevel modularity in a cancellable worker. VERIFIED code + unit + browser Easy grouping Members converge into meta-nodes and fan back out; ungroup restores every position exactly. VERIFIED code + unit + browser Expand / collapse Double-click a meta-node: members bloom out circle-packed; double-click a member to collapse it back. VERIFIED code + unit + browser Fisheye lens Cursor-following magnifier; picking stays exact inside the lens. VERIFIED code + browser + live example Hover styles (red ring) Red outer ring with a gap on node hover; links turn red and ring both endpoints. VERIFIED code + unit + browser Edge hover highlight Segment-accurate edge picking through the spatial grid; endpoints highlight with it. VERIFIED code + unit + browser Animated layout switching Force, hierarchical, radial, circular, grid — every node glides, the camera follows. VERIFIED code + unit + browser Local layout constraints Arrange a chosen subgraph, preserve fixed anchors, and separate variable-size overlaps without moving outside nodes. VERIFIED code + unit + pixels + browser Edge attribute animation Tween edge width and color together; one lifecycle event reports timing and affected indices. VERIFIED code + unit + browser Node and camera motion Coordinate position, size, color, and camera tracks through the shared frame loop. VERIFIED code + unit + browser Dataset evolution Preserve shared identities while arriving and departing nodes and links cross-fade. VERIFIED code + browser + live example Force workbench Replay seeded worker layouts with settlement, tuning, stop, and output evidence. VERIFIED code + unit + browser Filter workbench Compose predicates over a large graph and measure visible topology locally. VERIFIED code + unit + browser Edge filter pipeline Compose relationship predicates while preserving dense identity, stored styles, and complete data exports. PARTIAL code + unit + browser Projection pipeline Reuse named computed fields across node filters, styles, and explicit data refreshes. VERIFIED code + unit + browser Node style gallery Inspect fills, borders, glyphs, status dots, count capsules, and combined recipes. VERIFIED code + pixels + browser Analytic node marks Render and pick circles, squares, diamonds, triangles, and hexagons through one typed channel. PARTIAL code + pixels + browser Node image gallery Center-crop asynchronous images inside analytic marks with fallback, borders, badges, and paint order. PARTIAL code + pixels + browser Node paint order Keep overlapping node pixels and pointer targeting in one stable priority order. PARTIAL code + pixels + browser Edge style gallery Compose core strokes, outlines, halos, pulse, captions, badges, and parallel routes per relationship. VERIFIED code + pixels + browser Label recipe gallery Compose per-node typography, hierarchy, placement, collision priority, and RTL text. VERIFIED code + pixels + browser Traversal explorer Walk directed layers or branches with depth limits, cancellation, and loop tracing. VERIFIED code + unit + browser Multi-instance lab Keep history, focus, rendering, and teardown isolated across sibling graphs. VERIFIED code + browser + live example Pattern-aware group layouts Isolated nodes pack deterministically, exact stars form rings, and irregular meshes retain force layout. VERIFIED code + unit + browser Visual grouping (containment) Members stay visible inside a translucent parent disc; drag it to move the whole group. VERIFIED code + unit + browser Expand with in-group layout Fetch, validate, and reveal members atomically in one contained motion. VERIFIED code + unit + browser Recursive visual groups Nest teams into divisions and move or collapse each subtree as one rigid unit. VERIFIED code + unit + browser Grouping at scale One edge pass prepares deterministic visual groups on thousands of nodes. VERIFIED code + unit + browser Benchmark workbench Measure construction, GPU-complete rendering, picking, and actual force backends on one seeded workload. VERIFIED versioned workload + validated report Light theme White canvas, slate links at real weight, labels in pills — now the default. PARTIAL code + live example