visualizations

TuxMetroInset

Single-metro neighborhood-grid companion component designed for comparative side-by-side analysis (Houston · DFW · Austin · San Antonio). Each cell represents an abstracted census tract encoded along a 5-step sequential color ramp, overlaid with a dashed diagonal highway trunkline and route marker.

Sister to TuxChartGeographic. When the question is statewide, use the county, district, dot-density, or flow maps; when drilling down into metro-level patterns, pair with TuxMetroInset.

Interactive Regional Lab

Metro Inset & Tract Grid Workbench

Presets:

Houston

Properties Inspector6 configurable knobs

Metropolitan Areaname

Highway Interstate BadgehighwayLabel

Color Ramppalette

Grid Columnscols

Grid Rowsrows

Render Height (px)height

Dynamic Component Syntax

<tux-metro-inset
  name="Houston"
  highway-label="I-45"
/>

canonical presentation

4-Up Texas Metro Grid

Standard comparative quadrant for the Texas Big Four metropolitan areas. Each inset renders responsive SVG cells with an interstate highway badge.

Houston

Dallas–Fort Worth

Austin

San Antonio

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <TuxMetroInset name="Houston" highway-label="I-45" />
  <TuxMetroInset name="Dallas–Fort Worth" highway-label="I-35E" />
  <TuxMetroInset name="Austin" highway-label="I-35" />
  <TuxMetroInset name="San Antonio" highway-label="I-10" />
</div>

color ramps

Maroon vs. Slate Palettes

Choose between the signature Texas A&M maroon sequential ramp (--map-seq-maroon-1..5) or the neutral slate sequential ramp (--map-seq-slate-1..5) for secondary exhibits.

maroon ramp (default)

Austin Metro

slate ramp (neutral)

El Paso Metro

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <div class="card-static p-4">
    <p class="eyebrow mb-2">maroon ramp (default)</p>
    <TuxMetroInset name="Austin Metro" highway-label="Loop 1" palette="maroon" />
  </div>
  <div class="card-static p-4">
    <p class="eyebrow mb-2">slate ramp (neutral)</p>
    <TuxMetroInset name="El Paso Metro" highway-label="I-10" palette="slate" />
  </div>
</div>

configuration

Custom Grid Dimensions & Seeds

Control grid granularity with :cols and :rows, configure height with :height, and generate deterministic pseudo-random heat patterns via the seed prop.

compact (6 × 4)

Bryan-College Station

dense (10 × 8)

Houston Outer Ring

custom seed

Corpus Christi

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
  <div class="card-static p-4">
    <p class="eyebrow mb-2">compact (6 × 4)</p>
    <TuxMetroInset name="Bryan-College Station" highway-label="SH 6" :cols="6" :rows="4" :height="160" />
  </div>
  <div class="card-static p-4">
    <p class="eyebrow mb-2">dense (10 × 8)</p>
    <TuxMetroInset name="Houston Outer Ring" highway-label="Beltway 8" :cols="10" :rows="8" :height="260" />
  </div>
  <div class="card-static p-4">
    <p class="eyebrow mb-2">custom seed</p>
    <TuxMetroInset name="Corpus Christi" highway-label="I-37" seed="port-corpus" :height="220" />
  </div>
</div>

editorial framing

Inside a TuxChartFrame

Wrap the 4-up grid inside TuxChartFrame to produce publication-ready exhibits complete with report numbering, title, and citation.

Exhibit 5.04 · Comparative Insets

Urban Congestion Heatmaps by Metro

Synthesized census tract intensity across major Texas metropolitan hubs.

Houston

Dallas–Fort Worth

Austin

San Antonio

<TuxChartFrame
  eyebrow="Exhibit 5.04 · Comparative Insets"
  title="Urban Congestion Heatmaps by Metro"
  subtitle="Synthesized census tract intensity across major Texas metropolitan hubs."
  source="Source: TxDOT GIS Division / TTI Mobility Analysis 2026."
  notes="Each cell represents tract travel delay index. Diagonal line indicates primary interstate trunkline."
>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-2">
    <TuxMetroInset name="Houston" highway-label="I-45" />
    <TuxMetroInset name="Dallas–Fort Worth" highway-label="I-35E" />
    <TuxMetroInset name="Austin" highway-label="I-35" />
    <TuxMetroInset name="San Antonio" highway-label="I-10" />
  </div>
</TuxChartFrame>

api reference

Props Documentation

Prop	Type	Default	Description
name	string	required	Name of the metropolitan area displayed above the grid.
highwayLabel	string	required	Interstate route badge text positioned along trunkline.
palette	'maroon' \| 'slate'	'maroon'	Sequential 5-step map ramp for intensity cells.
cols	number	8	Number of columns in the census tract grid.
rows	number	6	Number of rows in the census tract grid.
height	number	200	Rendered height of the SVG tile in pixels.
seed	string	undefined	Optional PRNG seed string (defaults to `name`).