Public
Edited
Nov 10, 2024
Fork of Tidy Tree
Insert cell
Insert cell
Insert cell
treeObj = ({
layout: "radical",
zoom: true,
rootDX: 50,
rootDY: 75,
width: 0,
height: 0,
boxWidth: 40,
boxHeight: 20,
boxXOffset: -20,
boxYOffset: -10,
margin: 10
})
Insert cell
function chart() {
const dupData = JSON.parse(JSON.stringify(data));
constructUniqueNodeId(dupData);
const svg = d3.select("#tree").append("svg")
.attr("width", treeObj.width)
.attr("height", treeObj.height);

const zoomGroup = svg.append("g");
const g = zoomGroup.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.style("transition", "transform 1s");
const linkGroup = g.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5);
const nodeGroup = g.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3);
function renderTree(animate=true) {
console.log(dupData);
const root = tree(dupData, treeObj.layout);

let links = linkGroup
.selectAll("path")
.data(root.links());
links.exit().remove();
let newLinks = links.enter().append("path")
.attr("d", getLinkPath(treeObj.layout))

let t = d3.transition()
.duration(animate ? 400 : 0)
.ease(d3.easeLinear)
.on("end", function() {
setTimeout(() => {
resetZoom();
resetBoundingViewBox()
}, 100);
});
let alllinks = linkGroup.selectAll("path")
alllinks
.transition(t)
.attr("d", getLinkPath(treeObj.layout));
let nodes = nodeGroup
.selectAll("g")
.data(root.descendants().reverse(), d => d.data._id);
nodes.exit().remove();
let newNodes = nodes.enter().append("g");

let allNodes = animate ? nodeGroup.selectAll("g").transition(t) : nodeGroup.selectAll("g");
allNodes
.attr("transform", d => getNodeTransform(d, treeObj.layout));
newNodes.append("rect")
.attr("x", treeObj.boxXOffset)
.attr("y", treeObj.boxYOffset)
.attr("width", treeObj.boxWidth)
.attr("height", treeObj.boxHeight)
.attr("fill", function (d) {
let altChildren = d.data.altChildren || [];
let children = d.data.children;
return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? "#555" : "#999" })
.on ("click", function (d) {
console.log("before", JSON.stringify(d.data));
let altChildren = d.data.altChildren || [];
let children = d.data.children;
d.data.children = altChildren;
d.data.altChildren = children;
console.log("after", JSON.stringify(d.data));
renderTree();
});

newNodes.append("text")
.attr("x", -10)
.attr("y", 2.5)
.attr("text-align", "center")
.attr("fill", "white")
.text(d => d.data.name);
}

if(treeObj.zoom) {
svg.call(zoomEvt);
}
renderTree(false);
return svg.node();
}
Insert cell
function resetBoundingViewBox() {
const svg = d3.select("#tree").select("svg");
const g = svg.select("g").select("g");
const rect = svg.select("rect");
const groupClientRect = g.node().getBBox();
const rectBBox = rect.node().getBBox();

const adjustX = rectBBox.width/2;
const adjustY = rectBBox.height/2;

svg
.attr("width", groupClientRect.width + (2 * treeObj.margin))
.attr("height", groupClientRect.height + (2 * treeObj.margin));

g.attr("transform", `translate(${translate[0] + adjustX + treeObj.margin}, ${translate[1] + adjustY + treeObj.margin})`);
}
Insert cell
function resetZoom() {
const svg = d3.select("#tree").select("svg");
svg.transition()
.duration(750)
.call(zoomEvt.transform, d3.zoomIdentity);
}
Insert cell
zoomEvt = d3.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);
Insert cell
function zoomed() {
if(d3.event.sourceEvent) {
d3.event.sourceEvent.stopPropagation();
}
const zoomGroup = d3.select("#tree").select("g")
zoomGroup.attr("transform", d3.event.transform);
}
Insert cell
function setGroupTranslate(root, layout) {
let translateX;
let translateY;
switch(layout) {
case "horizontal":
translateX = 0;
translateY = -minCoordinates[1];
break;
case "vertical":
translateX = -minCoordinates[1];
translateY = 0;
break;
case "radical":
translateX = -minCoordinates[1];
translateY = -minCoordinates[0];
break;
default:
translateX = 0;
translateY = 0;
break;
}
translate[0] = translateX;
translate[1] = translateY;
}
Insert cell
function getLinkPath(layout) {
switch(layout) {
case "horizontal":
return d3.linkHorizontal().x(d => d.y).y(d => d.x);
case "vertical":
return d3.linkVertical().x(d => d.x).y(d => d.y);
case "radical":
return d3.linkRadial().angle(d => d.x).radius(d => d.y);
default:
return d3.linkHorizontal().x(d => d.y).y(d => d.x);
}
}
Insert cell
function getNodeTransform(d, layout) {
switch(layout) {
case "horizontal":
return `translate(${d.y},${d.x})`;
case "vertical":
return `translate(${d.x},${d.y})`;
case "radical":
return `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`;
default:
return `translate(${d.y},${d.x})`;
}
}
Insert cell
function setMinMaxCoordinates(root, layout) {
minCoordinates[0] = minCoordinates[1] = maxCoordinates[0] = maxCoordinates[1] = 0;
root.descendants().forEach(d => {
var coords = polarToCartesian(d.x, d.y);

const dx = layout === "radical" ? coords.x : d.x;
const dy = layout === "radical" ? coords.y : d.y;
minCoordinates[0] = Math.min(minCoordinates[0], dy);
minCoordinates[1] = Math.min(minCoordinates[1], dx);

maxCoordinates[0] = Math.max(maxCoordinates[0], dy);
maxCoordinates[1] = Math.max(maxCoordinates[1], dx);
});
if(layout == "horizontal") {
treeObj.width = Math.abs(minCoordinates[0] - maxCoordinates[0]);
treeObj.height = Math.abs(minCoordinates[1] - maxCoordinates[1]);
} else {
treeObj.width = Math.abs(minCoordinates[1] - maxCoordinates[1]);
treeObj.height = Math.abs(minCoordinates[0] - maxCoordinates[0]);
}
setGroupTranslate(root, layout);
}
Insert cell
function polarToCartesian(angle, radius) {
return {
x: radius * Math.cos(angle - Math.PI / 2),
y: radius * Math.sin(angle - Math.PI / 2)
};
}
Insert cell
function constructUniqueNodeId(node, prefix = '', index = 0) {
node._id = `${prefix}${index}`;
if (node.children) {
node.children.forEach((child, i) => constructUniqueNodeId(child, `${node._id}-`, i));
}
}
Insert cell
minCoordinates = [0, 0];
Insert cell
maxCoordinates = [0, 0];
Insert cell
translate = [0, 0];
Insert cell
data = ({name: "Test1",
children:[
{name:"test2",
children:[
{name:"test2"},
{name:"test2"},
{name:"test3",
children:[
{name:"test2"},
{name:"test3"}
]
}
]
},
{name:"test2",
children:[
{name:"test2"},
{name:"test2"},
{name:"test3",
children:[
{name:"test2",
children:[
{name:"test2"},
{name:"test2"},
{name:"test3",
children:[
{name:"test2"},
{name:"test3"}
]
}
]
},
{name:"test2"},
{name:"test3"}
]
}
]
},
{name:"test2",
children:[
{name:"test2",
children:[
{name:"test2"},
{name:"test2"},
{name:"test3",
children:[
{name:"test4"}
]
}
]
},
{name:"test2"},
{name:"test3",
children:[
{name:"test2"},
{name:"test3"},
{name:"test2",
children:[
{name:"test2"},
{name:"test2"},
{name:"test3",
children:[
{name:"test4"}
]
}
]
}
]
}
]
},
{name:"test3",
children:[
{name:"test2"},
{name:"test3"}
]
}
]
})
Insert cell
data1 = ({name: "test1",
children:[
{name:"test11",
children:[
{name:"test111"},
{name:"test112"},
{name:"test113",
children:[
{name:"test1131"},
{name:"test1132"}
]
}
]
},
{name:"test12",
children:[
{name:"test121"},
{name:"test122"},
{name:"test123",
children:[
{name:"test1231",
children:[
{name:"test12311"},
{name:"test12312"},
{name:"test12313",
children:[
{name:"test123131"},
{name:"test123132"}
]
}
]
},
{name:"test1232"},
{name:"test1233"}
]
}
]
},
{name:"test13",
children:[
{name:"test131",
children:[
{name:"test1311"},
{name:"test1312"},
{name:"test1313",
children:[
{name:"test13131"}
]
}
]
},
{name:"test132"},
{name:"test133",
children:[
{name:"test1331"},
{name:"test1332"},
{name:"test1333",
children:[
{name:"test13331"},
{name:"test13332"},
{name:"test13333",
children:[
{name:"test133331"}
]
}
]
}
]
}
]
},
{name:"test14",
children:[
{name:"test141"},
{name:"test142"}
]
}
]
})
Insert cell
data2 = ({"name":"l1*4-Ressources informationnelles","index":0,"children":[{"name":"l2*eugenics-galton-francis","index":0,"children":[]},{"name":"l2*artists","index":1,"children":[{"name":"l3*PREVIEUX JULIEN","index":0,"children":[]},{"name":"l3*gianikian-yervant-ricci-lucchi-angela_it","index":1,"children":[]},{"name":"l3*KEREN TALI","index":2,"children":[]},{"name":"l3*HIRST DAMIEN","index":3,"children":[]},{"name":"l3*nauman-bruce_us","index":4,"children":[]},{"name":"l3*LAMARCHE VIRGINIE","index":5,"children":[]},{"name":"l3*?hrn-markus_se","index":6,"children":[]},{"name":"l3*gates-theaster_us","index":7,"children":[]},{"name":"l3*TAN FIONA","index":8,"children":[]},{"name":"l3*warburg-aby","index":9,"children":[]},{"name":"l3*LORDE AUDRE","index":10,"children":[]},{"name":"l3*HUMEAU-MARGUERITE","index":11,"children":[]},{"name":"l3*julien-isaac_uk","index":12,"children":[]},{"name":"l3*MAYA DEREN","index":13,"children":[]},{"name":"l3*EL LISSITSKY DLIA GOLOSA","index":14,"children":[]},{"name":"l3*DALBERG MARIA","index":15,"children":[]},{"name":"l3*KUNSTMUSEUM BASEL","index":16,"children":[]},{"name":"l3*PATAUT-MARC","index":17,"children":[]},{"name":"l3*COGITORE CLEMENT","index":18,"children":[]},{"name":"l3*NYEN HO TZU","index":19,"children":[]},{"name":"l3*Marakatt-Labba Britta","index":20,"children":[]},{"name":"l3*wada-reijiro_jp","index":21,"children":[]},{"name":"l3*OROZCO GABRIEL","index":22,"children":[]},{"name":"l3*johnson-martin-osa_us","index":23,"children":[]},{"name":"l3*DOUG AITKEN","index":24,"children":[]},{"name":"l3*PHILIPSZ SUSAN","index":25,"children":[]},{"name":"l3*ONISHI YOSHITO","index":26,"children":[]},{"name":"l3*POLKE","index":27,"children":[]},{"name":"l3*RAGNAR KJARTANSSON","index":28,"children":[]},{"name":"l3*HENRI LE SECQ","index":29,"children":[]},{"name":"l3*IMHOF ANNE","index":30,"children":[]},{"name":"l3*PYNOR HELEN - PETA CLANCY","index":31,"children":[]},{"name":"l3*TOBIAS ZIELONY","index":32,"children":[]},{"name":"l3*ALBERS ANNI","index":33,"children":[]},{"name":"l3*A-MODELISATION-3D","index":34,"children":[]},{"name":"l3*TOKUYAMA TOMONAGA","index":35,"children":[]},{"name":"l3*POITRAS LAURA","index":36,"children":[]},{"name":"l3*UC DAVIS","index":37,"children":[]},{"name":"l3*MUMOK MY BODY IS THE EVENT","index":38,"children":[]},{"name":"l3*ATTIA KADER","index":39,"children":[]},{"name":"l3*HECKER FLORIAN","index":40,"children":[]},{"name":"l3*HOLMKVIST SASKIA","index":41,"children":[]},{"name":"l3*l? an-my","index":42,"children":[]},{"name":"l3*SISTIAGA JOSE ANTONIO","index":43,"children":[]},{"name":"l3*starling-simon_uk","index":44,"children":[]},{"name":"l3*moriyama-daido_jp","index":45,"children":[]},{"name":"l3*NOTO ALVA","index":46,"children":[]},{"name":"l3*BROOK ANDREW","index":47,"children":[]},{"name":"l3*BREITZ CANDICE","index":48,"children":[]},{"name":"l3*granular-synthesis_de","index":49,"children":[]},{"name":"l3*RAFMAN JOHN","index":50,"children":[]},{"name":"l3*BOTT KARSTEN","index":51,"children":[]},{"name":"l3*BLAS ZACH","index":52,"children":[]},{"name":"l3*ONO YOKO","index":53,"children":[]},{"name":"l3*SIDES RICHARD","index":54,"children":[]},{"name":"l3*mao-tao_cn","index":55,"children":[]},{"name":"l3*CHALMERS CATHERINE","index":56,"children":[]},{"name":"l3*YANG FUDONG","index":57,"children":[]},{"name":"l3*bonvicini-monica_it","index":58,"children":[]},{"name":"l3*JAFA ARTHUR","index":59,"children":[]},{"name":"l3*UVA","index":60,"children":[]},{"name":"l3*PAIK NAM JUN","index":61,"children":[]},{"name":"l3*linke-armin_it","index":62,"children":[]},{"name":"l3*AUTOGENA LISE AND PORTWAY JOSHUA","index":63,"children":[]},{"name":"l3*KHALILI BOUCHRA","index":64,"children":[]},{"name":"l3*TILLMANS WOLFGANG","index":65,"children":[]},{"name":"l3*IGWE-ONYEKA","index":66,"children":[]},{"name":"l3*MUELLER HEINER","index":67,"children":[]},{"name":"l3*AKOMFRAH JOHN","index":68,"children":[]},{"name":"l3*SALA ANRI","index":69,"children":[]},{"name":"l3*SOO MARK","index":70,"children":[]},{"name":"l3*SAKAMOTO","index":71,"children":[]},{"name":"l3*STEWART KRISTA BELLE","index":72,"children":[]},{"name":"l3*RAUSCHENBERG","index":73,"children":[]},{"name":"l3*AUGIER ALEX","index":74,"children":[]},{"name":"l3*CONLON DONNA","index":75,"children":[]},{"name":"l3*MARI NARIMANE","index":76,"children":[]},{"name":"l3*HUTZEL GARY","index":77,"children":[]},{"name":"l3*o-grady-lorraine","index":78,"children":[]},{"name":"l3*hilton-paul_uk","index":79,"children":[]},{"name":"l3*HUBBARD-BIRCHLER","index":80,"children":[]},{"name":"l3*MASSIVE_ATTACK_Adam_Curtis","index":81,"children":[]},{"name":"l3*wall-jeff_ca","index":82,"children":[]},{"name":"l3*ONO MASAHITO","index":83,"children":[]},{"name":"l3*MOULENE JEAN-LUC","index":84,"children":[]},{"name":"l3*ABU HAMDAN LAWRENCE","index":85,"children":[]},{"name":"l3*RUSCHA ED","index":86,"children":[]},{"name":"l3*el-tahri-jihan_eg","index":87,"children":[]},{"name":"l3*HIRAKAWA NORIMICHI","index":88,"children":[]},{"name":"l3*telengut-alisi_ca","index":89,"children":[]},{"name":"l3*EISENSTEIN_ru","index":90,"children":[]},{"name":"l3*lombardi-mark_us","index":91,"children":[]},{"name":"l3*CHARRIERE JULIAN","index":92,"children":[]},{"name":"l3*FIEVET LAURENT","index":93,"children":[]},{"name":"l3*sommer-eide-espen","index":94,"children":[]},{"name":"l3*MANDERS MARK","index":95,"children":[]},{"name":"l3*FAST OMAR","index":96,"children":[]},{"name":"l3*MISTRY JYOTI","index":97,"children":[]},{"name":"l3*ping-wang","index":98,"children":[]},{"name":"l3*SACHS TOM","index":99,"children":[]},{"name":"l3*byrne gerard-ie","index":100,"children":[]},{"name":"l3*MCQUEEN STEVE","index":101,"children":[]},{"name":"l3*HO RUI AN","index":102,"children":[]},{"name":"l3*STEYERL HITO","index":103,"children":[]},{"name":"l3*CHENG IAN","index":104,"children":[]},{"name":"l3*black-quantum-futurism-Camae-Ayewa-Moor Mother_Rasheedah-Phillips","index":105,"children":[]},{"name":"l3*KOLUMBA","index":106,"children":[]},{"name":"l3*BATIA SUTER","index":107,"children":[]},{"name":"l3*CAILLEAU GUILLAUME","index":108,"children":[]},{"name":"l3*PICASSO PABLO","index":109,"children":[]},{"name":"l3*waal-edmund-de_uk","index":110,"children":[]},{"name":"l3*EMPAC TROY USA","index":111,"children":[]},{"name":"l3*XING YAN","index":112,"children":[]},{"name":"l3*KAPOOR ANISH","index":113,"children":[]},{"name":"l3*AGATA ANTOINE","index":114,"children":[]},{"name":"l3*DINH Q. L?","index":115,"children":[]},{"name":"l3*brancusi-constantin_ro","index":116,"children":[]},{"name":"l3*KELLEY MIKE","index":117,"children":[]},{"name":"l3*BALDINGER-VU-HUU","index":118,"children":[]},{"name":"l3*DOUGLAS STAN","index":119,"children":[]},{"name":"l3*ROSEN ROEE","index":120,"children":[]},{"name":"l3*abosch kevin-ie","index":121,"children":[]},{"name":"l3*stella-frank_us","index":122,"children":[]},{"name":"l3*WIM JANSSEN","index":123,"children":[]},{"name":"l3*YOUNG SAMSON","index":124,"children":[]},{"name":"l3*FRAISSE VIRGILE","index":125,"children":[]},{"name":"l3*VO DANH","index":126,"children":[]},{"name":"l3*BOWEN DEANNA","index":127,"children":[]},{"name":"l3*MOHAIEMEN NAEEM","index":128,"children":[]},{"name":"l3*BRAKHAGE STAN","index":129,"children":[]},{"name":"l3*WEST JENIIFER","index":130,"children":[]},{"name":"l3*WILLIAMS CHRISTOPHER","index":131,"children":[]},{"name":"l3*GEFFRIAUD MARK","index":132,"children":[]},{"name":"l3*WOLFSON JORDAN","index":133,"children":[]},{"name":"l3*wearing-gillian_uk","index":134,"children":[]},{"name":"l3*ANG SONG-MING","index":135,"children":[]},{"name":"l3*TURRELL JAMES","index":136,"children":[]},{"name":"l3*FEUERSTEIN THOMAS","index":137,"children":[]},{"name":"l3*HIKARU FUJII","index":138,"children":[]},{"name":"l3*ZWIER PIM","index":139,"children":[]},{"name":"l3*A-DESSINS","index":140,"children":[]},{"name":"l3*Frisch Max","index":141,"children":[]},{"name":"l3*MODOTTI TINA","index":142,"children":[]},{"name":"l3*JONAS JOAN","index":143,"children":[]},{"name":"l3*ATAMAN KUTLUG","index":144,"children":[]},{"name":"l3*COLEMAN JAMES","index":145,"children":[]},{"name":"l3*ENO BRAIN","index":146,"children":[]},{"name":"l3*tarkovsky-andrei_ru","index":147,"children":[]},{"name":"l3*MELITOPOULOS ANGELA","index":148,"children":[]},{"name":"l3*THATER DIANA","index":149,"children":[]},{"name":"l3*DEAN TACITA","index":150,"children":[]},{"name":"l3*LEE HEEWON","index":151,"children":[]},{"name":"l3*huyghe-pierre_fr","index":152,"children":[]},{"name":"l3*shawky-wael_eg","index":153,"children":[]},{"name":"l3*beltran-erick_mx","index":154,"children":[]},{"name":"l3*MOSSE RICHARD","index":155,"children":[]},{"name":"l3*chang-ting-tong_tw","index":156,"children":[]},{"name":"l3*BRIM VIKTOR","index":157,"children":[]},{"name":"l3*serra-richard_us","index":158,"children":[]},{"name":"l3*TENU CLAIRE","index":159,"children":[]},{"name":"l3*ELIASSON OLAFUR","index":160,"children":[]},{"name":"l3*KAZMA ALI","index":161,"children":[]},{"name":"l3*ROSEFELDT JULIAN","index":162,"children":[]},{"name":"l3*MIK AERNOUT","index":163,"children":[]},{"name":"l3*REM KOOLHAAS","index":164,"children":[]},{"name":"l3*MALANI NALINI","index":165,"children":[]},{"name":"l3*PHILIPPE PARRENO","index":166,"children":[]},{"name":"l3*piper-adrian","index":167,"children":[]},{"name":"l3*RAMIREZ ENRIQUE","index":168,"children":[]},{"name":"l3*GRASSO LAURENT","index":169,"children":[]},{"name":"l3*IKEDA RYOJI","index":170,"children":[]},{"name":"l3*MAHAMA IBRAHIM","index":171,"children":[]},{"name":"l3*bunte-andreas-de","index":172,"children":[]},{"name":"l3*MOSTYN SANTIAGO","index":173,"children":[]},{"name":"l3*FOFANA ABOUBAKAR","index":174,"children":[]},{"name":"l3*bing-wang_cn","index":175,"children":[]},{"name":"l3*vanderbeek-stan_us","index":176,"children":[]},{"name":"l3*TAVASIEV ROSTAN","index":177,"children":[]},{"name":"l3*RAN CHENG","index":178,"children":[]},{"name":"l3*SHALEV-GERZ ESTHER","index":179,"children":[]},{"name":"l3*KENTRIDGE WILLIAM","index":180,"children":[]},{"name":"l3*HENRICKS NELSON","index":181,"children":[]},{"name":"l3*YI ANICKA","index":182,"children":[]},{"name":"l3*HILLER SUSAN","index":183,"children":[]},{"name":"l3*eiko-koma-dance","index":184,"children":[]},{"name":"l3*matos-luis-lazaro_pt","index":185,"children":[]},{"name":"l3*AHTILA EIJA LIISA","index":186,"children":[]},{"name":"l3*b?rt?s-magnus_se","index":187,"children":[]},{"name":"l3*marclay-christian_ch","index":188,"children":[]},{"name":"l3*REBLE JURGEN","index":189,"children":[]},{"name":"l3*PFEIFER MARIO","index":190,"children":[]},{"name":"l3*SCHMELZDAHIN Filme","index":191,"children":[]},{"name":"l3*MARKER CHRIS","index":192,"children":[]}]},{"name":"l2*food crisis-commodity-traders-provoking-riots-wars","index":2,"children":[]},{"name":"l2*genomics","index":3,"children":[]},{"name":"l2*japan","index":4,"children":[]},{"name":"l2*congo-jules marchal","index":5,"children":[]},{"name":"l2*encyclopedia-machines","index":6,"children":[]},{"name":"l2*rilke-rainer-maria-poet-der-panther","index":7,"children":[]},{"name":"l2*sustainable-printing","index":8,"children":[]},{"name":"l2*tinting-toning","index":9,"children":[]},{"name":"l2*radial tree","index":10,"children":[]},{"name":"l2*color-library-ch","index":11,"children":[]},{"name":"l2*0-bibliography","index":12,"children":[{"name":"l3*EYE-TRACKING (photography, history of vision, science)","index":0,"children":[]},{"name":"l3*ANIMAL STUDIES (commodities, programming, behavioral)","index":1,"children":[]},{"name":"l3*LAW (and archives)","index":2,"children":[]},{"name":"l3*POETRY (Celan Paul)","index":3,"children":[]},{"name":"l3*phd-Knowledge Development in Artistic Research","index":4,"children":[]},{"name":"l3*textes-th?ories","index":5,"children":[]},{"name":"l3*TRUTH AND RECONCILIATION","index":6,"children":[]},{"name":"l3*WEALTH, POWER AND IMPERIALISM","index":7,"children":[]},{"name":"l3*TWITTER BOTS internet-native art form","index":8,"children":[]},{"name":"l3*SOCIAL RESEARCH (Citizenship)","index":9,"children":[]},{"name":"l3*CULTURAL STUDIES (Anthropology and Haraway)","index":10,"children":[]},{"name":"l3*CRITICAL THEORY (Foucault, Debord, Derrida)","index":11,"children":[]},{"name":"l3*TECHNOLOGY AND SOCIETY (Anthropocene)","index":12,"children":[]},{"name":"l3*ART-MARKET (datasets)","index":13,"children":[]},{"name":"l3*ARCHIVAL SCIENCE","index":14,"children":[]},{"name":"l3*ARTISTIC RESEARCH STUDIES","index":15,"children":[]},{"name":"l3*TYPOGRAPHY","index":16,"children":[]},{"name":"l3*HUMAN RIGHTS","index":17,"children":[]},{"name":"l3*PRISON-ABOLITION","index":18,"children":[]},{"name":"l3*SHORT STORY (Literary Genre)","index":19,"children":[]},{"name":"l3*MUSICOLOGY","index":20,"children":[]},{"name":"l3*INDIGENOUS STUDIES","index":21,"children":[]},{"name":"l3*FILM STUDIES (photography and archival film practice)","index":22,"children":[]},{"name":"l3*GEOGRAPHY (Historical)","index":23,"children":[]}]},{"name":"l2*tall-tale","index":13,"children":[]},{"name":"l2*dancin'-mistrel","index":14,"children":[]},{"name":"l2*ordre-des-architectes","index":15,"children":[{"name":"l3*STATUT SARL ARCHITECTURE","index":0,"children":[]},{"name":"l3*MODE DE CALCUL SALAIRES","index":1,"children":[]},{"name":"l3*INSCRIPTION","index":2,"children":[]},{"name":"l3*GUIDE DES SOCIETES D ARCHITECTURE","index":3,"children":[]}]},{"name":"l2*ircam-paris","index":16,"children":[]},{"name":"l2*composers","index":17,"children":[{"name":"l3*Unknown Artist","index":0,"children":[]},{"name":"l3*Amit Goswami","index":1,"children":[]},{"name":"l3*SUZHOU RIVER BO","index":2,"children":[]},{"name":"l3*Stravinsky, Igor; CBC SO; Columbia SO","index":3,"children":[]},{"name":"l3*Julia Fischer, Russian National Orchestra, Yakov Kreizberg","index":4,"children":[]},{"name":"l3*The English Baroque Soloists - J. E. Gardiner","index":5,"children":[]},{"name":"l3*Liszt Franz","index":6,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Cyndia Sieden","index":7,"children":[]},{"name":"l3*Vyacheslav Ovchinnikov","index":8,"children":[]},{"name":"l3*David Lindley","index":9,"children":[]},{"name":"l3*Bach, Johann Sebastian","index":10,"children":[]},{"name":"l3*Alva Noto & Ryuichi Sakamoto","index":11,"children":[]},{"name":"l3*Zolt?n Kocsis_ Hungarian National Philharmonic Orchestra","index":12,"children":[]},{"name":"l3*Esbj?rn Svensson Trio","index":13,"children":[]},{"name":"l3*Chet Baker","index":14,"children":[]},{"name":"l3*Mikl?s P?renyi","index":15,"children":[]},{"name":"l3*Pat Metheny Group","index":16,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Chorus of the Royal Opera House, Covent Garden","index":17,"children":[]},{"name":"l3*Mingus Big Band","index":18,"children":[]},{"name":"l3*Gabor Csalog_Kurtag_Kemenes","index":19,"children":[]},{"name":"l3*Paganini","index":20,"children":[]},{"name":"l3*Composer_ Brahms; Conductor_ Solti - Chicago SO","index":21,"children":[]},{"name":"l3*Chamber Ensemble conducted by Andr?as Mih?ly","index":22,"children":[]},{"name":"l3*Sun Tzu","index":23,"children":[]},{"name":"l3*Fr?d?ric Chopin","index":24,"children":[]},{"name":"l3*Music For 18 Musicians","index":25,"children":[]},{"name":"l3*Mozart","index":26,"children":[]},{"name":"l3*Lenny Breau","index":27,"children":[]},{"name":"l3*Istv?n Antal","index":28,"children":[]},{"name":"l3*Richard Wagner","index":29,"children":[]},{"name":"l3*Mstislav Rostropovich, Rudolf Serkin","index":30,"children":[]},{"name":"l3*Jimmy Raney","index":31,"children":[]},{"name":"l3*J?nos Pilinszky (Recitation) & Zolt?n kocsis, Gy?rgy Kurt?g (Piano, Zongora)","index":32,"children":[]},{"name":"l3*Ken Hakii [Viola]","index":33,"children":[]},{"name":"l3*Arditti Quartet & Thomas Ad?s","index":34,"children":[]},{"name":"l3*Hermann Kretzschmar; Peter E?tv?s_ Ensemble Modern","index":35,"children":[]},{"name":"l3*David Oistrakh","index":36,"children":[]},{"name":"l3*M?rta F?bi?n (Cimbalom)","index":37,"children":[]},{"name":"l3*Arvo P?rt","index":38,"children":[]},{"name":"l3*Antonin Dvorak, Slovak Radio Symphony Orchestra","index":39,"children":[]},{"name":"l3*Maurizio Pollini","index":40,"children":[]},{"name":"l3*Orchestra Anima Eterna","index":41,"children":[]},{"name":"l3*Thomas Ad?s_ Birmingham Contemporary Music Group","index":42,"children":[]},{"name":"l3*Frederic Chiu","index":43,"children":[]},{"name":"l3*Stravinsky Igor Works","index":44,"children":[]},{"name":"l3*Tal Farlow","index":45,"children":[]},{"name":"l3*Handel","index":46,"children":[]},{"name":"l3*Grant Green","index":47,"children":[]},{"name":"l3*Juliane Banse, Andras Keller","index":48,"children":[]},{"name":"l3*Caetano Veloso, Gilberto Gil & Maria Beth?nia","index":49,"children":[]},{"name":"l3*Jim Hall","index":50,"children":[]},{"name":"l3*John Eliot Gardiner","index":51,"children":[]},{"name":"l3*Sviatoslav Richter","index":52,"children":[]},{"name":"l3*Baden Powell","index":53,"children":[]},{"name":"l3*Hank Garland","index":54,"children":[]},{"name":"l3*Keith Jarrett","index":55,"children":[]},{"name":"l3*Stravinsky, Igor; Columbia SO","index":56,"children":[]},{"name":"l3*Montreal Symphony Orchestra, Charles Dutoit","index":57,"children":[]},{"name":"l3*Hank Mobley","index":58,"children":[]},{"name":"l3*Claudio Arrau","index":59,"children":[]},{"name":"l3*Zolt?n Kocsis","index":60,"children":[]},{"name":"l3*Bach - J. E. Gardiner - The English Baroque Soloists","index":61,"children":[]},{"name":"l3*Bill Bryson","index":62,"children":[]},{"name":"l3*John Coltrane","index":63,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Simon Keenlyside_Ian Bostridge","index":64,"children":[]},{"name":"l3*Stan Getz & Jo?o Gilberto Featuring Antonio Carlos Jobim","index":65,"children":[]},{"name":"l3*Einst?rzende Neubauten","index":66,"children":[]},{"name":"l3*Caetano Veloso","index":67,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Kate Royal_Simon Keenlyside","index":68,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Kate Royal_Toby Spence_Simon Keenlyside_Cyndia Sieden","index":69,"children":[]},{"name":"l3*Emil Gilels","index":70,"children":[]},{"name":"l3*Stefan Metz [Cello]","index":71,"children":[]},{"name":"l3*PHILIP GLASS","index":72,"children":[]},{"name":"l3*George Frideric Handel","index":73,"children":[]},{"name":"l3*Ulrich-K-Anderson-C_From-The-Pole-To-The-Equator-bo","index":74,"children":[]},{"name":"l3*ERROL GARNER","index":75,"children":[]},{"name":"l3*various","index":76,"children":[]},{"name":"l3*Jo?o Bosco","index":77,"children":[]},{"name":"l3*Judit Hevesi (Violin) & J?zsef Szalay (cimbalom)","index":78,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Chorus of the Royal Opera House, Covent Garden_Kate Royal","index":79,"children":[]},{"name":"l3*Joe Pass","index":80,"children":[]},{"name":"l3*Alexis Weissenberg","index":81,"children":[]},{"name":"l3*Voice Memos","index":82,"children":[]},{"name":"l3*Musique de la garde r?publicaine","index":83,"children":[]},{"name":"l3*Antonin Dvorak, Slovak Philharmonic Orchestra","index":84,"children":[]},{"name":"l3*Ben Frost","index":85,"children":[]},{"name":"l3*Claudio Abbado - Berliner Philharmoniker","index":86,"children":[]},{"name":"l3*Thomas Ad?s_ City Of Birmingham Symphony Orchestra","index":87,"children":[]},{"name":"l3*Weather Report","index":88,"children":[]},{"name":"l3*Compilations","index":89,"children":[]},{"name":"l3*Christine Whittlesey, M?rta F?bi?n, Mathias Tacke, Thomas Fichter; Peter E?tv?s_ Ensemble Modern","index":90,"children":[]},{"name":"l3*Erroll Garner","index":91,"children":[]},{"name":"l3*Soft Machine","index":92,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden","index":93,"children":[]},{"name":"l3*Vinicius de Moraes","index":94,"children":[]},{"name":"l3*George Frederic Handel","index":95,"children":[]},{"name":"l3*Ray Brown","index":96,"children":[]},{"name":"l3*Sergey Prokofiev","index":97,"children":[]},{"name":"l3*Friedrich Gulda","index":98,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Simon Keenlyside_Kate Royal","index":99,"children":[]},{"name":"l3*Orlando Trio","index":100,"children":[]},{"name":"l3*Kurt Widmer [Baritone]","index":101,"children":[]},{"name":"l3*Ad?s","index":102,"children":[]},{"name":"l3*Freire, Nelson, piano; Chailly - Gewandhauseorchester (Decca 2006)","index":103,"children":[]},{"name":"l3*Mafuba","index":104,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Toby Spence_Kate Royal_Simon Keenlyside_Cyndia Sieden","index":105,"children":[]},{"name":"l3*Muungano national choir, Kenya","index":106,"children":[]},{"name":"l3*Hampton Hawes","index":107,"children":[]},{"name":"l3*Kenny Burrell","index":108,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra Of The Royal Opera House, Covent Garden_Cyndia Sieden_Ian Bostridge","index":109,"children":[]},{"name":"l3*Leif Ove Andsnes","index":110,"children":[]},{"name":"l3*Amir D. Aczel","index":111,"children":[]},{"name":"l3*Hiromi Kikuchi [Violin]","index":112,"children":[]},{"name":"l3*Ernest Ranglin","index":113,"children":[]},{"name":"l3*Johnny Smith","index":114,"children":[]},{"name":"l3*Charles Mingus","index":115,"children":[]},{"name":"l3*Amadeus Quartet, et al","index":116,"children":[]},{"name":"l3*Franz Liszt","index":117,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Simon Keenlyside_Cyndia Sieden","index":118,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Toby Spence_Kate Royal_Simon Keenlyside","index":119,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Ian Bostridge_David Cordier_Stephen Richardson","index":120,"children":[]},{"name":"l3*The Chemical Brothers","index":121,"children":[]},{"name":"l3*Richard Wolfson","index":122,"children":[]},{"name":"l3*Angela Hewitt, piano","index":123,"children":[]},{"name":"l3*Pat Metheny","index":124,"children":[]},{"name":"l3*Rafael Kubelik & The Bavarian Symphony Orchestra","index":125,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Simon Keenlyside_Donald Kaasch_Philip Langridge_Graeme Danby_Toby Spence","index":126,"children":[]},{"name":"l3*Einsturzende Neubauten","index":127,"children":[]},{"name":"l3*Thomas Ad?s_Orchestra of the Royal Opera House, Covent Garden_Stephen Richardson_David Cordier_Ian Bostridge","index":128,"children":[]},{"name":"l3*Erika Sziklay (Soprano) & Lor?nt Sc?cs","index":129,"children":[]},{"name":"l3*Baden Powell & Vin?cius de Moraes","index":130,"children":[]},{"name":"l3*Rosemary Hardy; Peter E?tv?s_ Ensemble Modern","index":131,"children":[]},{"name":"l3*Boris Berman","index":132,"children":[]},{"name":"l3*Elis Regina e Tom Jobim","index":133,"children":[]},{"name":"l3*Simon Rattle_ City Of Birmingham Symphony Orchestra","index":134,"children":[]},{"name":"l3*Johannes Brahms","index":135,"children":[]}]},{"name":"l2*bertillon-alphonse-archive","index":18,"children":[{"name":"l3*Tests","index":0,"children":[]},{"name":"l3*PREFECTURE DE POLICE ARCHIVE","index":1,"children":[]}]},{"name":"l2*scribes-miniature-persanne","index":19,"children":[]},{"name":"l2*softwares","index":20,"children":[{"name":"l3*RHINO 5","index":0,"children":[]},{"name":"l3*MICROSOFT OFFICE 2016 v15 13.3","index":1,"children":[]},{"name":"l3*mv2101","index":2,"children":[]},{"name":"l3*Processing","index":3,"children":[]}]},{"name":"l2*hereros-genocide_namibia","index":21,"children":[]},{"name":"l2*bosnia-","index":22,"children":[]},{"name":"l2*warhol-life-magazine","index":23,"children":[]},{"name":"l2*alligator wrestling","index":24,"children":[]},{"name":"l2*librairies-list","index":25,"children":[]},{"name":"l2*nude","index":26,"children":[]},{"name":"l2*data-scraping","index":27,"children":[]},{"name":"l2*typeface-maison-neue-mg-web","index":28,"children":[{"name":"l3*ttf copy","index":0,"children":[]}]},{"name":"l2*pavillon-francais-venice","index":29,"children":[]},{"name":"l2*book-burning","index":30,"children":[]},{"name":"l2*docnow.io","index":31,"children":[]},{"name":"l2*drivers-logiciels","index":32,"children":[{"name":"l3*FIRMWARE","index":0,"children":[]},{"name":"l3*BIOS","index":1,"children":[]}]},{"name":"l2*architects","index":33,"children":[{"name":"l3*Albert Abut architecte et associ?s","index":0,"children":[]},{"name":"l3*BERDAGUET PEJUS","index":1,"children":[]},{"name":"l3*SPACE PLANNING","index":2,"children":[]},{"name":"l3*Sistema de trabajo(II) El croquis","index":3,"children":[]},{"name":"l3*PERAULT","index":4,"children":[]},{"name":"l3*TOYO ITO","index":5,"children":[]},{"name":"l3*Cultuurforum COMPETITION","index":6,"children":[]},{"name":"l3*WON DHARMA CENTER","index":7,"children":[]},{"name":"l3*HERZOG DE MEURON","index":8,"children":[]},{"name":"l3*WANG SHU","index":9,"children":[]},{"name":"l3*CITE DE CHAILLOT","index":10,"children":[]},{"name":"l3*Arakawa & Gins","index":11,"children":[]},{"name":"l3*CRATERRE","index":12,"children":[]},{"name":"l3*SCARPA CARLO","index":13,"children":[]},{"name":"l3*J.MAYER","index":14,"children":[]},{"name":"l3*KOOLHAAS REM","index":15,"children":[]},{"name":"l3*OSA OPEN SOURCE ARCHITECTURE","index":16,"children":[]},{"name":"l3*SNOHETTA","index":17,"children":[]},{"name":"l3*YAMAMOTO RIKEN","index":18,"children":[]},{"name":"l3*TSCHAPELLER","index":19,"children":[]},{"name":"l3*LINA BO BARDI","index":20,"children":[]},{"name":"l3*METHODES DE CONSTRUCTION","index":21,"children":[]},{"name":"l3*BLOC Andr?","index":22,"children":[]},{"name":"l3*BRICK WORKS","index":23,"children":[]},{"name":"l3*AIDA Takefumi","index":24,"children":[]},{"name":"l3*ALBERT ABUT","index":25,"children":[]},{"name":"l3*COMBEAU ARCHITECTURA","index":26,"children":[]},{"name":"l3*BERNARD VAUDEVILLE T?E?S?S","index":27,"children":[]},{"name":"l3*MOREAU-KUSUNOKI","index":28,"children":[]},{"name":"l3*RUDOLF STEINER","index":29,"children":[]},{"name":"l3*SCHINKEL Karl Friedrich","index":30,"children":[]},{"name":"l3*ABRAHAM Raimund","index":31,"children":[]},{"name":"l3*FRANK O GEHRY","index":32,"children":[]},{"name":"l3*ARCHITECTURE ET BOIS","index":33,"children":[]},{"name":"l3*ZUMTHOR","index":34,"children":[]},{"name":"l3*BAMBOO WORKS","index":35,"children":[]},{"name":"l3*ABRIL Anton Garcia, Ensamble Studio","index":36,"children":[]},{"name":"l3*LEFUEL","index":37,"children":[]},{"name":"l3*Autostadt Wolfsburg","index":38,"children":[]},{"name":"l3*COOP HIMMELBLAU","index":39,"children":[]},{"name":"l3*STEVEN HOLL","index":40,"children":[]},{"name":"l3*URBAN PLANNING","index":41,"children":[]},{"name":"l3*SCHAULAGER - FRITSCH - KOASCHKAROW","index":42,"children":[]},{"name":"l3*KAORU MENDE","index":43,"children":[]},{"name":"l3*YOSHIO TANIGUCHI","index":44,"children":[]},{"name":"l3*BOULLEE Etienne Louis","index":45,"children":[]},{"name":"l3*JULIEN - NICOLAS - SOPHIE","index":46,"children":[]},{"name":"l3*HALLER FRITZ","index":47,"children":[]},{"name":"l3*CHINESE GROUNDS PATTERNS","index":48,"children":[]},{"name":"l3*OMA AMO ARCHIVE","index":49,"children":[]},{"name":"l3*MORPHOSIS","index":50,"children":[]},{"name":"l3*ORNEMENTS","index":51,"children":[]},{"name":"l3*AUBERT - DONDEL","index":52,"children":[]},{"name":"l3*FORSTER&PARTNERS","index":53,"children":[]},{"name":"l3*TOITURES","index":54,"children":[]},{"name":"l3*KENGO KUMA","index":55,"children":[]},{"name":"l3*MAQUETTES","index":56,"children":[]},{"name":"l3*THEATRES","index":57,"children":[]},{"name":"l3*GUGGENHEIM HELSINKI COMPETITION","index":58,"children":[]}]},{"name":"l2*I-am-a-man-protest_memphis-1968","index":34,"children":[]},{"name":"l2*1-fournisseurs","index":35,"children":[{"name":"l3*prnewswire","index":0,"children":[]},{"name":"l3*guyenne-papier-paper-stock","index":1,"children":[]},{"name":"l3*petersen-bricks-kolumba","index":2,"children":[]},{"name":"l3*fischer-papier-ch","index":3,"children":[]}]},{"name":"l2*[Ica-l] SAHR News","index":36,"children":[]},{"name":"l2*drawings","index":37,"children":[]},{"name":"l2*dictator-hussein-saddam","index":38,"children":[]},{"name":"l2*musical-instruments","index":39,"children":[]},{"name":"l2*ota-benga","index":40,"children":[]},{"name":"l2*dictator-ceausescu-nicolae","index":41,"children":[]},{"name":"l2*celan-paul-poet","index":42,"children":[]},{"name":"l2*chatbot","index":43,"children":[]},{"name":"l2*dictator-kadhafi-mouammar","index":44,"children":[]},{"name":"l2*new-gallery-kinema-regent-street_london-1913","index":45,"children":[]},{"name":"l2*vitrines","index":46,"children":[]},{"name":"l2*natural-history-museum-nyc-photographs-ethnography","index":47,"children":[]},{"name":"l2*Screenshots","index":48,"children":[]},{"name":"l2*documenting fergusson","index":49,"children":[]},{"name":"l2*china-censorship","index":50,"children":[]},{"name":"l2*leni-paul-joker","index":51,"children":[]},{"name":"l2*templates","index":52,"children":[{"name":"l3*projet-template-old-2","index":0,"children":[]},{"name":"l3*0_Project-template","index":1,"children":[]},{"name":"l3*project-template-old-1","index":2,"children":[]}]},{"name":"l2*film-archives","index":53,"children":[{"name":"l3*de_max-planck-institute-history-of-science","index":0,"children":[]},{"name":"l3*de-usa_kleinschmidt-F-E-filmmaker","index":1,"children":[]},{"name":"l3*fr_cnc-inatheque","index":2,"children":[]},{"name":"l3*frank-hurley-filmmaker","index":3,"children":[]},{"name":"l3*nl_nasjonalbiblioteket-NB-nl","index":4,"children":[]},{"name":"l3*nl_Nederlands Instituut voor Beeld en Geluid","index":5,"children":[]},{"name":"l3*dk_Villy Fog Lauritzen-danish-film-institute","index":6,"children":[]},{"name":"l3*uk_Captain Salvesen","index":7,"children":[]},{"name":"l3*uk_british-film-institute-archives","index":8,"children":[]},{"name":"l3*dk_Knudsen-Erik-R-danish-film-institute","index":9,"children":[]},{"name":"l3*fr_international-federation-of-film-archives-fiaf","index":10,"children":[]},{"name":"l3*fr_cnc-bois-d-arcy","index":11,"children":[]},{"name":"l3*us_Film Study Center-Eastman-Museum-Whale Fishery 28mm film","index":12,"children":[]},{"name":"l3*fi_national-archives-finland","index":13,"children":[]},{"name":"l3*fr_comit? du film ethnographique du mus?e de l'homme","index":14,"children":[]},{"name":"l3*fr_INA","index":15,"children":[]},{"name":"l3*uk_sea-mammal-research-unit-st-andrews-uk-british-empire","index":16,"children":[]},{"name":"l3*nl_eye-museum-nl-archives","index":17,"children":[]},{"name":"l3*fr_cin?matheque-toulouse-archives","index":18,"children":[]}]},{"name":"l2*bibliotheque-sur-mesure","index":54,"children":[{"name":"l3*Guangzhou Jeanter Office Furniture","index":0,"children":[]},{"name":"l3*MECALUX","index":1,"children":[]},{"name":"l3*CONTRAT","index":2,"children":[]}]}]})
Insert cell
tree = (data, layout) => {
const root = d3.hierarchy(data);
root.dx = treeObj.rootDX;
root.dy = treeObj.rootDY;
const treeNode = d3.tree().nodeSize([root.dx, root.dy])(root);
// const treeNode = d3.cluster().size([2 * Math.PI, root.dy]).separation((a, b) => (a.parent == b.parent ? 1 : 3) / a.depth).depth(root);
setMinMaxCoordinates(root, treeObj.layout);
return treeNode;
}
Insert cell
d3 = require("d3@4")
Insert cell

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.
Learn more