tensix-viz — Examples

All four renderer classes, all ten animation modes, and all three themes. Use the controls to switch modes and palettes live.

1. TensixViz — Single chip (Blackhole 17×12)

Activate an animation mode to see workload patterns across the core grid.

2. CardViz — P300c (2 BH chips, intra-card ETH)

Click "zoom" to drill into a single chip. viz.transitionTo('chip', {index: 0})

3. SystemViz — QB2 (2× P300c, 4 BH chips)

4. ClusterViz — Galaxy BH (32 chips, 4×8 mesh)

Click any tile to zoom into a server. await viz.transitionTo('server', {index: 0})

5. Programmatic control

Chain await viz.transitionTo() and viz.activate() for lesson sequences.

const viz = new SystemViz(el, 'qb2')
await viz.transitionTo('card', { index: 0 })   // zoom into card 0
await viz.transitionTo('chip', { card: 0, chip: 1 }) // zoom into chip 1
viz.activate('inference')                       // run animation
await new Promise(r => setTimeout(r, 3000))
await viz.transitionTo('system')               // zoom back out

6. Theming — dark · light · auto

Add a CSS class to any widget container — or any ancestor element — to change its palette. All four widget types respond. The demos below are fixed to their theme and are not affected by the page-level toggle above.

<!-- no class needed -->
<canvas data-viz="chip"
        data-config="bh-chip"></canvas>

<div class="tv-light">
  <canvas data-viz="chip"
          data-config="bh-chip"></canvas>
</div>

<div class="tv-auto">
  <canvas data-viz="chip"
          data-config="bh-chip"></canvas>
</div>
<!-- light when OS is light,
     dark otherwise -->

The class can be on the widget itself, a parent, or a page-level wrapper — _resolveTheme() walks up the DOM to find it. Switching a class at runtime takes effect on the next animation frame with no extra JavaScript.

7. Memory visualization — showMemory: true

An opt-in DRAM activity and L1 fill overlay for TensixViz. Use the sliders to drive setMemoryStats() live, or switch modes to see each preset.

const viz = new TensixViz(canvas, { arch: 'blackhole', showMemory: true })
viz.activate('inference')

// override with real telemetry
viz.setMemoryStats({ dram_bw: 0.75, l1_fill: 0.60 })

// partial override — only dram_bw changes; l1_fill stays on preset
viz.setMemoryStats({ dram_bw: 0.90 })