Loader.js

loadJSON: function( json, i )

Loads a JSON structure to the visualization.  The JSON structure can be a JSON tree or graph structure.

A JSON tree or graph structure consists of nodes, each having as properties

• id A unique identifier for the node
• name A node’s name
• data The data property contains a hash (i.e {}) where you can store all the information you want about this node.

Hash keys prefixed with a dollar sign (i.e $) have special meaning.  I will detail those properties below.

For JSON tree structures, there’s an extra property children of type Array which contains the node’s children.

Example

var json = {
    "id": "aUniqueIdentifier",
    "name": "usually a nodes name",
    "data": {
        "some key": "some value",
        "some other key": "some other value"
     },
    "children": [ 'other nodes or empty' ]
};

JSON Graph structures consist of an array of nodes, each specifying the nodes to which the current node is connected.

For JSON Graph structures, the children property is replaced by the adjacencies property.

There are two types of Graph structures, simple and extended graph structures.

For simple Graph structures, the adjacencies property contains an array of strings, each specifying the id of the node connected to the main node.

Example

var json = [
    {
        "id": "aUniqueIdentifier",
        "name": "usually a nodes name",
        "data": {
            "some key": "some value",
            "some other key": "some other value"
         },
        "adjacencies": ["anotherUniqueIdentifier", "yetAnotherUniqueIdentifier", 'etc']
    },

    'other nodes go here...'
];

For extended Graph structures, the adjacencies property contains an array of Adjacency objects that have as properties

• nodeTo The other node connected by this adjacency.
• data A data property, where we can store custom key/value information.

Example

var json = [
    {
        "id": "aUniqueIdentifier",
        "name": "usually a nodes name",
        "data": {
            "some key": "some value",
            "some other key": "some other value"
         },
        "adjacencies": [
        {
            nodeTo:"aNodeId",
            data: {} //put whatever you want here
        },
        'other adjacencies go here...'
    },

    'other nodes go here...'
];

Since all visualizations implement this method, this will be the entry point for JSON data for all visualizations.  This method could be called like this

Example

var ht = new Hypertree(canvas, config);
ht.loadJSON(json);

var tm = new TM.Squarified(config);
tm.loadJSON(json);

var st = new ST(canvas, config);
st.loadJSON(json);

var rg = new RGraph(canvas, config);
rg.loadJSON(json);

Parameters