Skip to content
This repository has been archived by the owner on Jul 18, 2022. It is now read-only.

Create Bespoke Visualizations

Jump to bottom
Benjamin Bach edited this page Aug 2, 2021 · 1 revision

Create Bespoke Visualizations for the Vistorian

NetworkCube is a platform to allow multiple visualizations to be synchronized. This synchronization includes data as well as user triggered interaction. The core of this sychronization are [messages](Networkcube Messages). This section explains the basic architecture of networkcube and how you prepare or build your own visualization using networkcube.

Integrating networkcube with your visualization requires the following steps:

  1. include the networkcube.js
  2. Load data from browser storage
  3. Implement message listeners and send messages to other views.

Remember, visualizations can be called from inside networkcube via, e.g., networkcube.openVisualizationWindow(session, url). Once you have created a visualization, host it at your favorite webserver (i.e. put the necessary files there) and publish the URL. Everybody running a networkcube project can embed your visualization and you will become famous!. You can link and explain your visualization URL [here](Visualization Manual).

1. Including networkcube.

2. Create networkcube data objects:

The main structure in networkcube is a DynamicNetwork, representing your network data. Unlike other toolkits, there is only a single class for networks.

    var network:networkcube:DynamicNetwork 
        = networkcube.getDynamicGraph('dataSetName','sessionName');

If sessionName and dataSetName are encoded in the URL using the following format:

session=sessionName&datasetName=dataSetName

then, you can leave the parameters blank:

        = networkcube.getDynamicGraph();

The second most basic data objects in networks are -- tata --

  • Node representing a node in your network.
  • Link representing a single link between two nodes in your network
  • NodePair representing the total set of links between two nodes
  • Time representing a time step in your network
  • Location representing a location possibly associated to nodes

To get a list of, e.g. all the links, in your network, write:

    var linkQuery:LinkQuery = network.links()

networkcube.nodes() returns you a LinkQuery object, which allows you to chain queries. E.g. the following returns the mean of all link weights in your network.

    var meanWeight = links.weights().mean()

To obtain an iteratable array write:

   var linkArray = linkQuery.toArray();

More information on DynamicNetwork, the above mentioned elements, and how to create them: [here](Query API)

3. Set Event Listener

Networkcube provides three ways to listen to messages send between views. A full description of messages are found [here](Messages API).

Default listener:

The default listener provides the callback for any message this visualization receives from another view.

    networkcube.setDefaultEventListener(myCallBack);

Specific Listener

The specific listener is called for a specific type of message, e.g. when the user changes a time interval.

    networkcube.addEventListener('timeRange', callBack);

If you have encoded sessionName and dataSetName in the URL (?session=sessionName&datasetName=dataSetName), you can simply call

var dgraph = networkcube.getDynamicGraph();

Listener types are

  • 'highlight'
  • 'selection'
  • 'timeRange'
  • 'createSelection'
  • 'deleteSelection'
  • 'setCurrentSelectionId'
  • 'setSelectionColor'
  • 'selectionColoring'
  • 'selectionFilter'
  • 'selectionPriority'
  • 'searchResult'
  • 'stateCaptured'

Architecture Remarks

Networkcube is modular and allows synchronization across browser tabs and even windows. The downside of this is that each view that includes the networkcube.js library runs its own instance with its own data objects in memory. That's because serialization between views happens via the browser's localstorage, which only can store basic datatypes. Javascript objects are converted into JSON, then stored, and then converted back into runtime objects. Hence, it is not possible to communicate actual objects across views.

However, as a programmer you don't have to care about serialization and deserialzation, since networkcube does the all work for you. What you need to know is that communications across views (instances of networkcube) happens entirely via integer indexes and strings.

Clone this wiki locally