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.

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

• fiber_manual_record Circle nodes represent Senders 🚀 and Receivers 📡 (a.k.a local clients)
• crop_squareSquare nodes represent Streams 🛰️📦 (a.k.a a box of data on the cloud)
• 🚀fiber_manual_recordarrow_right_alt🛰️📦crop_square This pattern represents data that has been shared to a Stream by a user through a Sender
• 🛰️📦crop_squarearrow_right_alt📡fiber_manual_record This pattern represents data that has been retrieved by a user from a Stream through a Receiver
• 🚀fiber_manual_recordarrow_right_alt🛰️📦crop_squarearrow_right_alt📡fiber_manual_record This pattern is the sum of the two patterns above...
• color_lens 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.

• group_work 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: 💎

• group_work 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

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

• You can zoom in zoom_in and zoom out zoom_out by using the scroll wheel, and pan open_with 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 gps_fixed situated on the toolbar, which will re-center it!
  

• group_workcompare_arrowsgroup_work 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.
  

• group_worktunezoom_out_map 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.
  

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

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

• date_rangetune 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.
  

• refresh 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.
  

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

• search 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.
  

• color_lens 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
  

• save_alt 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.