Data visualization

On this page

True wind over the last six hours and the next six. Measured is solid, forecast is dashed, the future is shaded, one marker shows now, and the reef threshold is labeled.

A chart aboard is read in a few seconds, often in motion, often by someone who has to decide what to do next. Every chart on every surface uses the same grammar, so a dash, a shaded region or an orange line means the same thing wherever it appears.

01Measured or forecastMeasured data is solid and at full strength. Forecast data is dashed or hollow. The difference is visible without reading a legend.

02One meaning per markA dash means forecast. A thin orange line means a threshold. A shaded region means the future. No mark is reused for anything else.

03Severity stays out of the dataSeries are drawn in neutral and data colors. Severity appears only in thresholds, exceedance tints and status text.

Measured and forecast

One aligned marker shows now on every chart: a vertical line, a dot on the series, and the value at now. Everything to its right is the future: shaded, and drawn dashed.

Measured left of now (solid), forecast right of now (dashed, shaded).

Thresholds

A threshold is a solid, thin line in the warning color, always labeled with what it means: the vessel's reef point, its minimum depth, its anchor alarm radius. Thresholds come from the vessel's configuration, never from a generic default.

Depth under keel over two hours, with the vessel's minimum depth.

Wind as an envelope

Wind is a band from lull to gust with the mean drawn through it. The forecast continues as two dashed bounds, so the reader sees how gusty it will be, not only the average.

True wind: lull-to-gust band with the mean, measured; dashed bounds, forecast.

Direction as arrows

Wind, wave and current direction are drawn as rotated arrows along the time axis, never as a line chart. Past arrows are solid, the arrow at now is circled, and forecast arrows are ghosted. The arrows point downwind, the way the wind is going.

True wind direction, hourly. Past solid, now circled, forecast ghosted.

Model steps as bars

A forecast that arrives in steps, such as a GRIB file with a 3-hour step, is drawn as bars one step wide. A smooth line between the steps would invent values the model never produced. The bar that contains now is emphasized.

GRIB wind forecast in 3-hour steps. The step containing now is filled; the rest are hollow.

Annotations

Peaks, events and turning points are labeled inline on the chart, such as ▲ 26 G 33 · 04:00, slack 16:40 or trough 04:00. Labels never sit only in a tooltip, because a tooltip needs a hover, and a gloved hand on a wet tablet cannot hover. Trends are quantified, such as ▲ +6 m / 30 min, never a bare arrow.

Instrument values

An instrument value is neutral at regular priority and the accent at enhanced priority, the same accent that marks the current page and the live marker. Instruments carry no data color of their own: OpenBridge's enhanced blue is a priority, and in bosun that priority is the accent. In Day and Bright the enhanced color is the accent's darker step, so a value written in it reads at 4.5:1. Night's instruments keep amber regular and green enhanced values.

Using data visualization

Draw the series neutral and show the exceedance with the threshold and a light tint.

Don't

Don't color the series by severity. An orange line reads as a warning before anyone has read the threshold.

Draw a 3-hour model as 3-hour bars. Each bar is one value the model produced.

Don't

Don't join model steps with a smooth curve. It shows values between the steps that the model never produced.

Draw direction as rotated arrows. Swinging through north is a small turn, and it looks like one.

Don't

Don't plot direction as a line. A swing from 355° to 5° becomes a jump across the whole chart.

Report summaries and sparklines

A report has more time to explain a result than a helm display. Keep the same grammar for measured and forecast values, then add the reporting period, metric definition, comparison basis, and evidence. All examples below use illustrative data, not Bosun operating results.

Engineering · example week

Delivery and service quality

Illustrative data, not Bosun operating results. All trends cover Monday through Sunday.

Changes merged97Total for the example week

CI pass rate98%Latest day · range 90–100%

Response p95210 msLatest day · lower is faster

Read the value and its definition first, then the trend. Each metric has its own labeled scale.

Weekly report summary with a combination of count, rate, and latency sparklines

Combine a current value, a short definition, and a sparkline in each metric cell. Label whether the value is a period total, an average, or the last sample. Keep time aligned across cells. A bar sparkline suits a daily count; a line suits a sampled rate or latency. Different units need separate scales, stated beside the metric. Do not compare line heights across cells with independent scales. Point at a trend, or focus it and use the arrow keys.

Tables with multiple trends

Comparison · illustrative data

One window. One scale. Three services.

Daily p95 response time, Monday–Sunday; every trend uses 0–300 ms. Friday data is missing for Data builder.

Service	Sunday	Mon → Sun
Audio	185 ms	−45 ms
Dialogue	230 ms	−50 ms
Data builder	195 ms	+5 ms

A gap means unavailable. Rows share the same units and scale, so their heights can be compared.

Three service trends in one comparison table

When rows share a quantity and unit, use the same time window and vertical scale. Place the latest value and the change beside the sparkline so the reader does not have to estimate them. Keep missing samples as gaps and state their cause. The table stays scrollable on a narrow screen; units and row names remain in the document.

Bars with a rolling line

Activity · illustrative data

Daily counts with a rolling trend

Bars show changes merged each day. The line is a trailing three-day mean, in changes per day.

Daily count—○— Three-day mean

Source: fixed example dataset. Merge counts describe activity; they do not measure product value or engineering productivity.

Chart data

Day	Changes merged
Mon	8
Tue	14
Wed	11
Thu	19
Fri	15
Sat	12
Sun	18

Daily counts with an optional three-day moving average

A combination chart earns its complexity when each mark answers a different question. Here the bars show daily counts and the line shows a trailing mean in the same units. The mean starts only after a complete window exists. The toggle removes the derived series without changing the scale or the measured values. A visible legend and an expandable data table make the chart usable without hover.

Avoid a second vertical axis unless the relationship cannot be expressed with two aligned panels. Two unrelated scales can make any pair of series appear correlated. Show the aggregation method, window, and missing-data rule for every derived line. A count of commits is activity evidence, not a measure of productivity or product value.

Stacked composition

Work mix · illustrative data

Composition with the total preserved

Each bar uses a zero baseline and the same scale. Labels give the count within each category.

FeaturesFixesMaintenance

Chart data

Week	Features	Fixes	Maintenance	Total
Week 1	18	12	10	40
Week 2	24	16	8	48
Week 3	20	10	14	44
Week 4	28	12	12	52

Weekly work categories with the absolute total preserved

Use absolute stacked bars to show both volume and composition. Use a percentage stack only when shares are the question, and provide the absolute totals alongside it. Keep category order stable. Compare a middle segment by its labeled value; its floating baseline makes height comparisons less reliable than grouped bars or small multiples.

For a benchmark, use paired baseline/candidate marks or a distribution with intervals. State hardware, workload, revision, sample count, and uncertainty. For an investor report, use comparable periods and metric definitions; keep forecasts distinct from actual results. The report types guide defines each report's narrative and evidence requirements.

Choosing a report chart

Question	Pattern	Required context
What happened recently?	Value with sparkline	Window, units, value definition, scale
Which comparable service changed?	Table with aligned sparklines	Same domain, same period, latest value and delta
Is a daily count following a trend?	Bars with rolling line	Zero baseline, aggregation window, source values
What makes up the total?	Absolute stacked bars	Stable categories, total, segment values
Did a change improve performance?	Paired comparison or distribution	Baseline, environment, repeatability, variability
What might happen next?	Forecast line with interval	Model, horizon, confidence/quantile definition, measured boundary

Use the categorical data tokens for distinct series, with labels, shapes, or placement that also distinguish them. Severity colors keep their operational meaning. Supply a text summary and source data, check all four themes, and keep essential findings visible in print and on touch devices.

Color: the neutral, accent and severity colors these charts use.
Data integrity: how a chart fed by a dead sensor is gated.
Alarms and severity: the warning color thresholds borrow.
Sparkline: interactive trends, common domains, missing samples, and forecast intervals.
Report types: daily, feature, technical, audit, benchmark, and investor structures.