<Node>::= {   <Name> :string,   <Value> :number,   <Children> : [ <Node>, ... ]}

{"children":[      {"name":"a","size":1      },      {"children":[            {"name":"b","size":2            },            {"name":"c","size":3            }         ]      }   ]}

python scandir.py ../> ../examples/data/test.json

Live examples

Installation

<scriptsrc="addons/p5.dom.min.js"></script><scriptsrc="addons/p5.treevis.js"></script>

Basic usage

vartreevis,data;functionpreload(){// Loads json treedata=loadJSON("data/example_scan.json");}functionsetup(){createCanvas(800,600);// Description of json properties// 'children' is an array with child objects// 'name' is identifier// 'size' is content valuevarproperties={children:"children",label:"name",value:"size"};// creates a new Sunburst objecttreevis=createSunburst(data,properties);//callback functiontreevis.onSelected((v,name)=>console.log("Selected: "+name));}functiondraw(){background(255);// draws sunbursttreevis.draw();}functionmouseClicked(){if(mouseButton==RIGHT){// navigate outtreevis.up();}else{// navigate intreevis.select(mouseX,mouseY);}}

p5.treevis documentation

createTreemap()

treemap = createTreemap(json_data, props)

treemap.setCorner(5);

treemap.setInset(5);

createSunburst()

sunburst = createSunburst(json_data, props)

sunburst.setAngle(90,360);

sunburst.setTextVisible(false);

This works on both treemaps and sundbursts:

treevis.onSelected((v,name)=>console.log("Selected: "+name));

treevis.setBounds(100,100,400,400);

treevis.onFill((level,maxLevel)=>fill(color(237,(255-level/maxLevel*255)*2/3,255)));

functionmousePressed(){treevis.select(mouseX,mouseY);}

functionmouseClicked(){treevis.up(mouseX,mouseY);}

treevis.up();

treevis.onGetLabel(name=>name.substring(name.lastIndexOf("-")+1));

treevis.setInteraction(false);

treevis.setTextStyle(14);

treevis.setTextStyle(14,'Times');