md`# Tree graph`
radius= width*2/2.1
// dendogram tree layout
tree_d = data =>d3.cluster().size([2 * Math.PI, radius - 100]) .separation((a, b) => (a.parent == b.parent ? 1 : 3) / a.depth)(d3.hierarchy(data))
// radial tree layout
tree_r=data => d3.tree()
.size([2 * Math.PI, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)
(d3.hierarchy(data))
// transform the data format into the flare structure to feed into the d3 tree graph
function transform(root) {
if (root === null)
return null;
if(root.display_titles)
delete root['display_titles']
return Object.keys(root).map((k, index )=> {
const children = transform(root[k]);
return {
name: k,
index,
[children === null ? "value" : "children"] : children === null ? 1 : children
// [children === null ? "value" : "children"] : children === null ? 1 : children
}
})
}
// if no file is uploaded use the flare.json, else transform the uploaded data
// use this data for the tidy tree, radial tree and the dendogram
data = {
if (data_parse.name=="flare_d3"){return data_parse}
else{return transform(data_parse)[0]}
}
// serialize = {
// const xmlns = "http://www.w3.org/2000/xmlns/";
// const xlinkns = "http://www.w3.org/1999/xlink";
// const svgns = "http://www.w3.org/2000/svg";
// return function serialize(svg) {
// const reset = new Promise((resolve, reject) => {
// setTimeout(() => {
// svg.zoomReset()
// resolve('foo');
// }, 3000);
// })
// reset.then(res => {
// svg = svg.cloneNode(true);
// })
// };
// }
// viewof fontsize_i = Range([8, 35], {step: 1 ,value: 12, label: "Font Size"})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
