Introducing GE’s data visualization framework for IoT
I’d like to introduce you to the Predix Visualization Framework (aka Px-vis) , a charting framework designed and developed by the Predix Design System team in order to meet the needs of users and developers of industrial internet apps. We first released this framework at the end of 2016, and have just released a substantial set of enhancements with our Q1 release.
Before getting to the visualization framework, it’s probably helpful to set some context. A very common use case in industrial applications is to look at sensor data (e.g., from a gas turbine or jet engine) to diagnosis the causes of anomalous behavior (e.g. inefficient combustion) or an operational fault.
In these situations, engineers look at data about things like temperature, pressure and vibration, with an eye for correlations that may be suggestive of a known failure mode. They often want to compare the data from an anomalous machine to data from a healthy machine, or from the same machine from a previous time before the anomaly appeared.
Chart types
Px-vis offers a very open-ended modular charting framework, as well as six self-contained charts that you can use out of the box:
Parallel Coordinates: Useful to analyze multivariate data, this chart is comprised of a number of parallel Y-axes, each representing a different parameter or tag.
Pie / Donut Chart: A classic data visualization component for displaying values relative to each other and to the sum of all values. The donut gives additional space in the center of the chart for displaying a sum or total.
Polar Chart: Used to display a series of data that contains both amplitude and phase, such as a vibration analysis of a rotating shaft.
Radar: Similar to a Parallel Coordinate chart with the axes displayed in a radial fashion proceeding clockwise from the “12 o’clock” position.
Timeseries: Allows you to visualize changing values of one or many tags, KPI’s, or other time series data sources over time.
Spark: A compact timeseries plot for plotting a single tag, KPI, etc. in a small space
XY/Line/Scatter : Useful for finding correlations between two or more parameters or tags. Data points are displayed on the chart based on their X and Y values, shown as a point or a line.
Why we made our own charting framework
Px-vis was created in close collaboration with the GE Digital Asset Performance Management team, and with substantial input from users about how they look at data in monitoring and diagnostics scenarios. We created Px-vis because we found that off-the-shelf browser-based charting packages did not meet our users’ needs in a number of ways:
- They’re not capable of showing the volume of data our users would like to see (100’s of thousands of points, minimum)
- They lack key chart types (e.g. parallel axis charts)
- They are not easily extendable when we need to add or enhance features
From a technology perspective, Px-vis relies on the open source d3 library, and provides wrappers around a lot of features and functionalities offered in d3. Px-vis is written using the Web Components standard, using Polymer, and can be incorporated into any framework using the provided Polymer components.
Because of the diversity of data visualization needs we see across the industrial world, we knew it would be difficult to create a set of charts that met everyone’s needs. Instead, as we created a base set of charts to address the most common and substantial user needs, we also created a modular framework to give a developer the power and flexibility she needs while encouraging reuse and avoiding duplication of effort. Instead of duplicating code across each visualization, we reuse the base elements again and again thanks to the power of Web Components.
You can either use the existing charts, build your own, or extend the existing charts using the provided building blocks. You do not need to know Polymer to use any of the charts out of the box, you simply import them and use the tags in your app, with the appropriate attributes. And our framework offers much cleaner and more open-ended possibilities to create your own charts or modify the existing charts without reinventing the wheel with regards to data handling, plotting, and interaction capabilities.
Advantages to using our framework
While it may not offer as many chart types out of the box as major charting libraries, we’re happy to say our framework outperforms these libraries in many ways, in particular with regards to draw time, and offering control over data handling and over design.
Based on our analysis looking at draw time, d3 is just better than HighCharts which uses its own SVG system and starts to slow down very quickly as you add more and more series. Even using d3 with just SVG, it outperformed HighStock by 1–2 orders of magnitude. Add rendering to Canvas and gets a whole lot faster. Other d3 libraries were not hybrid SVG-Canvas systems and thus had the limitations of their respective technology. Since we adopted d3 4.x as soon as it was released, we were able to run with the hybrid charts must faster than if we had opted for another d3 charting library, giving us much better performance than other d3 libraries.
Data handling: with Px-vis, data won’t be altered or binned unless we want it be. One big issue we had with HighStock/HighCharts is how it silently bins the data for performance reasons, and while this can be disabled, it dramatically decreases performance. The problem with the binning is that it creates limitations in terms of how a user can interact with the data (for example, in analytical Monitoring and Diagnostic workflows).
Many of our users’ key scenarios require full control over if and how data is binned, and by using our own system we know the data is pure and our charts are performant. There are other issues such as timezone conversion and timeframe comparison where most off the shelf charting packages have serious limitations in how you can access and transform data in key areas.
Finally, we have full control of the design with d3. Every charting library has opinions on how their chart should look and what behaviors they support, which is often difficult, or impossible to change. This allows us to keep our design aligned to the rest of the Predix Design System.
Additionally, our customers request a lot of very custom elements, such as multi-layer event markers, and very specific interactivity on the chart which are not directly supported in other libraries and require some serious (and potentially fragile) hacking to make work. Starting from scratch gives us full control to realize our chart designs and open up the options to developers which we think they should control.
With the design of the charts, we’ve focused on a number of areas where we felt there were opportunities to create a useful experience for our users. In particular, I’d like to call out several things we’ve done to improve the readability of the visualizations:
- A set of colors that allow users with the most common kinds of color blindness to differentiate between different plots
- Clear layering where the foreground data layer clearly pops off the background framework layer, which contains the scale, register and labels
- A horizontally-oriented register which is visually impactful and space efficient for a smaller number of tags/metrics, and vertically-oriented registers, for space efficient and scan-able presentation of larger numbers of tags/metrics
One of the main reasons we felt it important to invest in building a visualization framework is to enable developers to invent new, meaningful and valuable ways of visualizing industrial data. If you have questions or need assistance, please post them to the Predix forum — we’d love to help.
