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 recognize 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.

Six gauges, one embed — drag your window narrower

A single embed set to up to three per row. Narrow the browser and the cards rearrange themselves: three across, then two, then one. Nothing here listens for a screen size.

Measuring…

Washington river flows

The width it reflows at depends on how wide this block is, not how wide your screen is. With three chosen, cards sit three across down to 586px of block width, two down to 386px, and one below that — no card is ever squeezed under 200px. The figure above is read off the cards themselves, so it is what is actually happening rather than what ought to be.

Your numbers will differ, and that is the point. Your theme decides how wide this block is at its own breakpoints; the widget then fits whatever it is given. A sidebar on a wide monitor reflows at the same block width as a phone does, because it is the block being measured either way — so the two sets of breakpoints never argue.

If a grid does not suit the page, place the gauges as separate embeds instead and let your own layout position them — as the trio above does. It costs more requests to USGS, so prefer one embed where the layout allows.

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 colors 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.