Visualising a Haystack Data Model
Like any standard, the adoption of Project Haystack has it challenges. One key issue I found was how to convey the abstract model (or structure) to newcomers. While basic examples exist in the Haystack docs, they fall short of real-world examples to reinforce the concepts. Below I’ll show how visualisation tools can be used to flatten this learning curve.
For the uninitiated, Project Haystack specifies a standard for semantic data modelling. WideSky implements Haystack and more, to give meaning and context to the data sensors and systems can generate. This ultimately powers analytics, data insights and interoperability. An intro article can be found here.
Visualising with Vis.js
Vis.js is an open source visualisation library that uses a simple physics engine to dynamically display automatically organised network views. As the Haystack structure is basically a data graph where entities have multiple relationships defined using reference tags, we can easily map the Haystack structure to vis.js and add the additional tagging metadata as text for rendering in a browser.
Below is a simplified model from our Living Lab . You can zoom, pan and move entities around.
After experimenting with vis.js options e.g. spring constants, gravity and repulsion, a more complex example of our Living Lab could be loaded. Some trends to look for:
- Equip level entities cluster together around their ‘space’ e.g. ‘Level 1’.
- There are 2 ‘sites’ that are interconnected by the ‘weather’ entity.
- Entities with few relationships are repelled away to stand on their own, e.g. the smartbin
Although this method is great for complimenting training and high level exploration, a graphical only view of a haystack model is inefficient for everyday use. That’s where filters and tagging come in. By knowing what tags and relationships you’re interested in, you can get at the entities you’re interested in quickly. I’ll cover how WideSky uses enhances filters with GraphQL for powerful analytics in a later post.
For more examples you can head over to the Bitbucket page that hosts the code and visualisations patrickcoffey.bitbucket.io