With this library, one can create and customize a treemap or a sunburst visualisation from any json object tree.
The json object tree should be an object with the following structure:
<Node> ::=
{
<Name> : string,
<Value> : number,
<Children> : [ <Node>, ... ]
}For leaf nodes, <Children> is optional. For parent nodes, <Name> and <Value> are optional.
Example:
{
"children":[
{
"name":"a",
"size":1
},
{
"children":[
{
"name":"b",
"size":2
},
{
"name":"c",
"size":3
}
]
}
]
}The property names <Name>, <Value> and <Children> must be specified in a parameter-object (see example code below).
If you want, you can generate a json file containing a json tree out from any folder at your disk. Just scan it with my python script (use scandir.py in the scanner folder)
Following command scans project directory ../ and write into file
python scandir.py ../ > ../examples/data/test.json- Testbed with several examples in one large canvas
- Basic Sunburst example
- Basic Treemap example
- Treemap example without canvas
Just include the scripts.
<script src="addons/p5.dom.min.js"></script>
<script src="addons/p5.treevis.js"></script>This is a complete example for displaying and drawing with interaction Please look in the source code of examples to see how to customize. Or look in the well documented source files in the src folder.
var treevis, data;
function preload() {
// Loads json tree
data = loadJSON("data/example_scan.json");
}
function setup() {
createCanvas(800, 600);
// Description of json properties
// 'children' is an array with child objects
// 'name' is identifier
// 'size' is content value
var properties = {
children: "children",
label: "name",
value: "size"
};
// creates a new Sunburst object
treevis = createSunburst(data, properties);
//callback function
treevis.onSelected((v, name) => console.log("Selected: " name));
}
function draw() {
background(255);
// draws sunburst
treevis.draw();
}
function mouseClicked() {
if (mouseButton == RIGHT) {
// navigate out
treevis.up();
} else {
// navigate in
treevis.select(mouseX, mouseY);
}
}Creates a new treemap visualisation
Rounds corners
treemap.setCorner(5);Makes inset
treemap.setInset(5);Creates a new sunburst visualisation
Sets a different angle and draws a full circle
sunburst.setAngle(90, 360);Sets text invisible
sunburst.setTextVisible(false);Callback function
treevis.onSelected((v, name) => console.log("Selected: " name));Sets size and position
treevis.setBounds(100,100,400,400);Customize fill
treevis.onFill((level, maxLevel) => fill(color(237, (255 - level / maxLevel * 255) * 2 / 3, 255)));Navigates in when mouse is pressed
function mousePressed() {
treevis.select(mouseX, mouseY);
}Navigates out when mouse is pressed
function mouseClicked() {
treevis.up(mouseX, mouseY);
}Navigates up without test if pressed mouse position is inside visualisation
treevis.up();Custom function for building label out of name property
treevis.onGetLabel(name => name.substring(name.lastIndexOf("-") 1));Interaction off, no navigation in or out
treevis.setInteraction(false);Custom font size
treevis.setTextStyle(14);Custom font size and type
treevis.setTextStyle(14, 'Times');