These are ordered fragments for the
Connected Sunburst example code.
I trimmed parts that seemed uninteresting and that are not related to the library code.
You can still see the full code
here. Or
go back to the example.
var json = [
//"root" node is invisible
{
"id": "node0",
"name": "",
"data": {
"$type": "none"
},
"adjacencies": [
{
"nodeTo": "node1",
"data": {
'$type': 'none'
}
}, {
"nodeTo": "node2",
"data": {
'$type': 'none'
}
}, {
"nodeTo": "node3",
"data": {
'$type': 'none'
}
}, {
"nodeTo": "node4",
"data": {
"$type": "none"
}
}, {
"nodeTo": "node5",
"data": {
"$type": "none"
}
}, {
"nodeTo": "node6",
"data": {
"$type": "none"
}
}, {
"nodeTo": "node7",
"data": {
"$type": "none"
}
}, {
"nodeTo": "node8",
"data": {
"$type": "none"
}
}, {
"nodeTo": "node9",
"data": {
"$type": "none"
}
}, {
"nodeTo": "node10",
"data": {
"$type": "none"
}
}
]
}, {
"id": "node1",
"name": "node 1",
"data": {
"$angularWidth": 13.00,
"$color": "#33a",
"$height": 70
},
"adjacencies": [
{
"nodeTo": "node3",
"data": {
"$color": "#ddaacc",
"$lineWidth": 4
}
}, {
"nodeTo": "node5",
"data": {
"$color": "#ccffdd",
"$lineWidth": 4
}
}, {
"nodeTo": "node7",
"data": {
"$color": "#dd99dd",
"$lineWidth": 4
}
}, {
"nodeTo": "node8",
"data": {
"$color": "#dd99dd",
"$lineWidth": 4
}
}, {
"nodeTo": "node10",
"data": {
"$color": "#ddaacc",
"$lineWidth": 4
}
}
]
}, {
"id": "node2",
"name": "node 2",
"data": {
"$angularWidth": 24.90,
"$color": "#55b",
"$height": 73
},
"adjacencies": [
"node8", "node9", "node10"
]
}, {
"id": "node3",
"name": "node 3",
"data": {
"$angularWidth": 10.50,
"$color": "#77c",
"$height": 75
},
"adjacencies": [
"node8", "node9", "node10"
]
}, {
"id": "node4",
"name": "node 4",
"data": {
"$angularWidth": 5.40,
"$color": "#99d",
"$height": 75
},
"adjacencies": [
"node8", "node9", "node10"
]
}, {
"id": "node5",
"name": "node 5",
"data": {
"$angularWidth": 32.26,
"$color": "#aae",
"$height": 80
},
"adjacencies": [
"node8", "node9", "node10"
]
}, {
"id": "node6",
"name": "node 6",
"data": {
"$angularWidth": 24.90,
"$color": "#bf0",
"$height": 85
},
"adjacencies": [
"node8", "node9", "node10"
]
}, {
"id": "node7",
"name": "node 7",
"data": {
"$angularWidth": 14.90,
"$color": "#cf5",
"$height": 85
},
"adjacencies": [
"node8", "node9", "node10"
]
}, {
"id": "node8",
"name": "node 8",
"data": {
"$angularWidth": 34.90,
"$color": "#dfa",
"$height": 80
},
"adjacencies": [
"node9", "node10"
]
}, {
"id": "node9",
"name": "node 9",
"data": {
"$angularWidth": 42.90,
"$color": "#CCC",
"$height": 75
},
"adjacencies": [
"node10"
]
}, {
"id": "node10",
"name": "node 10",
"data": {
"$angularWidth": 100.90,
"$color": "#C37",
"$height": 70
},
"adjacencies": []
}
];
var sb = new $jit.Sunburst({
//id container for the visualization
injectInto: 'infovis',
//Change node and edge styles such as
//color, width, lineWidth and edge types
Node: {
overridable: true,
type: useGradients? 'gradient-multipie' : 'multipie'
},
Edge: {
overridable: true,
type: 'hyperline',
lineWidth: 2,
color: '#777'
},
//Draw canvas text. Can also be
//'HTML' or 'SVG' to draw DOM labels
Label: {
type: nativeTextSupport? 'Native' : 'SVG'
},
//Add animations when hovering and clicking nodes
NodeStyles: {
enable: true,
type: 'Native',
stylesClick: {
'color': '#33dddd'
},
stylesHover: {
'color': '#dd3333'
},
duration: 700
},
Events: {
enable: true,
type: 'Native',
//List node connections onClick
onClick: function(node, eventInfo, e){
if (!node) return;
var html = "<h4>" + node.name + " connections</h4><ul><li>", ans = [];
node.eachAdjacency(function(adj){
// if on the same level i.e siblings
if (adj.nodeTo._depth == node._depth) {
ans.push(adj.nodeTo.name);
}
});
$jit.id('inner-details').innerHTML = html + ans.join("</li><li>") + "</li></ul>";
}
},
levelDistance: 190,
// Only used when Label type is 'HTML' or 'SVG'
// Add text to the labels.
// This method is only triggered on label creation
onCreateLabel: function(domElement, node){
var labels = sb.config.Label.type;
if (labels === 'HTML') {
domElement.innerHTML = node.name;
} else if (labels === 'SVG') {
domElement.firstChild.appendChild(document.createTextNode(node.name));
}
},
// Only used when Label type is 'HTML' or 'SVG'
// Change node styles when labels are placed
// or moved.
onPlaceLabel: function(domElement, node){
var labels = sb.config.Label.type;
if (labels === 'SVG') {
var fch = domElement.firstChild;
var style = fch.style;
style.display = '';
style.cursor = 'pointer';
style.fontSize = "0.8em";
fch.setAttribute('fill', "#fff");
} else if (labels === 'HTML') {
var style = domElement.style;
style.display = '';
style.cursor = 'pointer';
if (node._depth <= 1) {
style.fontSize = "0.8em";
style.color = "#ddd";
}
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
}
}
});
// load JSON data.
sb.loadJSON(json);
// compute positions and plot.
sb.refresh();