River Widget · layout examples

Four embeds.
One script tag.

Every widget on this page is a separate embed with its own gauges and styling. The loader is included once and mounts all of them — drop as many as a page needs, wherever the design wants them.

Above the fold

One river, given room. Background and border off so the readings sit straight on the section, with the hydrograph anglers recognise from the USGS site.

Today on the Hoh

Hoh River — current flow

data-chart="hydrograph" data-gridlines="horizontal" data-bg="transparent" data-border="none" data-value-color="#eaf4f8" data-muted="#7f9fae" data-grid-color="#24404e"

A grid further down

Three separate embeds, compact, sparklines only. Each could equally be one embed with three gauges — separate ones let the page decide the layout.

Calawah River Queets River Bogachiel River

The Bogachiel gauge reports stage but not discharge, so that card asks for data-metrics="stage,trend". Ask a gauge for a reading it does not publish and the field simply will not appear.

Beside an article

A narrow sidebar embed next to running text, and another dropped inline where a river gets mentioned.

East side, late season

The Methow drops steadily through September, and by the time the larch turn it is low and clear enough that a heavy line is a liability. Two gauges tell the story between them: Winthrop up top, Pateros down where the river meets the Columbia.

Methow River flows

When Winthrop reads under 300 and Pateros is holding, the upper river fishes small and the lower one is worth the drive.

A river you do not normally fish

One gauge at the foot of a blog post, borrowing the page's own typeface and no card at all.

Yakima River at Umtanum

data-theme="bare" inherits your colours entirely; data-chart="none" drops the chart.

The only script on this page

Included once, at the end. It finds every embed above, mounts each with its own settings, and shares one request between widgets asking for the same gauges.

<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=1;
js.src='/v1/widget.js';fjs.parentNode.insertBefore(js,fjs);}}
(document,'script','riverwidget-js');
</script>

The id guard means pasting the snippet with every embed is harmless — the script still loads exactly once.