Graph + Compass (pure HTML, no JS)

Drag handles to adjust strengths and bearings. The graph updates in real time.

<bz-graph id="epstein" edges="../data/epstein.edges" nodes="../data/epstein.nodes"
          level="3" heatmap="density" edge-mode="curves" legend
          strengths="group:5,edgetype:8" label-props="label">
</bz-graph>
<bz-compass for="epstein"></bz-compass>

Inline JSON via <script> + Compass

Data in <script type="application/json"> — no FOUC, no CSS needed. Format auto-detected.

Graph + Controls (slider panel, no JS)

Strength sliders and bearing dials as a standalone component.

<bz-graph id="karate2" edges="../data/karate.edges" nodes="../data/karate.nodes"
          level="2" edge-mode="curves" legend strengths="group:8">
</bz-graph>
<bz-controls for="karate2"></bz-controls>

Built-in floating panels (r = compass, R = controls)

Click the graph, then press r or R to toggle panels.

<bz-graph edges="../data/epstein.edges" nodes="../data/epstein.nodes"
          level="3" edge-mode="curves" legend compass controls
          strengths="group:5,edgetype:8" label-props="label">
</bz-graph>

Inline SNAP via <script>

Tab-delimited edges in <script type="text/plain"> — no FOUC.

Light mode with viridis