2e:null 2f:["$","title",null,{"children":"Phylogeny | Urmila | Observable"}] 34:T6c9,chart = { const svg = d3.select(DOM.svg(width,height)) .style("background-color","#e2e4e7") let pathLength const root = tree(data) const link = svg.append("g") .attr("transform",`translate(${width/2-300},${height/2+120})`) .attr("fill","transparent") .attr("stroke","purple") .attr("stroke-width",2.5) .selectAll("path") .data(root.links()) .join("path") .attr("class","path") .attr("d",d=> `M${d.target.y},${d.target.x} C${d.source.y + root.dy / 2},${d.target.x} ${d.source.y + root.dy / 2},${d.source.x} ${d.source.y},${d.source.x}`) .attr("stroke-dasharray",function(){ return pathLength =this.getTotalLength() }) .transition() .delay((d,i)=>i*500) .attr("stroke-dasharray",pathLength) .transition() .attr("stroke-dasharray",0) .transition() .attr("stroke-dasharray",0) const label = svg.append("g") .attr("transform",`translate(${width/2-300},${height/2+120})`) .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.y},${d.x})`) label.append("text") .attr("x",d=>d.children?-6:6) .text(d=>d.data.name) .style("font-size","1.3em") .attr("text-anchor", (d,i)=>d.children?"end":"start") .style("opacity",0) .transition() .duration(2000) .delay((d,i)=>i*400) .style("opacity",1) label.append("image") .attr("xlink:href",d=>d.data.img) .attr("width",80) .attr("height",80) .attr("y",30) return svg.node() }35:[{"id":"a0032446c315a3c24230051eb8ab91aaa0fa585d7f561d132b1a62ff0e1b817b12c8e2c8a4bdd27bf126dfc2473959c103436c207f5139c86e3c1e927303a4d5","href":"https://static.observableusercontent.com/files/a0032446c315a3c24230051eb8ab91aaa0fa585d7f561d132b1a62ff0e1b817b12c8e2c8a4bdd27bf126dfc2473959c103436c207f5139c86e3c1e927303a4d5","name":"humanFamilyTree.json","type":"application/json","lastModified":1617245926776.99,"size":869}] 32:{"id":"c10bd31add402ea2","slug":"phylogeny","title":" Phylogeny ","thumbnail":"74000ea440a9dd6e772840d4f9e3d72bfee6b28d76352c4c2b9774ce4f9e4c55","access_level":"public","create_time":"$D2021-03-31T07:58:45.565Z","update_time":"$D2022-05-19T10:04:32.866Z","view_time":null,"first_public_time":"$D2021-04-01T04:14:16.232Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"700e8d2a68a68d16","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":"starter_2024"},"version":399,"publish_version":399,"role":null,"authored":false,"authors":[{"type":"individual","id":"a8b59130ff113103","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":null}],"members":[{"type":"individual","id":"a8b59130ff113103","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"043e5f95e13c0b1e","slug":"30daychartchallenge","title":"#30DayChartChallenge","owner":{"id":"700e8d2a68a68d16","login":"urmilaj","name":"Urmila"}},"type":"notebook","body":{"title":" Phylogeny ","cells":[{"id":0,"value":"html`

Phylogeny

Week 1: Comparisons. Day1: Part to Whole.

#30daychartchallenge

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"html`

Data Credit:\n Ape. In Wikipedia, The Free Encyclopedia.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"root = tree(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"tree = data => {\n const root = d3.hierarchy(data)\n .sort((a,b)=>(a.height-b.height))\n \n root.dx = -5;\n root.dy = 100;\n \n return d3.cluster().nodeSize([root.dx-5*10,root.dy])(root)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data = FileAttachment(\"humanFamilyTree.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"