2b:null 2c:["$","title",null,{"children":"D3 hierarchy / tree | Anders | Observable"}] 31:[] 2f:{"id":"8b26c7f1460a743f","slug":"d3-hierarchy-tree","title":"D3 hierarchy / tree","thumbnail":"1679521aae615f675acc63ca5a33c5b9f02e20ebc3a3abfd1c1610d3fbb58282","access_level":"public","create_time":"$D2021-02-26T13:17:24.075Z","update_time":"$D2021-04-16T13:42:41.333Z","view_time":null,"first_public_time":"$D2021-03-03T16:01:05.567Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"185626bcadc26005","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":"starter_2024"},"version":155,"publish_version":155,"role":null,"authored":false,"authors":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null}],"members":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"04f4b394708037c7","slug":"heig-visdom-2020","title":"HEIG-visdom-2020","owner":{"id":"185626bcadc26005","login":"idris-maps","name":"Anders"}},"type":"notebook","body":{"title":"D3 hierarchy / tree","cells":[{"id":118,"value":"md`\n# D3 hierarchy / tree\n\n[Docs](https://github.com/d3/d3-hierarchy#d3-hierarchy)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"data = ({\n \"name\": \"Eve\",\n \"children\": [\n {\n \"name\": \"Cain\"\n },\n {\n \"name\": \"Seth\",\n \"children\": [\n {\n \"name\": \"Enos\"\n },\n {\n \"name\": \"Noam\"\n }\n ]\n },\n {\n \"name\": \"Abel\"\n },\n {\n \"name\": \"Awan\",\n \"children\": [\n {\n \"name\": \"Enoch\"\n }\n ]\n },\n {\n \"name\": \"Azura\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"svg`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"md`Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"size = ({\n svg: { width, height: width / 5 },\n node: { width: 200, height: 50 },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"md`Créer une hiérarchie`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"root = d3.hierarchy(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"md`Une fonction pour créer un \"arbre\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"treeGenerator = d3.tree().nodeSize([size.node.width, size.node.height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"md`Créer une arborescence en passant la hierarchie D3, *root*, à *treeGenerator*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"tree = treeGenerator(root)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"md`Une fonction pour dessiner les textes pour chaque noeud`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"drawNodes = nodes => svg`\n \n ${\n nodes.map(d => svg`\n \n ${d.data.name}\n ${d.data.name}\n \n `)\n }\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"md`Une fonction pour dessiner les liens entre les noeuds`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"linkGenerator = d3.linkVertical()\n .x(d => d.x)\n .y(d => d.y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"md`Une fonction pour dessiner les liens`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"drawLinks = links => svg`\n \n ${\n links.map(d => svg`\n \n `)\n }\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"