SpeckleViz
Visualising data flow in Speckle for projects • Last modified on 9/2/2020 • edit

SpeckleViz™ has been created to help you getting a better understanding of the data flow of a specific Speckle Project across users, streams and documents.

As SpeckleViz directly reflects how your Streams are organized and relate to each other within a same Speckle Project, it will make more sense if your Streams have been created, named and organized in a meaningful way.

Where to find the graph

  • You can simply find the graph at the bottom of your Speckle Project's page.
  • Depending on how many Streams are contained within the Project and how many users have read/write access, the graph might take a few seconds to generate itself. So please be patient if you see a blank canvas at first.

Overview

The SpeckeViz interface is divided into 2 main parts: the control interface (composed of the main toolbar, the time range slider and the tag query selector) and the graph canvas itself. Each of these is further explained throughout the next sections.

Toolbar

To interact with the graph, your main weapon of choice is the toolbar, located above the interface. Each command is further explained throughout the next sections.

How to read the graph

  • Circle nodes represent Senders 🚀 and Receivers 📡 (a.k.a local clients)
  • Square nodes represent Streams 🛰️📦 (a.k.a a box of data on the cloud)
  • 🚀🛰️📦 This pattern represents data that has been shared to a Stream by a user through a Sender
  • 🛰️📦📡 This pattern represents data that has been retrieved by a user from a Stream through a Receiver
  • 🚀🛰️📦📡 This pattern is the sum of the two patterns above...
  • Generally, both nodes and edges are coloured according to their createdAt timestamps (dark blue for the newest created, light grey for the oldest). The edge's thickness corresponds to the number of objects being transferred through the respective stream.

  • The pink clusters group the local clients per software file, or document. Below, a Grasshopper session contains two Speckle Receivers and one Speckle Sender.

For now, each type of document is represented by a logo, such as: - Grasshopper: 🦗 - Rhino3D: 🦏 - Dynamo: 🔧 - GSA: 💎

  • The blue clusters group the local clients per user. The user's initials and company are exposed. Below, someone from UCL instantiated 5 Speckle Receivers and 3 Speckle Senders.

How to interact with the graph

  • You can drag nodes around! Just hold left click on a node and drag it around.

  • You can zoom in and zoom out by using the scroll wheel, and pan by holding left click on the background canvas and moving your mouse around it. If your graph disappears, you can still click on the GPS button situated on the toolbar, which will re-center it!

  • As mentioned above, the clients are grouped either by Document GUID or User GUID. You can switch between the two by using the toggle switch situated on left side of the toolbar.

  • Use the slider on the right side of the toolbar to expand/collapse the clusters. This might be useful to disentangle the wires and zoom in on a particular cluster.

  • Right clicking on a stream will trigger a context menu from which you can:

    • view the stream within the viewer app
    • view the stream within the admin app
    • view the stream's raw data
    • view the stream's related client's raw data

  • Use the slider below the toolbar to select and highlight a specific timeframe of your project! When dragging the slider, a badge below it will update and inform you on the number of streams comprised within the specified time range. Clicking on the button itself will open the viewer interface within which the selected streams will be aggregated.

  • If you modify your project in any way (by adding/removing streams to it, for example), you might want to hit the refresh button situated on the toolbar as the graph won't listen for changes and therefore won't update automatically.

  • It is possible to anchor/release the graph by clicking on these icons situated on the toolbar.

  • You can query streams by tag(s) - that you previously entered through the management interface - with the search bar situated below the time range slider.

  • The graph's layout and edges display can be customized through the toolbar buttons EDGES DISPLAY and GRAPH LAYOUT. Regarding the edges display, you can choose between Line, Arc, Diagonal Horizontal, Diagonal Vertical and Diagonal Smart. You can also set the overall graph's layout as Free, Horizontal or Vertical

  • Finally, you can save your graph as .PNG and share it with your team!

Example

The video below showcases how the graph can be deployed onto a design data set, from design to fabrication stages.

The End

That's it. We hope that you will find this interface useful. If you have any feedback or feature requests, please let us know on Slack or Discourse. We are also constantly on the hunt for building data, design workflows and other case studies to deploy the graph onto, so don't hesitate to contact us if you think that you could help us on that side!

Credits

The SpeckleViz interface has been developed during the "AEC Delta Mobility" project.