-
Notifications
You must be signed in to change notification settings - Fork 11
Home
This wiki contains information for both
- users who want to know how they should format their data for easy and automatic import by networkcube, and
- developers who want to extend the networkcube or create visualizations with networkcube.
The syntax examples given here, use TypeScript as networkcube is written in TypeScript. Since Typescript compiles into JavaScript, you can use all the examples with your java script code, provided you manually transform the code into JavaScript.
Core functionality, except the individual visualizations, is packaged into the networkcube.js. Embed networkcube.js into your projects
<script src="https://networkcube.github.io/networkcube/core/networkcube.js"></script>This provides you with data-import as well as calling visualizations. Visualization code can be hosted anywhere on the web and is called through a URL. A visualization for networkcube needs to include networkcube.js and can then query the data stored in your browser.
Networkcube provides loading methods for several pre-defined data formats. Using these importers requires the user to pre-format his/her data. For a list and description of loaders, see [Importing Data](Importing Data).
Each of the loader functions returns a networkcube.DataSet object. This objects contains
- a node table containing one row per node in the network: id, label, location
- a node schema mapping columns in the node table to node attributes
- a link table containing one row per link in the network: id, source, target, weight, time, linkType
- a link schema mapping columns in the link table to link attributes
- a name for the data set under which it is stored and queried.
There are three ways you populate a DataSet object.
You provide a link table with one row representing one link and the links attributes. Networkcube infers the node table from this table, given that you have specified start and end nodes. This method is very simple but you cannot store specific information on nodes.
You provide a node table with each row representing one node and its attributes. This format is often used to represent genealogical data. The node schema can specify individual columns as relation: e.g. father, mother, etc. This is a concise way to reduce the formatting overhead required to transform such a node table into a link table. Again, this method is very simple but you cannot store information on links such as weight or time.
To specify attributes on both nodes and links, you need to supply both node and link tables together with their respective schemas.
More information on node and link schemas here.
The DataSet object serves as a bottle-neck structure to import data into networkcube. The following shows an example to import a link table and its schema. The visualization is linked via a URL (visualization-URL).
//define link schema
var linkSchema = { source: 0,
target: 1,
weight: 2,
time: 3,
linkType: 4
// load data file with the above link schema
var myDataSet = networkcube.loadLinkTable('myData.csv', importAndVisualize, linkSchema, ',', 'YYYY')
// create a session for this data set.
var session = 'demo';
function importAndVisualize(dataset){
// import data into browser's localstorage.
networkcube.importData(session, dataset);
// call visualization in new browser window
networkcube.openVisualizationWindow(
session,
'https://networkcube.github.io/networkcube/visualizations/nodelink/index.html',
dataSet.name);
}We currently provide four ready-to-use visualizations with networkcube. Each of them can be created in its own window, in a new tab, within an iFrame, or as tabs within the same webpage. On user interaction (e.g. mouse over node) networkcube propagates messages to all views in the same session and visualizations can update accordingly. For networkcube to send messages between visualizations, it does not matter:
- where a visualization is loaded from (your personal server or any other url), nor
- where your visualization is displayed: window, tab, iFrame, or tab stack.
Messages will be send to all visualizations that run in your browser.
Opens your visualization in a new browser window:
networkcube.openVisualizationWindow(
'mySession',
'url/to/visualization',
'dataSetName');networkcube.openVisualizationTab(
'mySession',
'url/to/visualization',
'dataSetName'); networkcube.createVisualizationIFrame(
'parentIdWhereToAttachIFrame',
'url/to/visualization',
'mySession',
'dataSetName',
width, height) {You can create tabs within your website, each containing a set of visualizations. Tabs allow you to switch between visualizations.
networkcube.createTabVisualizations(
'parentIdWhereToAttachIFrame',
visualizationSpecs,
'mySession',
'dataSetName',
width, height) {The visualizationSpecs object is an array with the visualizations to be accessed by your tabes. It must have
the same structure as in the following example:
[
{name: 'Node Link', url: 'https://networkcube.github.io/networkcube/visualizations/nodelink/index.html'},
{name: 'Matrix', url: 'https://networkcube.github.io/networkcube/visualizations/matrix/index.html'}
]More on how to use iFrames here.
We provide additional resources for developers to use networkcube and create visualizations on top of it. These resources are:
- Coding strategies: Coding for Networkcube
- How to create visualizations
- Querying your data via the Query API
- Information on Node and Link Schemas and the internal data model
- A wrapper for WebGL
- Interface Widgets
Pages not linked above are work in progress. Let us know if you are interested in contributing or want to work on your own distribution of networkcube.
Use this repository to report bugs.