Visualization turns a digital twin’s data and model into forms people can interpret and act on. It is not a requirement for every twin: analytics, automation, and control can run without a visual interface. Add one when a person needs to monitor conditions, investigate a problem, intervene, or confirm what the system is doing. section 6.0 section 6.1.2
Choose the view for the question and the data, not for visual complexity. Charts expose values and changes over time; floor plans and maps show where conditions occur. A higher-dimensional view is not automatically better: 2D charts give precise trends without spatial context, while geospatial views need accurate coordinates and provide less detail about individual components. section 6.2 section 7.6
Table 6.2 Different roles have different visualization needs.
|
Role
|
Primary question
|
View requirements
|
|---|---|---|
|
Operator
|
“Is the pump running right now?”
|
At-a-glance alerts, color-coded status indicators, current state
|
|
Engineer
|
“Why did the pump fail last Tuesday?”
|
Dense time-series data, raw sensor values, historical comparisons
|
|
Executive
|
"Are we improving this quarter?"
|
Highly summarized KPIs, monthly trends
|
Use the role-to-question table to choose the first screen: current status for an operator, historical sensor detail for an engineer, or summarized trends for an executive. section 6.1.2
From sensor readings to a useful trend
A home temperature sensor produces 6,375 readings over 45 spring days. Summarizing each day by its low, high, and mean reduces the series to 45 records; plotting those summaries as lines makes the warming trend and unusual patterns easier to spot. When screen space is scarce, a sparkline shows the trend inline, such as one miniature chart per sensor in a table. section 6.2.1
result.spaces.forEach(space =>
space.measurements.forEach(({ name, values }) => {
const chartsDiv = document.getElementById('charts');
const chartDiv = document.createElement('div');
chartsDiv.appendChild(chartDiv);
const timestamps = values.map(({ timestamp }) #1
=> parseInt(timestamp) / 1000);
const chartValues = values.map(({ value })
=> parseFloat(value));
new uplot({
width: 300,
height: 30,
axes: [ { show: false }, { show: false } ], #2
series: [ {}, {stroke: "#0066cc", fill: "#3b82f619"} ],
legend: { show: false }, #3
cursor: { show: false }
}, [timestamps, chartValues], chartDiv);
}));
The focused JavaScript listing turns measurement timestamps and values into compact uPlot sparklines, hiding axes, legend, and cursor to emphasize trends. section 6.2.1
Spatial views answer a different question: where should someone act? Place a reading at its sensor’s coordinates on a floor plan, or overlay geolocated imagery on a map. Accurate alignment matters; without it, the visual location may not reliably explain the measurement. section 6.2.4
Keep the initial view focused on status, key metrics, and exceptions, with tooltips or drill-downs for detail. Test filtering, panning, and zooming against real data. If interactions lag, render fewer elements, simplify shapes, or pre-aggregate readings. Direct manipulation benefits from low latency; a static dashboard need not meet the same responsiveness target. Show uncertainty and data-quality problems rather than letting a polished display imply unwarranted confidence. section 6.1.2 section 6.3
