Live visualization

verve.viz: layouts and charts computed in Zig, rendered as SVG server-side, made interactive by one island.

force/tree/radial/dag layouts with crossing minimization
wheel-zoom, pan, node drag, hover tooltips, subtree collapse
● live streams server-pushed wire deltas over SSE every second
16 chart types below the graph — all static SVG, zero JS

Visualizations

Native verve.viz: SVG scene model, scales/axes, and tree/radial/force/dag layouts — computed in Zig, rendered server-side. The graph below is an island: nodes reveal on hydrate, yet the page is fully formed with JS off.

Force-directed graph — interactive

Scroll to zoom, drag to pan, drag a node (works past the svg edge — pointer capture), hover for a label, click to select, double-click to collapse a subtree (+N badge; double-click again to expand). +/− mutate the graph; ⟳ cycles tree/radial/force/dag with a tween; ● live streams server-pushed wire deltas over SSE every second — zoom, selection, and collapse all survive.

Layered DAG

The src→emit skip edge spans 3 layers — it routes through virtual-node bends rather than cutting straight across.

Edge routing — curved

edge_routing = .curved — the same DAG with Catmull-Rom splines through the via-points.

Edge routing — orthogonal

edge_routing = .orthogonal — Manhattan runs through the reserved virtual-node channels, corners rounded.

Crossing minimization — OFF

dag_crossing_iterations = 0 → A→Z, B→Y, C→X all cross (id-order).

Crossing minimization — ON

Default sweeps reorder the bottom layer to Z,Y,X → edges fan cleanly, zero crossings.

Bar chart

Stacked bar chart

Grouped bar chart

Candlestick chart

Box plot

Heatmap

Radar chart

Violin plot

Line chart

Area chart

Scatter plot

Donut chart

Sankey diagram

Weighted flows between columns — link width ∝ value, node height ∝ throughput.

Treemap

Squarified: leaf area ∝ value, nested by parent, colored by root.

Chord diagram

Pairwise flows around a circle — arc span ∝ row sum, ribbons connect nonzero pairs.

← Home