2b:null 2c:["$","title",null,{"children":"Tree of Life | Columbia Dataviz | Observable"}] 31:T944,chart = { const root = d3.hierarchy(data, d => d.branchset) .sum(d => d.branchset ? 0 : 1) .sort((a, b) => (a.value - b.value) || d3.ascending(a.data.length, b.data.length)); cluster(root); setRadius(root, root.data.length = 0, innerRadius / maxLength(root)); setColor(root); const svg = d3.create("svg") .attr("viewBox", [-outerRadius, -outerRadius, width, width]) .attr("font-family", "sans-serif") .attr("font-size", 10); svg.append("g") .call(legend); svg.append("style").text(` .link--active { stroke: #000 !important; stroke-width: 1.5px; } .link-extension--active { stroke-opacity: .6; } .label--active { font-weight: bold; } `); const linkExtension = svg.append("g") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-opacity", 0.25) .selectAll("path") .data(root.links().filter(d => !d.target.children)) .join("path") .each(function(d) { d.target.linkExtensionNode = this; }) .attr("d", linkExtensionConstant); const link = svg.append("g") .attr("fill", "none") .attr("stroke", "#000") .selectAll("path") .data(root.links()) .join("path") .each(function(d) { d.target.linkNode = this; }) .attr("d", linkConstant) .attr("stroke", d => d.target.color); svg.append("g") .selectAll("text") .data(root.leaves()) .join("text") .attr("dy", ".31em") .attr("transform", d => `rotate(${d.x - 90}) translate(${innerRadius + 4},0)${d.x < 180 ? "" : " rotate(180)"}`) .attr("text-anchor", d => d.x < 180 ? "start" : "end") .text(d => d.data.name.replace(/_/g, " ")) .on("mouseover", mouseovered(true)) .on("mouseout", mouseovered(false)); function update(checked) { const t = d3.transition().duration(750); linkExtension.transition(t).attr("d", checked ? linkExtensionVariable : linkExtensionConstant); link.transition(t).attr("d", checked ? linkVariable : linkConstant); } function mouseovered(active) { return function(event, d) { d3.select(this).classed("label--active", active); d3.select(d.linkExtensionNode).classed("link-extension--active", active).raise(); do d3.select(d.linkNode).classed("link--active", active).raise(); while (d = d.parent); }; } return Object.assign(svg.node(), {update}); }32:T94a,chart2 = { const root = d3.hierarchy(gcfinal, d => d.branchset) .sum(d => d.branchset ? 0 : 1) .sort((a, b) => (a.value - b.value) || d3.ascending(a.data.length, b.data.length)); cluster(root); setRadius(root, root.data.length = 0, innerRadius / maxLength(root)); setColor2(root); const svg = d3.create("svg") .attr("viewBox", [-outerRadius, -outerRadius, width, width]) .attr("font-family", "sans-serif") .attr("font-size", 10); svg.append("g") .call(legend2); svg.append("style").text(` .link--active { stroke: #000 !important; stroke-width: 3.5px; } .link-extension--active { stroke-opacity: .6; } .label--active { font-weight: bold; } `); const linkExtension = svg.append("g") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-opacity", 0.50) .selectAll("path") .data(root.links().filter(d => !d.target.children)) .join("path") .each(function(d) { d.target.linkExtensionNode = this; }) .attr("d", linkExtensionConstant); const link = svg.append("g") .attr("fill", "none") .attr("stroke", "#000") .selectAll("path") .data(root.links()) .join("path") .each(function(d) { d.target.linkNode = this; }) .attr("d", linkConstant) .attr("stroke", d => d.target.color); svg.append("g") .selectAll("text") .data(root.leaves()) .join("text") .attr("dy", ".31em") .attr("transform", d => `rotate(${d.x - 90}) translate(${innerRadius + 4},0)${d.x < 180 ? "" : " rotate(180)"}`) .attr("text-anchor", d => d.x < 180 ? "start" : "end") .text(d => d.data.name.replace(/_/g, " ")) .on("mouseover", mouseovered(true)) .on("mouseout", mouseovered(false)); function update(checked) { const t = d3.transition().duration(750); linkExtension.transition(t).attr("d", checked ? linkExtensionVariable : linkExtensionConstant); link.transition(t).attr("d", checked ? linkVariable : linkConstant); } function mouseovered(active) { return function(event, d) { d3.select(this).classed("label--active", active); d3.select(d.linkExtensionNode).classed("link-extension--active", active).raise(); do d3.select(d.linkNode).classed("link--active", active).raise(); while (d = d.parent); }; } return Object.assign(svg.node(), {update}); }33:[{"id":"818ec1334688a0bd315222228552b87133fafe8dd3cd130a2a919d7ddec2d7c6ca00d5ae74243773a907fa62bc19082c9c985c9d6e55b95d5a340991852d92a7","href":"https://static.observableusercontent.com/files/818ec1334688a0bd315222228552b87133fafe8dd3cd130a2a919d7ddec2d7c6ca00d5ae74243773a907fa62bc19082c9c985c9d6e55b95d5a340991852d92a7","name":"life.txt","type":"application/octet-stream","lastModified":1712192256654.071,"size":11978},{"id":"9766733a5e40c8fdb389fb509afc36dd1f44ed5be200d0f10f50048c8165beadf6e446ea39d5df70a3f85578229feb35922bb5f4a749857ee12920ee2b9f9a0e","href":"https://static.observableusercontent.com/files/9766733a5e40c8fdb389fb509afc36dd1f44ed5be200d0f10f50048c8165beadf6e446ea39d5df70a3f85578229feb35922bb5f4a749857ee12920ee2b9f9a0e","name":"starbucks_drinkMenu_expanded.csv","type":"text/csv","lastModified":1712192256654.071,"size":26898}] 2f:{"id":"1561998a18464c05","slug":null,"title":"Tree of Life","thumbnail":"107cd3c0c0a3ae2ed985bbc1cbd384c942dc6e5a268ade8f39d060ab7fa65dfc","access_level":"public","create_time":"$D2024-04-04T00:57:36.654Z","update_time":"$D2024-04-04T01:01:52.266Z","view_time":null,"first_public_time":"$D2024-04-04T01:19:09.796Z","has_unpublished_edits":null,"fork":{"id":"23f0dd80242204d7","slug":null,"title":"Tree of Life","owner":{"id":"3dd78b8674df19f8","login":"mrudhul-guda-ws","name":"Mrudhul Guda's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"education_2026","bio":""},"version":237,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"83ea62110d61d59a","login":"anusha-lavanuru","name":"Anusha Lavanuru","avatar_url":"https://avatars-next.observableusercontent.com/9c46bdac3f53ea454c55574449ce16854e4d56460b825207ba06ace879bba4c8","tier":null,"bio":""}],"members":[{"type":"individual","id":"83ea62110d61d59a","login":"anusha-lavanuru","name":"Anusha Lavanuru","avatar_url":"https://avatars-next.observableusercontent.com/9c46bdac3f53ea454c55574449ce16854e4d56460b825207ba06ace879bba4c8","tier":null,"role":"editor"},{"type":"individual","id":"b6b0188a344c2aa3","login":"claire-chen","name":"Claire Chen","avatar_url":"https://avatars-next.observableusercontent.com/69d54c6a685b3b3fb93c7ca8c83c015386137ec6e694707285331ed47e2a040f","tier":null,"role":"editor"},{"type":"individual","id":"9fa9f74c37ed280c","login":"ha-yeon-kim","name":"Ha Yeon Kim","avatar_url":"https://avatars-next.observableusercontent.com/461998ae502a1862e7e92cc3979322057190f0c0d6d9389afd9d32053a5cb83c","tier":null,"role":"editor"},{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tree of Life","cells":[{"id":0,"value":"md`# Tree of Life\n\nA phylogenetic tree inspired by [a figure from *Nature*](https://www.nature.com/articles/nature08656/figures/1) and [Jason Davies](https://www.jasondavies.com/tree-of-life/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"viewof showLength = {\n const form = html`

Show branch length`;\n const timeout = setTimeout(() => {\n form.i.checked = true;\n form.i.onclick();\n }, 2000);\n form.i.onclick = () => {\n clearTimeout(timeout);\n form.value = form.i.checked;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = false;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"# u can copy from this and ignore update and color and setcolor and rest copy ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"update = chart.update(showLength)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"cluster = d3.cluster()\n .size([360, innerRadius])\n .separation((a, b) => 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"color = d3.scaleOrdinal()\n .domain([\"Bacteria\", \"Eukaryota\", \"Archaea\"])\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"// Set the color of each node by recursively inheriting.\nfunction setColor(d) {\n var name = d.data.name;\n d.color = color.domain().indexOf(name) >= 0 ? color(name) : d.parent ? d.parent.color : null;\n if (d.children) d.children.forEach(setColor);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"// Compute the maximum cumulative length of any node in the tree.\nfunction maxLength(d) {\n return d.data.length + (d.children ? d3.max(d.children, maxLength) : 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"// Set the radius of each node by recursively summing and scaling the distance from the root.\nfunction setRadius(d, y0, k) {\n d.radius = (y0 += d.data.length) * k;\n if (d.children) d.children.forEach(d => setRadius(d, y0, k));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"function linkVariable(d) {\n return linkStep(d.source.x, d.source.radius, d.target.x, d.target.radius);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"function linkConstant(d) {\n return linkStep(d.source.x, d.source.y, d.target.x, d.target.y);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"function linkExtensionVariable(d) {\n return linkStep(d.target.x, d.target.radius, d.target.x, innerRadius);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"function linkExtensionConstant(d) {\n return linkStep(d.target.x, d.target.y, d.target.x, innerRadius);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"function linkStep(startAngle, startRadius, endAngle, endRadius) {\n const c0 = Math.cos(startAngle = (startAngle - 90) / 180 * Math.PI);\n const s0 = Math.sin(startAngle);\n const c1 = Math.cos(endAngle = (endAngle - 90) / 180 * Math.PI);\n const s1 = Math.sin(endAngle);\n return \"M\" + startRadius * c0 + \",\" + startRadius * s0\n + (endAngle === startAngle ? \"\" : \"A\" + startRadius + \",\" + startRadius + \" 0 0 \" + (endAngle > startAngle ? 1 : 0) + \" \" + startRadius * c1 + \",\" + startRadius * s1)\n + \"L\" + endRadius * c1 + \",\" + endRadius * s1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"legend = svg => {\n const g = svg\n .selectAll(\"g\")\n .data(color.domain())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${-outerRadius},${-outerRadius + i * 20})`);\n\n g.append(\"rect\")\n .attr(\"width\", 18)\n .attr(\"height\", 18)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", 24)\n .attr(\"y\", 9)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"data = parseNewick(await FileAttachment(\"life.txt\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"outerRadius = width / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"innerRadius = outerRadius - 170","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// https://github.com/jasondavies/newick.js\nfunction parseNewick(a){for(var e=[],r={},s=a.split(/\\s*(;|\$|\$|,|:)\\s*/),t=0;t ({\n bc: d[\"Beverage_category\"],\n b: d[\"Beverage\"],\n c: d[\"Calories\"]\n }));\n const gc = new Map();\n circulardata.forEach(buck => {\n const parentKey = buck.bc;\n const child = { name: buck.b, length: buck.c };\n if(gc.has(parentKey)) {\n // gc.get(buck.bc).push({name : buck.b, value: buck.c});\n const children = gc.get(parentKey);\n const existingChild = children.find(obj => obj.name === child.name);\n if (existingChild) {\n \n } else {\n children.push(child);\n }\n } else {\n gc.set(buck.bc, [child])\n }\n});\n\n gc.forEach((childrenArray, parentName) => {\n gcfinal.branchset.push({ name: parentName, branchset: childrenArray, length: 100});\n});\n\n return gcfinal\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"gcfinal = pparsing(datastarbucks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"keysofcategories = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"gcfinal.branchset.forEach(child => {keysofcategories.push(child.name)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"viewof showLength2 = {\n const form = html`Show branch length`;\n const timeout = setTimeout(() => {\n form.i.checked = true;\n form.i.onclick();\n }, 2000);\n form.i.onclick = () => {\n clearTimeout(timeout);\n form.value = form.i.checked;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = false;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"update2 = chart2.update(showLength2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"color2 = d3.scaleOrdinal()\n .domain(keysofcategories)\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"legend2 = svg => {\n const g = svg\n .selectAll(\"g\")\n .data(color2.domain())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${-outerRadius},${-outerRadius + i * 20})`);\n\n g.append(\"rect\")\n .attr(\"width\", 18)\n .attr(\"height\", 18)\n .attr(\"fill\", color2);\n\n g.append(\"text\")\n .attr(\"x\", 24)\n .attr(\"y\", 9)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"function setColor2(d) {\n var name = d.data.name;\n d.color = color2.domain().indexOf(name) >= 0 ? color2(name) : d.parent ? d.parent.color : null;\n if (d.children) d.children.forEach(setColor2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"