What is the 'Hello, World' for the Javascript InfoVis Toolkit?

Question

I am doing research in graph theory and need to visualize graphs in real time. (That is, if the graph data changes, its representation changes with it.) InfoVis seems to meet that goal, but I am struggling to put together a simple 'Hello, World' page that just displays a graph on-screen with clickable nodes (where clicking causes the node to change color).

I have a working installation of JIT (the given examples work), I just need a minimal example of InfoVis to get started, and it is proving difficult to piece one together from the documentation.

Answer 1

Fiddle example.

This isn't exactly minimal, but you can probably remove some more stuff to make it so. I took code from the graph manipulation example, and removed some superfluous CSS and JS.

To get the nodes to change color, I added this line to the "onClick" function:

node.data["$color"] = "#FF0000";

The minimal elements seem to be:

1. a JSON data structure
2. instantiate the $jit.ForceDirected object, and call loadJSON

There's also a bunch of boilerplate code for cross-browser compatibility (checking for canvas support, etc).

---

The pared-down JSON structure looks like this:

// define three nodes
var json = [
    { // first node

        // node identifier
        id: "graphnode1",

        // node label
        name: "A graph node (#1)"

        // the node's color, shape, and size
        data: {
            $color: "#FFFFFF",
            $type: "circle",
            $dim: 10
        },

        // this node is adjacent to nodes 2 and 3
        adjacencies: [
            "graphnode2",
            {
                nodeTo: "graphnode2",
                // make the connector blue
                data: {
                    "$color": "#0000FF"
                }
            },
            "graphnode3",
            {
                nodeTo: "graphnode3",
            }
        ]
    },

    // second node
    {
        id: "graphnode2",
        name: "Another graph node (#2)"
    },

    // third node
    {
        id: "graphnode3",
        name: "Another graph node (#3)"
    }
];

Here's the outline of the initial code:

var json = { 
    // structure here
};
var fd = new $jit.ForceDirected({ 

    // create canvas in "infovis" DOM element
    injectInto: 'infovis',

    // many other options here
});
fd.loadJSON(json);