2b:null 2c:["$","title",null,{"children":"Trees of Life with Photos | Thad Kerosky | Observable"}] 31:T1b9f,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.style("background", "#FFF"); 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; } svg { background-color: white; font-family: 'Lato'; font-size: 14pt; font-weight: 600; } .annotation-note-title, text.title { font-weight: bold; } text.title { font-size: 1.2em; } svg .annotation.rect text { fill: var(--annotation-context-color); font-size: .6em; text-transform: uppercase; } svg .annotation.callout.rect path.subject{ fill-opacity: .1; } svg .annotation.callout.rect path.subject { fill: var(--annotation-context-color); stroke: none; stroke-dasharray: 2, 8; } `); svg.append("g").call(legend); 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") .attr("stroke-width", 10) .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( (enter) => enter .append("a") .attr("target", function (d) { return "_blank"; }) .attr("xlink:href", (d) => { const txt = speciesLookup.find( (n) => (n && n.sci_name) === d.data.sci_name ); return txt?.url || undefined; }) .on("mouseover", function () { d3.select(this).raise(); mouseovered(true); }) .on("mouseout", mouseovered(false)), (update) => update, (exit) => exit.remove() ) .append("text") .attr("dy", ".41em") .attr( "transform", (d) => `rotate(${d.x - 90}) translate(${innerRadius} 0)${ d.x < 180 ? "" : " rotate(180)" }` ) .attr("text-anchor", (d) => (d.x < 180 ? "start" : "end")) .text((d) => { const txt = speciesLookup.find( (n) => (n && n.sci_name) === d.data.sci_name ); const ellip = txt?.common_name.length + txt?.subtitle?.length >= 4 ? "…" : ""; return `${txt?.common_name ? txt?.common_name : d.data.sci_name}${ txt?.subtitle ? ", " /*+ txt?.subtitle.slice(0, 4)*/ + ellip : "" }`; }) .on("mouseover", mouseovered(true)) .on("mouseout", mouseovered(false)) .append("title") .text((d) => { const sci_name = d?.data?.sci_name; const txt = speciesLookup.find( (n) => (n && n.sci_name) === d.data.sci_name ); return `${sci_name}: ${ txt?.common_name ? txt?.common_name : d.data.sci_name }${txt?.subtitle ? ", " + txt?.subtitle : ""}`; }); svg .append("g") // .selectAll("a") // .data(root.leaves()) // .join("a") .selectAll("image") .data(root.leaves()) .join( (enter) => enter .append("a") .attr("target", function (d) { return "_blank"; }) .attr("xlink:href", (d) => { const txt = speciesLookup.find( (n) => (n && n.sci_name) === d.data.sci_name ); return txt?.url || undefined; }) .on("mouseover", function () { d3.select(this).raise(); mouseovered(true); }) .on("mouseout", mouseovered(false)), (update) => update, (exit) => exit.remove() ) .append("image") .attr("dy", ".31em") .attr( "transform", (d) => `rotate(${ d.x < 180 ? d.x - imageNudge - 1.75 : d.x - imageNudge - 1.25 }) translate(${ d.x < 180 ? innerRadius + 120 - 21 : innerRadius + 120 + 30 },0)${d.x < 180 ? "" : " scale(-1, -1)"}` /* rotate(116.68421052631578) translate(562,0) scale(-1, -1) */ /* `rotate(${d.x - 90}) translate(${innerRadius + 40},0)${ d.x < 180 ? "" : " rotate(180)" }` */ ) .attr( "xlink:href", (d) => speciesLookup.sort().find((n) => (n && n.sci_name) === d.data.sci_name) ?.imgblob || speciesLookup.sort().find((n) => (n && n.sci_name) === d.data.sci_name) ?.img //.replace("http", "https") ) .attr("alt", (d) => d.data.sci_name) .attr("width", "60") .attr("height", "60") .on("mouseover", mouseovered(true)) .on("mouseout", mouseovered(false)) .append("title") .text((d) => d.data.sci_name); 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)); }; } const makeAnnotations = d3_annotation .annotation() .type(d3_annotation.annotationLabel); // .annotations(annotations); if (example === presetGroupingMap.get("phytotheca.com garden species")) { svg.append("g").attr("class", "annotation-group").call(makeAnnotations); } const divwidth = window.innerWidth * 0.85; const divheight = 500; svg .attr("width", divwidth) .attr("height", divheight) .style("position", "absolute") .style("top", "0px") .style("left", "0px") .style("pointer-events", "none"); const div = html`

${svg.node()}

`; const divSel = d3 .select(div) .style("overflow-y", "auto") .style("white-space", "nowrap") .style("overflow-x", "hidden") .style("cursor", "grab") .style("max-width", `${divwidth}px`) .style("max-height", `${divheight}px`); return Object.assign(div, { update }); }32:T6fa,annotations = [ { note: { title: "All Mushrooms" }, x: 0, y: -80, dy: 107, dx: -94, connector: { end: "arrow" // 'dot' also available } }, { note: { title: "Monocots branch" }, connector: { end: "arrow" // 'dot' also available }, x: 110, y: -220, dy: 27, dx: 30 }, { note: { title: "Dicots branch" }, connector: { end: "arrow" // 'dot' also available }, x: 70, y: 199, dy: 0, dx: -120 }, { note: { title: "Lettuce-like" }, connector: { end: "arrow" // 'dot' also available }, x: -215, y: -340, dy: 20, dx: 10 }, { note: { title: "Legumes" }, connector: { end: "arrow" // 'dot' also available }, x: -215, y: 325, dy: -80, dx: 8 }, { note: { title: "Curcubita" }, connector: { end: "arrow" // 'dot' also available }, x: -105, y: 435, dy: -50, dx: 25 }, { note: { title: "Spinach-like" }, connector: { end: "arrow" // 'dot' also available }, x: 425, y: -45, dy: 40, dx: -120 }, { note: { title: "Mustard-like" }, connector: { end: "arrow" // 'dot' also available }, x: 190, y: 420, dy: -40, dx: -60 }, { note: { title: "Pods & Baobab" }, connector: { end: "arrow" // 'dot' also available }, x: 410, y: 180, dy: -20, dx: -40 }, { note: { title: "Nightshades" }, connector: { end: "arrow" // 'dot' also available }, x: -380, y: 220, dy: -40, dx: -20 } ].map(function (d) { d.color = "#E8336D"; return d; })33:T5c6,speciesLookup = // } catch (e) {} // }; // imgblob // url: `https://thadk-cors.herokuapp.com/${n.hyperlink}`, // ...n, // return { // : undefined; // ) // n.img.replace("http://", "https://thadk-cors.herokuapp.com/") // ? await loadXHR( // embedImages.length > 0 // const imgblob = // try { // (await FileAttachment("wood-database-img.json").json()).map(async (n) => { // pythotheca.concat( // }) Promise.all( (await FileAttachment("foodb_2020_Food-6.json").json()) .filter((n) => n.name_scientific !== null && n.name_scientific !== "") .map(async (n) => { try { const imgblob = embedImages.length > 0 ? await loadXHR( `https://thadk-cors.herokuapp.com/https://foodb.ca/system/foods/pictures/${n.id}/full/${n.id}.png` ) : undefined; return { common_name: n.name, sci_name: n.name_scientific, img: `https://foodb.ca/system/foods/pictures/${n.id}/full/${n.id}.png` /*...n*/, url: n.wikipedia_id && `https://en.wikipedia.org/wiki/${n.wikipedia_id}`, imgblob }; } catch (e) {} }) ) // ) /* regenerate wood-database-img.json from default */ // copy(default2.map(u => ({ //...spec.find(s => s.hyperlink === u.url), //imgsrc: u.imgSrc, //imgs: u?.imgSrc?.match(/(.*?jpg) .*/), //img: u?.imgSrc?.match(/(.*?jpg) .*/)?.[1] //}))) */34:[{"id":"458a3a5b113c782467f15374d67f91eeddbb31e548717282a2e48be26bc80bd9aa79cdfa3273b11524eb62d02f84256952d51ba5b54ab9007e77f7e179f270af","href":"https://static.observableusercontent.com/files/458a3a5b113c782467f15374d67f91eeddbb31e548717282a2e48be26bc80bd9aa79cdfa3273b11524eb62d02f84256952d51ba5b54ab9007e77f7e179f270af","name":"forestopia(1).json","type":"application/json","lastModified":1670821707047.717,"size":1544},{"id":"78945146d2b6a6a30e3781d3b0b6f2d1a617c0777592fa115575f7b5e73b538205f1e299ce6fb7c6c895275c8c73a878ab7e5b22531743e0296c10f10397f844","href":"https://static.observableusercontent.com/files/78945146d2b6a6a30e3781d3b0b6f2d1a617c0777592fa115575f7b5e73b538205f1e299ce6fb7c6c895275c8c73a878ab7e5b22531743e0296c10f10397f844","name":"phytotheca-species.json","type":"application/json","lastModified":1670821709985.015,"size":101666},{"id":"763b215d039730ab619855e074ea479b1133e08673e1691a9f07d3e58b3249cface44f28fe2369cb6218ec87c52a553f46f96a4e4884f978adb66029bafbc461","href":"https://static.observableusercontent.com/files/763b215d039730ab619855e074ea479b1133e08673e1691a9f07d3e58b3249cface44f28fe2369cb6218ec87c52a553f46f96a4e4884f978adb66029bafbc461","name":"wood_species-1.json","type":"application/json","lastModified":1670823993722.53,"size":78586},{"id":"8ba4f94716cad7b73c54498d6c23243e6cde058fa2ba769282e786ac977abed444f2682314ae64eaefe7acdb30ebeb28b434344ad3e80c17deb5485fee038883","href":"https://static.observableusercontent.com/files/8ba4f94716cad7b73c54498d6c23243e6cde058fa2ba769282e786ac977abed444f2682314ae64eaefe7acdb30ebeb28b434344ad3e80c17deb5485fee038883","name":"wood-database-img.json","type":"application/json","lastModified":1671722313354.063,"size":388597},{"id":"2e755017ad73bd5c2e909f62580051579010c3f963a34ed83a9cfe0f8ad7caa4392e47e74b1fd09c1db8780023a9f16debccad3d388b57fb2a8c492abcdd7947","href":"https://static.observableusercontent.com/files/2e755017ad73bd5c2e909f62580051579010c3f963a34ed83a9cfe0f8ad7caa4392e47e74b1fd09c1db8780023a9f16debccad3d388b57fb2a8c492abcdd7947","name":"generateCachedNwk-2023.json","type":"application/json","lastModified":1675053811350.241,"size":2196580},{"id":"f55ab0a4bdc66855810c6224ef73fcf3819aa26d2d7dc8e564c70cea75a41ff3f03e51e370c44e5524e9bf2b77df43062db3747ea168ad12b3c155308cd90015","href":"https://static.observableusercontent.com/files/f55ab0a4bdc66855810c6224ef73fcf3819aa26d2d7dc8e564c70cea75a41ff3f03e51e370c44e5524e9bf2b77df43062db3747ea168ad12b3c155308cd90015","name":"phytotheca-species-checked.json","type":"application/json","lastModified":1675053866147.783,"size":103794},{"id":"1682ab73cc49307be89d03e031438d3235aa2701d3a3a07d1e1522ac7b034cb6f3828902722e1b18a35d171949ab5e79a64c55ef6b56c8e878fa3d667e2b67d5","href":"https://static.observableusercontent.com/files/1682ab73cc49307be89d03e031438d3235aa2701d3a3a07d1e1522ac7b034cb6f3828902722e1b18a35d171949ab5e79a64c55ef6b56c8e878fa3d667e2b67d5","name":"phytotheca-species-checked@1.json","type":"application/json","lastModified":1675053954276.567,"size":103794},{"id":"006e8ab2e42ed7f69064a919428efd82608c977b8ce4006b69eb928f75a9aad2fcdb6cfdf7d66e9993c41e3bc3553978c745c602bf8789a9ec6cdf9dba3e3dea","href":"https://static.observableusercontent.com/files/006e8ab2e42ed7f69064a919428efd82608c977b8ce4006b69eb928f75a9aad2fcdb6cfdf7d66e9993c41e3bc3553978c745c602bf8789a9ec6cdf9dba3e3dea","name":"generateCachedNwk(5).json","type":"application/json","lastModified":1631857285997.133,"size":309792},{"id":"30a8adc6c8645d80270154bab33d40ffbcec5dfa797b4940110ad977aeba81b86cc6c76dfe3e052c35994388cd8cce13bb5755f9e3fd2552d9527075cbd10697","href":"https://static.observableusercontent.com/files/30a8adc6c8645d80270154bab33d40ffbcec5dfa797b4940110ad977aeba81b86cc6c76dfe3e052c35994388cd8cce13bb5755f9e3fd2552d9527075cbd10697","name":"cachedNwk(1).json","type":"application/json","lastModified":1670809335506.603,"size":2185657},{"id":"ac45332916a6f217bd1894106df64ce72ab73974ceb1dc450b99d606de47a4d1f9b68ed8bfe17005cefe7e765b50373713f93fa8265c6d0532aea7aaa59a2b41","href":"https://static.observableusercontent.com/files/ac45332916a6f217bd1894106df64ce72ab73974ceb1dc450b99d606de47a4d1f9b68ed8bfe17005cefe7e765b50373713f93fa8265c6d0532aea7aaa59a2b41","name":"foodb_2020_Food-6.json","type":"application/json","lastModified":1706519826248.312,"size":1506949}] 2f:{"id":"36069f04415f1417","slug":"life-img","title":"Trees of Life with Photos","thumbnail":"706e3cdc13a5ef3e440e71c5004f2b2aefe305569a3d916b45313f79dd47dd9a","access_level":"public","create_time":"$D2021-09-17T05:41:25.463Z","update_time":"$D2025-02-01T04:49:23.091Z","view_time":null,"first_public_time":"$D2022-12-12T01:42:12.548Z","fork":{"id":"05775bc344fcf638","slug":"tree-of-life","title":"Tree of Life","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5cd4a42aead2029f","login":"thadk","name":"Thad Kerosky","avatar_url":"https://avatars-next.observableusercontent.com/2f2413891eb0ff4669b49685946f849544a1e49e7047923d158638bc30666281","tier":"starter_2024"},"version":1362,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be3e6e81af18a319","login":"thadk","name":"Thad Kerosky","avatar_url":"https://avatars-next.observableusercontent.com/2f2413891eb0ff4669b49685946f849544a1e49e7047923d158638bc30666281","tier":null}],"members":[{"type":"individual","id":"be3e6e81af18a319","login":"thadk","name":"Thad Kerosky","avatar_url":"https://avatars-next.observableusercontent.com/2f2413891eb0ff4669b49685946f849544a1e49e7047923d158638bc30666281","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"69b3a340350d64a2","slug":"published","title":"Published","owner":{"id":"5cd4a42aead2029f","login":"thadk","name":"Thad Kerosky"}},"type":"notebook","body":{"title":"Trees of Life with Photos","cells":[{"id":0,"value":"md`# Trees of Life with Photos\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/). **One fully produced set is at [\"Garden\"](https://observablehq.com/@thadk/garden).**\n\nNewick data generated in Pyodide ETE3 in [Your Own Phylogenic Tree](https://observablehq.com/@thadk/life) imported to raw D3 example\n\nOnly \"FooDB.ca Foods list 2020 pre-release\", \"Wood-database.com species\" and \"phytotheca.com garden species\" have high image coverage so far.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"viewof example = Inputs.radio(presetGroupingMap, {\n label: \"Use a preset list\",\n value: presetGroupingMap.get(\"FooDB.ca Foods list 2020 pre-release\")\n})\n/* TODO: Your Last Edit needs to update presetGrouping more often\n */","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"async function loadXHR(url) {\n function typedArrayToURL(typedArray, mimeType) {\n return URL.createObjectURL(\n new Blob([typedArray.buffer], { type: mimeType })\n );\n }\n return await new Promise(function (resolve, reject) {\n try {\n var xhr = new XMLHttpRequest();\n xhr.open(\"GET\", url);\n xhr.responseType = \"blob\";\n xhr.onerror = function () {\n reject(\"Network error.\");\n };\n\n xhr.onload = async function () {\n if (xhr.status === 200) {\n resolve(\n `${await blobToBase64(xhr.response)}`\n /* below solution only generates a local URL and doesn't embed the img in the SVG */\n // URL.createObjectURL(xhr.response, {\n // type: \"image/jpeg\"\n // }) /*, \"image/jpeg\")*/\n );\n } else {\n reject(\"Loading error:\" + xhr.statusText);\n }\n };\n xhr.send();\n } catch (err) {\n reject(err.message);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"async function blobToBase64(blob) {\n return new Promise((resolve, _) => {\n const reader = new FileReader();\n reader.onloadend = () => resolve(reader.result);\n reader.readAsDataURL(blob);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof width = Inputs.radio([750, 1024, 1400, 2800, 9500], {\n label: \"Width\",\n value: 9500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"viewof embedImages = Inputs.checkbox([\"Download & Embed in SVG\"], {\n label: \"Images\",\n value: [\"Download & Embed in SVG\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"viewof imageNudge = Inputs.range([87, 90], {\n label: \"Image Nudge\",\n step: 0.3,\n value: 88.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"Make a new list at https://observablehq.com/@thadk/life and export the Newick string to visualize here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1339,"value":"// Add a scroll listener to the window object and rotate the selected text according to the scroll\n// we used * 0.15 to make the rotation looks smoother\n// window.addEventListener(\"scroll\", function () {\n// chart.style.transform = `rotate(${window.scrollY * 0.15}deg)`;\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"// pythotheca = Promise.all(\n// (await FileAttachment(\"phytotheca-species-checked@1.json\").json()).map(async (n) => {\n// try {\n// const imgblob =\n// embedImages.length > 0\n// ? await loadXHR(n.img.replace(\"http:\", \"https:\"))\n// : undefined;\n// const sci_name = n.sci_name.trim();\n// return { ...n, sci_name, imgblob };\n// } catch (e) {}\n// })\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"FileAttachment(\"forestopia(1).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"presetGroupingArray = FileAttachment(\"generateCachedNwk-2023.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"presetGroupingMap = new Map(presetGroupingArray.map(n => [n.originalName, n.nwkString]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"update = chart.update(false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"cluster = d3\n .cluster()\n .size([360, innerRadius])\n .separation((a, b) => 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"// playCluster = {\n// const root = d3\n// .hierarchy(data, (d) => d.branchset)\n// .sum((d) => (d.branchset ? 0 : 1))\n// .sort(\n// (a, b) => a.value - b.value || d3.ascending(a.data.length, b.data.length)\n// );\n\n// return cluster(root);\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"color = d3\n .scaleOrdinal()\n .domain([\"Opisthokonta\", \"Liliopsida\", \"eudicotyledons\", \"Magnoliidae\"])\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":61,"value":"// Set the color of each node by recursively inheriting.\nfunction setColor(d) {\n var name = d.data.sci_name;\n d.color =\n color.domain().indexOf(name) >= 0\n ? color(name)\n : d.parent\n ? d.parent.color\n : null;\n if (d.children) d.children.forEach(setColor);\n // console.log(\"test\", d.data, d.color);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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(\n \"transform\",\n (d, i) => `translate(${-outerRadius},${-outerRadius + i * 20})`\n );\n\n g.append(\"rect\").attr(\"width\", 18).attr(\"height\", 18).attr(\"fill\", color);\n\n const familiarName = {\n Opisthokonta: \"Fungi (Opisthokonta)\",\n Liliopsida: \"Monocots (Liliopsida)\",\n eudicotyledons: \"Dicots (eudicotyledons)\",\n Magnoliidae: \"Magnolias, nutmeg, cinnamon, avocado… (Magnoliidae)\"\n };\n\n g.append(\"text\")\n .attr(\"x\", 200)\n .attr(\"y\", 80)\n .attr(\"dy\", \"0.35em\")\n .text((d) => familiarName[d]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"data = parseNewick(example)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"outerRadius = width / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"innerRadius = outerRadius - 170","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// https://github.com/jasondavies/newick.js\nfunction parseNewick(a) {\n for (\n var e = [], r = {}, s = a.split(/\\s*(;|\$|\$|,|:)\\s*/), t = 0;\n t < s.length;\n t++\n ) {\n var n = s[t];\n switch (n) {\n case \"(\":\n var c = {};\n (r.branchset = [c]), e.push(r), (r = c);\n break;\n case \",\":\n var c = {};\n e[e.length - 1].branchset.push(c), (r = c);\n break;\n case \")\":\n r = e.pop();\n break;\n case \":\":\n break;\n default:\n var h = s[t - 1];\n \")\" == h || \"(\" == h || \",\" == h\n ? (r.name = n)\n : (r[n.match(/.*(sci_name)=(.*)/)?.[1]] =\n n.match(/.*(sci_name)=(.*)/)?.[2]);\n }\n }\n return r;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"d3_annotation = require(\"https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.3.2/d3-annotation.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"html`\n\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"