Lake Travis, in Signs — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/examples/lake-travis-isotype

Lake Travis, in signs

A live lake dashboard remade with the visual grammar of ISOTYPE: repeated symbols instead of enlarged ones, a small printing palette, direct labels, and diagrams that read as explanations. Underneath the ink, four Semiotic custom frames retain streaming ingestion, keyboard-readable data, tooltips, observation events, and stable mark identity.

CENTRAL TEXAS WATER PICTURE · JULY 2, 2026

How much water is in Lake Travis?

One dam sign represents ten percent of conservation capacity. A partial sign is a partial ten percent—icons repeat; they do not grow.

CURRENT LAKE LEVEL

672.1FEET

8.9 feet below full pool.Full pool is 681 feet above mean sea level.

85.6% FULLEACH SIGN = 10% OF CONSERVATION CAPACITY

83°FWATER TEMP

96°FAIR · SUNNY

SE 5MILES PER HOUR

−0.13FEET TODAY

PUSHED SENSOR READINGS

The lake moves by inches

The checked-in snapshot seeds the chart. New illustrative readings enter through ref.push(), with a 24-reading window, pulse, decay, and staleness handled by the frame.

19 readings received

SEVEN-DAY WEATHER

Heat above; rain below

Two temperature strips preserve the old ISOTYPE weather-page logic. Five small blocks below each day encode rain chance in twenty-point units.

THE WATERSHED AS A PROCESS

Rain does not fall directly into a number

The lake level is a network result: upstream weather, tributaries, reservoir storage, dam operations, and downstream demand. Each node and flow remains a navigable network datum.

GEOGRAPHIC CONTEXT

Follow the Colorado downhill

The GeoFrame resolves the projection and hit testing. The shared pictograms sit at approximate basin locations, while the directional route is an SVG overlay in the same projected coordinate space.

Schematic basin context; symbol placement is approximate and is not a navigational map.

Plan a day at the lake

Boating

Check ramp elevation before towing.

Swimming

Check current water-quality notices.

Paddling

Wind and heat change quickly.

Lake facts

Full pool is 681 feet MSL.

Four frames, one symbol language

The visual richness is deliberately outside the built-in chart catalog, but the data plumbing is not. One shared GlyphDef sign set renders three ways: as interactive glyph scene nodes in the watershed and basin charts (the pictogram is the mark — hit-tested, focus-ringed, canvas-painted), through the library’s <Glyph> for chart chrome, and viaunitize-allocated unit rows for the capacity strip. Semiotic exposes the accessible table, observes hover and focus, keeps stable mark identity, and runs the streaming buffer without ever knowing how to draw a dam sign.

JSX

import { XYCustomChart } from "semiotic/xy" import { NetworkCustomChart } from "semiotic/network" import { GeoCustomChart } from "semiotic/geo" // The watershed pictograms ARE the marks: interactive glyph scene nodes // stamped from one shared GlyphDef sign set — canvas-painted, hit-tested, // keyboard-navigable, no separate hit target. sceneNodes: nodes.map((node) => ({ type: "glyph", cx: positions[node.id].x, cy: positions[node.id].y + 24, // feet-anchored signs stand on cy size: 48, glyph: isotypeGlyphDef(node.kind), color: node.color, style: {}, datum: node, id: node.id, label: node.label, })) // The streaming level chart keeps point nodes (they carry pulse/decay), // pushed through the frame's windowed ingestion: <XYCustomChart ref={levelRef} layout={lakeLevelIsotypeLayout} layoutConfig={{ levelDomain: [671.7, 672.45] }} enableHover accessibleTable onObservation={inspect} frameProps={{ windowSize: 24, pointIdAccessor: "id", decay: { type: "linear", minOpacity: 0.38 }, pulse: { duration: 900, color: "#d72f3f", glowRadius: 7 }, staleness: { threshold: 7000, showBadge: true } }} /> levelRef.current.push({ id: crypto.randomUUID(), level: nextSensorReading })