The arbor.js library is described on the arbor.js site as follows.
a graph visualization library using web workers and jQuery
A TOC is a graph. So let’s see what what we can do with arbor.js and TOCs. Here is how a first attempt turned out. The following is the main page. The first topic displays the graph.
Here is just the topic with the graph visualization. Notice you can drag the nodes on the graph around, at least as tested in the latest version of Chrome.
The project used to generate this output contains a copy of the arbor.js download. There is also a main.js file based on the example in the arbor.js documentation.
Flare HTML5 output uses RequireJS to load TOC data. Since the format for the TOC data files uses RequireJS define(), define() was used in the main.js script to get the TOC data. This script assumed a single chunk for the TOC. That was a big assumption. To apply this technique to any HTML5 output, the script would have to be adjusted. But this is an arbor.js example and traversing the TOC tree in HTML5 output is another topic. It would also be nice to reuse the loaded RequireJS modules instead of using require() again.
Probably the most desirable item to address is to create clickable or tappable links on the nodes. The script includes the relative path for the file in the graph node information. But the click and tap behavior to open the link was omitted from this demo.
Here is the portion of the script that gets the TOC data and creates graph nodes and edges.
$(document).ready(function() {
var sys = arbor.ParticleSystem(1000, 600, 0.5);
sys.parameters({gravity: true});
sys.renderer = Renderer("#viewport");
require(['../Data/Toc.js', '../Data/Toc_Chunk0.js'], function(toc, chunk) {
function addNodes(n, topNode) {
$.each(n, function(key, value) {
var nodeText = value.i;
var nodeLink = value.i;
$.each(chunk, function(keyChunkItem, valueChunkItem) {
if (value.i === valueChunkItem.i[0]) {
nodeText = valueChunkItem.t[0];
nodeLink = keyChunkItem;
console.log(keyChunkItem);
}
});
sys.addNode(value.i, {alone: false, mass: .25, text: nodeText, link: nodeLink});
sys.addEdge(topNode, value.i);
if (typeof value.n !== "undefined") {
addNodes(value.n, value.i);
}
});
}
sys.addNode('TOC', {alone: false, mass: .25, text: 'TOC'});
addNodes(toc.tree.n, 'TOC');
});
});
But there are other things happening in main.js to define the graph. Those are described in the arbor.js documentation introduction and reference. The topic that displays the graph has script tags for arbor.js, the main.js file that defines the graph, and a canvas element that serves as the viewing area for the graph.
<?xml version="1.0" encoding="UTF-8"?> <html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd"> <head> <link href="Resources/Stylesheets/Styles.css" rel="stylesheet" type="text/css" /> <script src="lib/jquery-1.11.0.min.js"></script> <script src="lib/arbor-v0.92/lib/arbor.js"></script> <script src="lib/arbor-v0.92/lib/arbor-tween.js"></script> </head> <body> <h1>Topic 1</h1> <p>Delete this text and replace it with your own content.</p> <canvas id="viewport" width="800" height="600"></canvas> <script src="js/main.js"></script> </body> </html>
How would you use graph visualization with TOCs?
Hi, I hit on your post when googling on how to use images and urls in arbor.js. But tutorials on the topic aren’t ease to find. I guess you succeeded to use urls on Nodes in arbor.js. Please could you provide any hints how to achieve this, and if possible, how to display images as nodes? Thanks in advance.
Sorry about the delay in responding. To create a clickable link, you can change the mouse event behavior in the JavaScript to open the URL stored in the data structure. One place to examine is the arbor.js site. There are clickable nodes there. If you want to be able to grab a node and still have clickable links, you can create a handle to drag and make the rest of the area clickable.
Bonjour,
Arbor.js est remarquable. Je voudrais l’insérer dans mon site de généalogie sous WordPress (en construction) pour visualiser sitemap / liens .. Mais ne sais pas utiliser une bibliothèque Jquery. Une aide serait merveilleux.
JLouis