Engineering charts that preserve units, provenance and uncertainty

The colour scale is making an argument

A dramatic red patch may describe a changing road—or merely a changing legend.

These are original RoadSense editorial design recommendations. They are intended to make an engineering explanation easier to inspect and discuss.

Translate the value into a plotting coordinate

Governing relationship: y = y0 − H(v − vmin)/(vmax − vmin).

v: data value; vmin and vmax: displayed axis limits; H: available plot height.

The pair is 3.60 and 4.25; Δv = 0.65 for both scales.

The film first plots value, then follows the calculation and plots difference / plot height. The displayed difference grows from 0.130H to 0.325H, a factor of 2.5, while the underlying difference stays 0.65.

Coordinate encoding

A value depends on its axis

A changed visual difference does not change the numerical difference.

Download example data (CSV)

Model, calculations and transcriptEquations, worked steps, source notes and a timed reading guide

Understand the model

An axis maps data values to positions. Changing the displayed range changes the visual separation even when the data stay fixed.

Work through the inputs and equations below, then compare the calculated output with the film. All numerical inputs in this study are synthetic.

Inputs and symbol key

v; vmin; vmax

Data value and lower/upper axis limits in the same data unit.

h; H

Displayed height and total available plot height in the same length unit.

Δv; Δh

Difference between data values and between displayed heights.

Values used in this film

• v: data value; vmin and vmax: displayed axis limits; H: available plot height.
• The pair is 3.60 and 4.25; Δv = 0.65 for both scales.

The mathematical relationships

1. Equation 1

   Source and scope
   $$h/H=\frac{v-v_{min}}{v_{max}-v_{min}}$$

   Subtract the lower axis limit, divide by the displayed range and multiply by plot height.

2. Equation 2

   Source and scope
   $$\Delta h/H=\frac{\Delta v}{v_{max}-v_{min}}$$

   The visual difference is the data difference divided by the axis range. A shorter range magnifies the displayed separation.

Work through the example

Use the relationships above with consistent units. These substitutions are our worked example, not values quoted from the source.

1. Data difference

   4.25 − 3.60 = 0.65

   data units

2. Full-axis height difference

   0.65 / (5 − 0) = 0.130

   fraction of plot height

3. Truncated-axis difference

   0.65 / (5 − 3) = 0.325

   fraction of plot height

4. Visual amplification

   0.325 / 0.130 = 2.5

   dimensionless

Read the output

The displayed difference grows from 0.130H to 0.325H, a factor of 2.5, while the underlying difference stays 0.65.

Check your understanding

Round-trip representative values through the coordinate mapping, including axis endpoints. Verify that visible labels, SVG positions and downloadable data agree. In a responsive layout, change pixel dimensions without changing the represented values.

Assumptions and limits

A changed visual difference does not change the numerical difference.

Return to the full references and method notes to check the cited edition and its applicability.

Timestamped film transcript 25 short entries · select a time to revisit the film

1. 0:00

   A value depends on its axis. Compare zero-based and truncated scales for 3.6 and 4.25.

2. 0:01

   MATHEMATICS · define the relationship and the meaning of each symbol before calculating.

3. 0:07

   v: data value; vmin and vmax: displayed axis limits; H: available plot height. The pair is 3.60 and 4.25; Δv = 0.65 for both scales.

4. 0:14

   INPUT · unchanged values · read the axis units and the numerical values.

5. 0:23

   Compare zero-based and truncated scales for 3.6 and 4.25.

6. 0:35

   The numerical difference stays 0.65. Truncating the axis increases the displayed height difference.

7. 0:43

   OUTPUT · displayed height difference · read the axis units and the numerical values.

8. 0:52

   The displayed difference grows from 0.130H to 0.325H, a factor of 2.5, while the underlying difference stays 0.65.

9. 0:59

   CALCULATION · substitute the defined inputs; keep units through each intermediate step.

10. 1:05

    Data difference: 4.25 − 3.60 = 0.65 data units

11. 1:08

    Full-axis height difference: 0.65 / (5 − 0) = 0.130 fraction of plot height

12. 1:11

    Truncated-axis difference: 0.65 / (5 − 3) = 0.325 fraction of plot height

13. 1:14

    Visual amplification: 0.325 / 0.130 = 2.5 dimensionless

14. 1:17

    SENSITIVITY · change one declared input · read the axis units and the numerical values.

15. 1:26

    Axis 0–5: 0.13 fraction of plot height. Full five-unit span.

16. 1:29

    Axis 2–5: 0.216667 fraction of plot height. Three-unit span; values unchanged.

17. 1:33

    Axis 3–5: 0.325 fraction of plot height. Two-unit span; values unchanged.

18. 1:36

    Check: Round-trip representative values through the coordinate mapping, including axis endpoints. Verify that visible labels, SVG positions and downloadable data agree. In a responsive layout, change pixel dimensions without changing the represented values.

19. 1:42

    ONE ROW · A dramatic red patch may describe a changing road—or merely a changing legend.

20. 2:00

    PARAMETER MAP · 12261 evaluated cells. The colour limits stay fixed across every row.

21. 2:10

    The same fixed colour limits apply to every row. A local bump near 650 m sits within a wider spatial wave and a smaller prescribed time oscillation. Compare locations at equal

22. 2:21

    time, then revisit one location through the rows. No causal relationship between time and distress is claimed; this is a test signal for inspecting visual encodings.

23. 2:31

    VALUE LANDSCAPE · Height and colour encode Synthetic response (m/km). This is a graph over the two input axes, not automatically a physical pavement shape.

24. 2:43

    Synthetic response, not a survey or degradation forecast. Automatic per-row colour scaling would destroy direct colour comparability, even though the underlying values remain unchanged.

25. 2:51

    A changed visual difference does not change the numerical difference.

Download the timed captions (VTT)

The transcript records the on-screen wording. Formula provenance and interpretation are explained in the source note above.

Keep the visual honest

Show axis units, the observation period, missing data and the method used to summarise values. Use a caption to distinguish measured values from synthetic examples. Colour can support a distinction, but a label or pattern must carry it too.

Audit a misplaced marker

On an axis from x=20 to x=700 representing 0 to 8, a value of 3.6 belongs at x=20+(3.6/8)×680=326. A marker at x=381.2 would imply approximately 4.25. Validate the geometry from the data rather than positioning by eye.

Make the encoding reproducible

An animation should reveal a relationship, not imply precision the data do not support. Provide a static explanation, readable captions and controls for motion.

Give the reader a path back to the numbers

A useful chart caption identifies what is plotted, where the values came from and what transformations were applied. If a line connects discrete observations, explain whether the connecting line is only a visual guide or a model result.

Missing observations should remain distinguishable from measured zeroes. A zoomed axis should show its limits clearly. If two plots are meant to be compared, use compatible scales or explain the difference.

For an interactive example, update the text result with the picture. Someone using a keyboard or reading without animation should still understand the relationship. The static article, labelled controls and written video transcript form part of the explanation rather than optional extras.

Reconstruct the scale to check the drawing

A horizontal axis starts at x = 20 and ends at x = 700, representing values from 0 to 8. The available plot width is 700 − 20 = 680 pixels. A value v therefore maps to x = 20 + (v / 8) × 680.

For v = 3.6, the correct position is 20 + 0.45 × 680 = 326. If the marker is instead drawn at x = 381.2, the implied value is (381.2 − 20) / 680 × 8 = 4.2494, approximately 4.25. The visual error changes the apparent result by about 0.65 units.

Case review

The legend participates in the conclusion

Did the road change, or did the plotting scale change?

Value A · 3.6 Axis units

The discriminating check

Inspect units, axis bounds, colour limits, aggregation support and the source-to-plot transformation.

Evidence supports the comparison

With fixed, declared encodings, compare the values and explain the size of the difference in the original units.

Evidence is missing or incompatible

If limits or aggregation changed, reproduce the comparison on a common basis before interpreting the visual contrast.

What you can conclude. A visual difference must be traceable to data or an explicitly declared transformation.

Original worked case. Read the source editions and method notes.

The numbers on the page may be correct while the marker is wrong. That is why visual verification should check geometry from data rather than rely on whether a chart looks balanced. The same principle applies to axes, colour scales, segment widths and three-dimensional exaggeration.

Visual choice	What the reader should be able to establish
Axis range	Whether the baseline is zero or truncated
Connected points	Whether the line is a guide or a fitted model
Colour	Which variable or category it encodes
Missing data	How absence differs from a measured zero
Animation	Which relationship changes and which values remain fixed

Motion should expose structure without making the data unstable. A line can draw into view while retaining its final values. A reader can inspect a bar with pointer or keyboard focus. A compact pause control can stop movement without hiding the explanation.

The standard for a good engineering visual is not decoration density. It is whether another person can recover the meaning of the result, inspect the assumptions and identify what the figure does not establish. These are original RoadSense editorial recommendations; no external certification is asserted.

Calculation laboratory

How can the same numbers look two-and-a-half times further apart?

Calculation step	Substitution or result	Units and interpretation
Data difference	4.25 − 3.60 = 0.65	data units
Full-axis height difference	0.65 / (5 − 0) = 0.130	fraction of plot height
Truncated-axis difference	0.65 / (5 − 3) = 0.325	fraction of plot height
Visual amplification	0.325 / 0.130 = 2.5	dimensionless

A linear axis is an affine transformation: a scale factor multiplies the data and an offset places the axis origin. The transformation can be inverted, so every plotted coordinate should resolve back to the intended value. In an SVG whose vertical coordinate increases downward, use y = ybottom − H(v − vmin)/(vmax − vmin). Forgetting that sign reverses the displayed ordering.

The original values stay visible beside the transformed geometry. Truncating an axis can help examine small differences, but readers must be able to see the limits and understand the baseline. For bars, apparent length often carries the comparison, making an undisclosed truncated baseline particularly misleading. A point plot can emphasise position instead, with the same clearly labelled scale.

Consistent scales are equally important in animated comparisons and heatmaps. If the colour maximum is recalculated for every frame, an unchanged colour can represent a different stress. Fix the scale for a parameter sweep, label any clipping, and keep missing observations distinct from zero. The examples here are original coordinate calculations rather than a prescribed engineering standard. A premium technical figure earns trust by letting the reader recover its data, units and source, not by making small changes look dramatic.

Controlled sensitivity experiment

Controlled case	Calculated output	What changes
Axis 0–5	0.130000 fraction of plot height	Full five-unit span.
Axis 2–5	0.216667 fraction of plot height	Three-unit span; values unchanged.
Axis 3–5	0.325000 fraction of plot height	Two-unit span; values unchanged.

CALCULATION LABORATORY

How can the same numbers look two-and-a-half times further apart?

Compare the cases on a fixed scale. Select a case to inspect its input change and calculated output.

Sensitivity case1. Axis 0–52. Axis 2–53. Axis 3–5

Axis 0–5: 0.13 fraction of plot height. Full five-unit span.

Reproduce and challenge the result

Round-trip representative values through the coordinate mapping, including axis endpoints. Verify that visible labels, SVG positions and downloadable data agree. In a responsive layout, change pixel dimensions without changing the represented values.

These are original synthetic calculations. The sensitivity cases vary the stated input while retaining the other assumptions; they are not field observations or treatment thresholds. The film’s calculation and sensitivity chapters use the same numerical cases as this table.

Hold the legend still while the data move

The same fixed colour limits apply to every row. A local bump near 650 m sits within a wider spatial wave and a smaller prescribed time oscillation. Compare locations at equal time, then revisit one location through the rows. No causal relationship between time and distress is claimed; this is a test signal for inspecting visual encodings.

Reproduce the experiment. r(x,t)=3+.4 sin(x/80)+.2 cos(t/3)+.8 exp(−((x−650)/70)²). The downloadable table contains 12,261 evaluated cells, with the two input coordinates and output value retained on every row. These are parameter combinations, not that many independent field observations. The equation extends the worked example above; it is original teaching arithmetic, not a new standard or calibrated prediction.

Computed parameter atlas · 12,261 cells

The colour scale is making an argument

A dramatic red patch may describe a changing road—or merely a changing legend.

Download every calculated cell (CSV) · Open full-size explorer · Equation source and tests (ZIP)

Synthetic response, not a survey or degradation forecast. Automatic per-row colour scaling would destroy direct colour comparability, even though the underlying values remain unchanged.

References and method notes

Original RoadSense editorial guidance and synthetic arithmetic examples. No external standard or certification is asserted.

Use the source edition and project requirements that apply to your work. Educational examples are not site-specific design advice.