Overview

6 Visualization and insight

Visualization turns the otherwise invisible data structures of a digital twin into information people can quickly understand and act on. By mapping measurements and states from sensors, systems, and models into 2D visuals, teams compress complexity into perceptible patterns that align with how humans process sight far faster than text. Effective design hinges on sound data-to-visual encodings (for example, position for quantities, hue for categories), clear role-based views for operators, engineers, executives, and maintainers, and UX practices like progressive disclosure, fast interactions, and accessibility. Because visuals shape trust, the chapter stresses showing data recency, surfacing uncertainty, and being transparent about any smoothing or aggregation.

The chapter surveys core 2D techniques that deliver insight at different scales and contexts. Charts and timeseries reveal trends, cycles, and anomalies; compact forms like sparklines communicate many signals in little space. Dashboards integrate multiple panels—often with concise indicators such as bullet graphs—to provide at-a-glance system health, especially when paired with spatial cues that anchor metrics to the assets they describe. Schematic views (such as P&IDs and mimic/HMI displays) prioritize functional topology over physical layout to support operations and troubleshooting. Spatial visualizations place data on floorplans or maps to answer “where” immediately, while heatmaps condense dense behavior across time, space, or categories to expose patterns that might be missed in tables.

Delivering responsive, trustworthy visuals at scale requires engineering choices as much as design choices. The chapter outlines when to use SVG, Canvas, or GPU-accelerated WebGL; how to keep interactions fluid with culling, debouncing, and pre-aggregation; and how to manage exploding timeseries via decimation (including visually lossless simplification) and multi-resolution storage so viewers can zoom smoothly from overview to detail. It also recommends favoring production-ready platforms like Grafana for most monitoring needs—benefiting from native timeseries support, heterogeneous data source integration, alerting, and interactive exploration—reserving custom rendering for the truly specialized views. The unifying theme is to make the right information obvious, fast, and reliable, without hiding the limits or freshness of the underlying data.

Jacques Bertin’s seven visual variables from his 1967 book Sémiologie graphique provide a ruleset for translating raw sensor data into actionable visual insights in a digital twin.
ch06 f01 biegel
A line graph plotted for the daily mean, low, and high temperatures from a temperature sensor in my hallway over a forty-five day period in spring, allowing for continuous monitoring of the sensor’s performance and detecting any unusual or unexpected thermal patterns.
ch06 f02 biegel
A visualization of all sensor measurements related to a specified space, for a given time period in my home. Each set of measurements is rendered as a sparkline graph, showing the minimum, maximum, average, and latest reading for the given time period.
ch06 f03 biegel
Sparklines in Microsoft Excel can clearly communicate trends across large data sets.
excel
A dashboard showing a range of telemetry from the ISS, enabling mission controllers and crew to continuously monitor complex systems and environmental conditions in real-time.
ch06 f04 biegel
An example of a dashboard built with AWS TwinMaker showing the same telemetry data from the ISS as figure 6.6, but spatially located on a 3D model of the station itself, to support better contextualization of the data. Source: https://aws.amazon.com/blogs/publicsector/using-aws-iot-twinmaker-build-spacecraft-digital-twin/.
ch06 f05 biegel
A P&ID diagram shown in Cognite Data Fusion™ showing equipment on the Valhall oil production platform. Image © Cognite™ ( https://www.cognite.com/en), reproduced with permission.
pid
A mimic of a physical operator panel showing how important components are connected together and overlaying data from sensors. Source https://www.dexdyne.com/veolia-water. © Dexdyne.
ch06 f06 biegel
Data visualization overlaid over a floorplan to provide spatial context to the data, linking abstract measurements and metrics directly to their physical location, and guiding effective physical actions.
ch06 f07 biegel
An orthomosaic image of a construction site created from drone photography and overlaid on a map. Available at https://data.geonadir.com/image-collection-details/1682. © OpenStreetMap, GeoNadir
ch06 f08 biegel
A heatmap showing the hourly distribution of power import in my home over a week in September 2025.
heatmap
A performance comparison of web rendering technologies. Selecting the right technology depends heavily on the number of visual elements required.
rendering
An example of applying the RDP algorithm to 1000 data points, reducing these to 16 points, while maintaining the essential shape of the trend.
ch06 f09 biegel
Configuration of the Infinity data source using jq to transform the nested JSON of the API response into tabular data for charting.
ch06 f10 biegel
Two transformations configured in the Infinity data source to format the data correctly for Grafana timeseries visualization.
ch06 f11 biegel
A Grafana dashboard containing a single panel showing voltage fluctuation over time.
ch06 f12 biegel

Summary

  • Visualizations reveal the digital representation of reality a digital twin presents to users, depending on the power of human visual processing, to aid decision-making.
  • The principles of mapping data to a visual representation influence how you build visualizations to convey your digital model.
  • 2D visualizations include graphs, charts, dashboards, and spatial and topological components that communicate large amounts of data in a way that can be quickly interpreted and understood.
  • You can adopt a number of techniques to ensure your visualizations are usable and well performing.
  • Tools such as Grafana enable you to quickly build powerful visualizations in a low to no-code environment and free you from the effort of writing custom code.

FAQ

Why does graphical visualization matter in digital twins?Visuals turn complex, multi-source data into actionable insight that humans can grasp quickly. Because the brain processes images extremely fast (as little as ~13 ms), charts, maps, and diagrams reveal patterns, anomalies, and trends that would be missed in tables—like spotting a temperature hotspot on a color‑coded floorplan at a glance.
How should I map data to visuals? What are the most effective visual variables?- Use Jacques Bertin’s visual variables: position, size, shape, value (brightness), color (hue), orientation, texture. - Position is most effective for quantitative differences (why line charts excel for trends). - Practical mapping: - Quantitative: position, size, color (avoid saturation for precise values) - Categorical: color hue, shape, texture (limit distinct colors; use conventions) - Timeseries/trend: position (consistent time scales) - Spatial: position (match coordinate system/aspect ratio; cluster dense data) - Distribution: size/color (avoid pie charts for subtle differences)
Do all digital twins need a visual interface? If so, what UX guidelines should I follow?- Not always. Headless twins focused on automation/control don’t need UIs. Build visuals when humans must monitor, diagnose, or confirm logic. - UX guidelines when you do build: - Show the right amount of information: start with status/KPIs/alerts; enable drill‑downs/tooltips. - Keep interactions fast: test on real data; pre‑aggregate and simplify to avoid lag. - Design for roles: - Operators need at‑a‑glance alerts and current states. - Engineers need context/history and dense timeseries. - Executives need summarized KPIs (e.g., monthly trends).
Which visualization components work well for dashboards, and when should I use them?- Line charts: most effective for continuous trends and comparisons. - Sparklines: compact, inline trend summaries across many metrics (great for dense dashboards). - Bullet graphs: compare a value against targets/qualitative ranges in little space. - Dashboard design principles: 5‑second rule for critical info, use visual variables judiciously, match chart to data (e.g., gauges for single values, not trends), and progressively disclose detail.
When are schematics (P&IDs, mimics/HMIs) better than spatially accurate views?When understanding logic/topology matters more than physical layout. P&IDs abstract pipes/instruments to show functional connections clearly. Mimics/HMIs mirror process flow and current states (e.g., pumps, pressures) for rapid operator comprehension. They reduce cognitive load vs. navigating complex 3D geometry.
How do I overlay sensor data on floorplans or maps effectively?- Floorplans: geo‑reference sensors to the image’s (x, y); ensure coordinate system matches the image aspect ratio; use clustering to avoid clutter. - Geospatial: place data in real-world context (construction, farms, plants); include geolocated imagery/video; orthomosaics from drones provide fast, low‑cost, up‑to‑date site overviews that can be refreshed frequently.
How do I keep 2D visualizations fast and responsive?- Aim for ~60 FPS (~16.7 ms/frame). - Pick the right renderer: - SVG for interactive diagrams/dashboards with <~5,000 elements. - Canvas for many dynamic elements (thousands of markers, live charts). - WebGL for very large datasets/complex visuals (dense heatmaps). - Optimize: viewport culling (render only what’s visible), debounce interactions, pre‑aggregate/bin data and reveal detail on zoom.
How should I handle huge timeseries? Decimation vs. aggregation explained.- Decimation: reduce points while preserving shape for a given window. - Methods: uniform sampling (simple; may miss spikes), peak‑preserving (keep min/max per window), visually lossless simplification (e.g., RDP). - Aggregation: summarize into time windows to show structure at the right scale. - Store min/mean/max/std per interval; precompute multiple “grains” (minute/hour/day); switch resolution by zoom level. - RDP example: dramatically cuts points (e.g., 1000 → 16) while keeping the curve’s essential shape.
How do I communicate data freshness and uncertainty to build trust?- Show data age explicitly (last update time). - Expose uncertainty where it matters (confidence bands, tolerance/min‑max envelopes). - Avoid silent smoothing: if you aggregate, decimate, or filter, indicate it in the UI so users don’t over‑trust cleaned data.
Why use Grafana for digital twin dashboards instead of building from scratch?- Benefits: first‑class timeseries support, unified view across heterogeneous sources, production‑ready dashboards (alerting, theming, mobile), and fast interactive exploration. - Cost/effort: covers ~80–90% of needs without custom code; focus your effort on domain modeling and unique views. - Example hookup: run Grafana with the Infinity plugin, query your GraphQL API, transform nested JSON (e.g., with jq) into tabular form, set the time field correctly, and let Grafana handle querying, transforms, and rendering across time ranges.

pro $24.99 per month

  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose one free eBook per month to keep
  • exclusive 50% discount on all purchases
  • renews monthly, pause or cancel renewal anytime

lite $19.99 per month

  • access to all Manning books, including MEAPs!

team

5, 10 or 20 seats+ for your team - learn more


choose your plan

team

monthly
annual
$49.99
$499.99
only $41.67 per month
  • five seats for your team
  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose another free product every time you renew
  • choose twelve free products per year
  • exclusive 50% discount on all purchases
  • renews monthly, pause or cancel renewal anytime
  • renews annually, pause or cancel renewal anytime
  • Digital Twins in Action ebook for free
choose your plan

team

monthly
annual
$49.99
$499.99
only $41.67 per month
  • five seats for your team
  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose another free product every time you renew
  • choose twelve free products per year
  • exclusive 50% discount on all purchases
  • renews monthly, pause or cancel renewal anytime
  • renews annually, pause or cancel renewal anytime
  • Digital Twins in Action ebook for free
choose your plan

team

monthly
annual
$49.99
$499.99
only $41.67 per month
  • five seats for your team
  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose another free product every time you renew
  • choose twelve free products per year
  • exclusive 50% discount on all purchases
  • renews monthly, pause or cancel renewal anytime
  • renews annually, pause or cancel renewal anytime
  • Digital Twins in Action ebook for free