Skip to main content

visualizations

TuxChartFrame

Editorial wrapper that ties native chart components into the TUX type system. Provides an uppercase tracked eyebrow, Oswald display title, 2px maroon signature rule, container-queried layout slot, and methodological notes with source citations.

Use bare charts in dashboard tiles; reach for TuxChartFrame whenever a chart represents a numbered exhibit or formal publication figure.

Interactive Publication Frame

Editorial Frame Workbench

Presets:

Exhibit 4.02 · TxDOT Project 0-6999

Corridor Travel Time Index

Peak congestion index across top 5 urban corridors statewide.

00.511.5IH-35 AustinIH-610 HoustonUS-59 SW FwyIH-35E DallasIH-10 Katy1.841.681.551.481.41

Index reflects average peak travel time relative to free-flow conditions.

Source: TTI Urban Mobility Report 2026, Table 3. TxDOT Project 0-6999.

Properties Inspector6 configurable knobs
Exhibit Eyebroweyebrow
Display Titletitle
Subtitle / Ledesubtitle
Source Citationsource
Methodological Notesnotes
Bare Mode (Omit Signature Rule)bare
false
Dynamic Component Syntax
<tux-chart-frame
  eyebrow="Exhibit 4.02 · TxDOT Project 0-6999"
  title="Corridor Travel Time Index"
  subtitle="Peak congestion index across top 5 urban corridors statewide."
  source="Source: TTI Urban Mobility Report 2026, Table 3. TxDOT Project 0-6999."
  notes="Index reflects average peak travel time relative to free-flow conditions.">
  <!-- Chart visual slot -->
</tux-chart-frame>

editorial exhibit

Standard Numbered Exhibit

The default presentation establishes an authoritative publication rhythm with an eyebrow tag, Oswald headline, maroon accent rule, and formal source line.

Exhibit 4.02 · TxDOT Project 0-6999

DOI 10.13021/tti.umr.2026

Corridor Travel Time Index

Peak congestion index across top 5 urban corridors statewide. Threshold target is 1.45.

Congestion Index (5 points, falling trend): peak 1.84 at IH-35 Austin, low 1.41 at IH-10 Katy, mean 1.59.
00.511.5IH-35 AustinIH-610 HoustonUS-59 SW FwyIH-35E DallasIH-10 Katy1.841.681.551.481.41

Index reflects average peak travel time relative to free-flow conditions.

Source: TTI Urban Mobility Report 2026, Table 3. TxDOT Project 0-6999.

<TuxChartFrame
  eyebrow="Exhibit 4.02 · TxDOT Project 0-6999"
  title="Corridor Travel Time Index"
  subtitle="Peak congestion index across top 5 urban corridors statewide. Threshold target is 1.45."
  source="Source: TTI Urban Mobility Report 2026, Table 3. TxDOT Project 0-6999."
  notes="Index reflects average peak travel time relative to free-flow conditions."
>
  <TuxChartBar
    :labels="corridorLabels"
    :series="corridorSeries"
    orientation="horizontal"
    unit="index"
  />
</TuxChartFrame>

compact variant

Bare Mode for Dashboard Tiles

Pass :bare="true" to omit the maroon signature rule and streamline the typography, optimal for dense operational dashboards and multi-column telemetry grids.

Telemetry Feed 01

IH-35 Northbound Flow

64.2 mph Average Corridor Velocity

Sensor Loop 14A · Live

Telemetry Feed 02

Loop 1 Southbound Flow

28.7 mph Congestion Incident Detected

Sensor Loop 09B · Live

<TuxChartFrame
  eyebrow="Real-Time Telemetry"
  title="Corridor Flow Ratio"
  bare
  source="Sensor loop 14A · Refreshed 30s ago"
>
  <div class="h-28 flex items-center justify-center border border-dashed border-surface-border rounded text-text-muted text-sm">
    Compact telemetry chart body inside bare frame
  </div>
</TuxChartFrame>

slot composition

Footer Slot Composition

Use the #footer slot to append interactive controls, data export links, or governance badges directly below the source citation.

Exhibit 8.01

Freight Corridor Tonnage

Freight Distribution Density Matrix

Annual commercial freight tonnage aggregated at standard metropolitan boundaries.

FHWA FAF5 Database · Bureau of Transportation Statistics

Validated Dataset · FY26
Export CSVView Metadata
<TuxChartFrame
  eyebrow="Exhibit 8.01"
  title="Freight Corridor Tonnage"
  source="FHWA FAF5 Database · Bureau of Transportation Statistics"
>
  <div class="h-32 flex items-center justify-center bg-surface-sunken rounded text-text-secondary text-sm">
    Primary Visualization Content Area
  </div>

  <template #footer>
    <div class="mt-3 flex items-center justify-between pt-2 border-t border-surface-border text-xs">
      <span class="badge-status">Peer Reviewed</span>
      <div class="flex gap-2">
        <button class="link-tti">Download CSV</button>
        <button class="link-tti">API Query</button>
      </div>
    </div>
  </template>
</TuxChartFrame>

api reference

Props & Slots

Prop / SlotTypeDefaultDescription
eyebrowstring""Tracked uppercase exhibit label (e.g. "Exhibit 11.01" or "Slide 9").
titlestring""Display-face title rendered in Oswald typography.
subtitlestring""Lede or clarifying context below title, preceding the rule.
sourcestring""Mono uppercase formal source citation rendered in the footer.
notesstring""Methodological note preceding the source line.
barebooleanfalseOmits the maroon signature rule for compact dashboard tile layouts.
defaultslot—Primary chart body container.
footerslot—Optional slot appended beneath the source and notes lines.