Hi! I'm Nicolas and I'm interested in information visualization, JavaScript and web standards. I currently work as a Data Visualization Scientist at Twitter. I wrote PhiloGL, the JavaScript InfoVis Toolkit and V8-GL.

On controllers »

Feeding JSON tree structures to the JIT

Posted in: javascript infovis toolkit

The tree structure that feeds the spacetree, hypertree, treemap and rgraph visualizations is always the same. Roughly speaking, the JSON tree structure consists of tree nodes, each having as properties:

id a unique identifier for the node.
name a node's name.
data The data property contains a dataset. That is, an array of key-value objects defined by the user. Roughly speaking, this is where you can put some extra information about your node. You'll be able to access this information at different stages of the computation of the JIT visualizations by using a controller.
children An array of children nodes, or an empty array if the node is a leaf node.

For example,

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

About datasets:

Sometimes some dataset objects are read by the JIT classes to perform proper layouts. For example, the treemap class reads the first object's value for each node's dataset to perform calculations about the dimensions of the rectangles laid. Also, if you enable the Config.Color.allow property, the treemap will add colors on the layout, and these colors will be based on your second dataset object value. RGraphs and Hyperbolic Trees also read the first dataset object value in order to compute node diameters and angular widths, when setting Config.allowVariableNodeDiameters = true. That's all for now. I recommend you to read the On controllers section and then some spacetree, hypertree, treemap or RGraph tutorials.

On controllers »

Comments