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.

1. Using Networkcube in your project

All functionality, except the individual visualizations, is packaged into Java file.

Visualizations are called via a URL, and can hence sit everywhere in the internet. Once the visualization is loaded from that URL, it can start querying the data from your local browser.

Download JavaScript file

Link

<script src="http://www.aviz.fr/~bbach/networkcube/core/networkcube.js"></script>

2. Loading and importing Data

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 storing information about each node: id, label, location
• a node schema mapping columns in the node table to node attributes
• a link table storing information about each link: id, source, target, weight, time, linkType
• a link schema mapping columns in the link table to link attributes
• a data name of the data set under which it is stored and queried.

More information on node and link schemas [here](Node and Link Schemas).

This data object serves as a bottle-neck structure to import data into networkcube, as shown in the following example.

var linkSchema = {  source: 0, 
                    target: 1, 
                    weight: 2, 
                    time: 3, 
                    linkType: 4
var myDataSet = networkcube.loadLinkTable('myData.csv', importAndVisualize, linkSchema, ',', 'YYYY') 
var session = 'benSocialNetworks'
     
function importAndVisualize(dataset){

    // import data into localstorage. 
    networkcube.importData(session, dataset);

    // go on and visualize data, e.g. (see below for more information)
    networkcube.openVisualizationWindow(mySession, visualizationURL, dataSet.name) {
}

3. Show Visualizations

We provide some [ready-to-use visualizations](Visualization Manual) with networkcube. Each of them can be created in a window, a tab, an iFrame, or as within-window tabs . For networkcube to send messages between visualizations, it does not matter:

• where a visualization is loaded from (your personal server or any other), nor
• where your visualization is displayed: window, tab, iFrame, or tab stack.

Messages will be send to all visualizations that run in your browser. The trick is done via your browser's local storage. No magic, no internet connection required.

###Show Visualization in Window:

Opens your visualization in a new browser window:

networkcube.openVisualizationWindow(
    'mySession', 
    'url/to/visualization', 
    'dataSetName');

###Show Visualization in new Tab:

networkcube.openVisualizationTab(
    'mySession', 
    'url/to/visualization', 
    'dataSetName');

Show Visualization in iFrame:

    networkcube.createVisualizationIFrame(
        'parentIdWhereToAttachIFrame', 
        'url/to/visualization', 
        'mySession', 
        'dataSetName', 
        width, height) {

Visualizations as Tabs in iFrame

You can create tabs within your website, each containing a visualization. Clicking on a tab displays that visualization.

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 exapmle:

[
    {name: 'Node Link', url: 'networkcube/visualizations/nodelink'},
    {name: 'Matrix', url: 'networkcube/visualizations/matrix'}
]

More on classic iFrames here.

4. Coding Networkcube and Visualizations

We provide additional resources for developers to use networkcube and create visualizations on top of it. These resources are:

• How to [create visualizations](Creating Visualizations)
• Querying your data via the [Query API](Query API)
• Information on [Node and Link Schemas](Node and Link Schemas) and the internal data model
• A [wrapper for WebGL](D3 WebGL wrapper)
• [Interface Widgets](Widget API)

Pages not linked above are work in progress.

5. Bug Report

Send us your bugs!