visualizations

TuxVizGrid

Small-multiples layout primitive. Lays out 2-, 3-, or 4-up panes of TuxVizEmbed / TuxVizRPlot (or any viz-shaped thing) with a shared editorial header and consistent spacing. Container-queried — collapses to fewer columns on narrow widths.

For a single embed, drop TuxVizEmbed directly — wrapping one pane in a grid implies "these belong together" which is the wrong signal.

two-up

Tableau + Power BI side-by-side

executive overview

Sponsored research · FY26 Q1

Two complementary views of the same quarter — a Tableau crash-rate dashboard alongside a Power BI spend overview.

tableau

Crash rates · corridor program

Tableau Open
Crash rates · corridor program

power bi

Sponsored research spend

Power BI Open
Sponsored research spend
Source: TxDOT CRIS-2 · TTI sponsored-research ledger 
<tux-viz-grid
  cols="2"
  eyebrow="executive overview"
  title="Sponsored research · FY26 Q1"
  dek="Two complementary views of the same quarter — a Tableau
       crash-rate dashboard alongside a Power BI spend overview."
>
  <tux-viz-embed
    provider="tableau"
    src="https://public.tableau.com/views/your-viz/Sheet1?:embed=y"
    poster-src="/viz-poster-tableau.svg"
    title="Crash rates · corridor program"
    eyebrow="tableau"
    ratio="16/10"
  />
  <tux-viz-embed
    provider="powerbi"
    src="https://app.powerbi.com/view?r=eyJrIjoi..."
    poster-src="/viz-poster-powerbi.svg"
    title="Sponsored research spend"
    eyebrow="power bi"
    ratio="16/10"
  />

  <template #footer>
    Source: TxDOT CRIS-2 · TTI sponsored-research ledger
  </template>
</tux-viz-grid>

three-up

Grafana stage-by-stage

ingest health

Landscape · last 24h across all stages

stage 1

Producer

Grafana Open
Producer

stage 2

Pipeline

Grafana Open
Pipeline

stage 3

Storage

Grafana Open
Storage
<tux-viz-grid
  cols="3"
  eyebrow="ingest health"
  title="Landscape · last 24h across all stages"
>
  <tux-viz-embed provider="grafana" src="…" title="Producer" … />
  <tux-viz-embed provider="grafana" src="…" title="Pipeline" … />
  <tux-viz-embed provider="grafana" src="…" title="Storage"  … />
</tux-viz-grid>

notes

Layout rules

  • Below ~32rem container width, every variant collapses to a single column — viz chrome stays legible.
  • Between ~32rem and ~56rem, both 3-up and 4-up render as 2-up. Above ~56rem they unfold to their full column count.
  • Pass aspect ratios on the panes (ratio="16/10", ratio="4/3") — the grid doesn't override them.
  • The footer slot is for source / data-cutoff / caveat copy. Mono font, muted, hairline rule above.