30: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() }31:[{"id":"a0032446c315a3c24230051eb8ab91aaa0fa585d7f561d132b1a62ff0e1b817b12c8e2c8a4bdd27bf126dfc2473959c103436c207f5139c86e3c1e927303a4d5","href":"https://static.observableusercontent.com/files/a0032446c315a3c24230051eb8ab91aaa0fa585d7f561d132b1a62ff0e1b817b12c8e2c8a4bdd27bf126dfc2473959c103436c207f5139c86e3c1e927303a4d5","name":"humanFamilyTree.json","type":"application/json","lastModified":1617245926776.99,"size":869}] 2e:{"title":" Phylogeny ","cells":[{"id":0,"value":"html`

Phylogeny

Week 1: Comparisons. Day1: Part to Whole.

#30daychartchallenge

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"html`

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"root = tree(data)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":12,"value":"data = FileAttachment(\"humanFamilyTree.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}