2d:null 2e:["$","title",null,{"children":"A lightweight library for phylogenies | Max Brown | Observable"}] 33:Ta3c,chart3 = { const tree_df = radialLayout(readTree(treestring)) const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("font-family", "sans-serif") .attr("font-size", 10); // create a grouping variable var group = svg.append("g"); // zoom instead function zoomed() { group.attr("transform", d3.event.transform); } svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 8]) .on("zoom", zoomed)); var stroke_width = 3 // draw radii group.append("g") .attr("class", "phylo_lines") .selectAll("lines") .data(tree_df.arcs) .join("path") .attr("d", d => describeArc(xScale(0), yScale(0), d.radius*1225, d.start, d.end)) .attr('fill-opacity', '0') .attr("class", "path") .attr("stroke", "#777") .attr("stroke-width", stroke_width) // draw radii group.append("g") .attr("class", "phylo_lines") .selectAll("lines") .data(tree_df.radii) .join("line") .attr("class", "lines") .attr("x1", d => xScale(d.x0)) .attr("y1", d => yScale(d.y0)) .attr("x2", d => xScale(d.x1)) .attr("y2", d => yScale(d.y1)) .attr("stroke-width", stroke_width) .attr("stroke", "#777"); const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .attr("class", "tiplabs") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "black") //draw nodes group.append("g") .attr("class", "phylo_points") .selectAll(".dot") // remove rogue dot. .data(tree_df.radii) .join("circle") .attr("class", "dot") .attr("r", function(d) { if (d.isTip) { return(4); } else { return(3); } }) .attr("cx", d => xScale(d.x0)) .attr("cy", d => yScale(d.y0)) .attr("stroke", "black") .attr("stroke-width", 2) .attr("fill", function(d) { if (d.isTip) { return("black"); } else { return("white"); }; }) .on("mouseover", function(){ return tooltip.style("visibility", "visible"); }) .on("mousemove", function(d){ return tooltip .style("top", (d3.event.pageY-10)+"px") .style("left",(d3.event.pageX+10)+"px") .style("color", "white") .text(tree_df => d.thisId) }) .on("mouseout", function(){ return tooltip.style("visibility", "hidden"); }); return svg.node() }34:Tba7,chart2 = { // tree building const unrooted_tree = unrooted(tree) const fact = 1.5; const xValue = function(d) { return d.x; }, // xScale = d3.scaleLinear() // .domain([-1*fact, 1*fact]) // .range([0, width]), xMap = function(d) { return xScale(xValue(d)); }, // points xMap1 = function(d){ return xScale(d.x1)}, // lines xMap2 = function(d) { return xScale(d.x2); }, xAxis = d3.axisBottom() .scale(xScale); const yValue = function(d) { return d.y; }, // yScale = d3.scaleLinear() // .domain([-1*fact,1*fact]) // .range([height, 0]), yMap = function(d) { return yScale(yValue(d)); }, yMap1 = function(d) { return yScale(d.y1); }, yMap2 = function(d) { return yScale(d.y2); }, yAxis = d3.axisLeft() .scale(yScale); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("font-family", "sans-serif") .attr("font-size", 10); // create a grouping variable to rotate var group = svg.append("g"); // zoom instead svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 8]) .on("zoom", zoomed)); function zoomed() { group.attr("transform", d3.event.transform); } // draw lines group.append("g") .attr("class", "phylo_lines") .selectAll("lines") .data(unrooted_tree.edges) .enter().append("line") .attr("class", "lines") .attr("x1", xMap1) .attr("y1", yMap1) .attr("x2", xMap2) .attr("y2", yMap2) .attr("stroke-width", 3) .attr("stroke", "#777"); const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .attr("class", "tiplabs") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "black") // draw points group.append("g") .attr("class", "phylo_points") .selectAll(".dot") .data(unrooted_tree.tree_df) .enter().append("circle") .attr("class", "dot") .attr("r", function(d) { if (d.isTip) { return(4); } else { return(3); } }) .attr("cx", xMap) .attr("cy", yMap) .attr("stroke", "black") .attr("stroke-width", 2) .attr("fill", function(d) { if (d.isTip) { return("black"); } else { return("white"); }; }) .on("mouseover", function(){ return tooltip.style("visibility", "visible"); }) .on("mousemove", function(d){ return tooltip .style("top", (d3.event.pageY-10)+"px") .style("left",(d3.event.pageX+10)+"px") .style("color", "white") .text(tree_df => d.thisLabel.replace("_", " ")) }) .on("mouseout", function(){ return tooltip.style("visibility", "hidden"); }); return svg.node() }35:T839,chart = { const tree_df = rectangleLayout(readTree(treestring)) const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("font-family", "sans-serif") .attr("font-size", 10); // create a grouping variable var group = svg.append("g"); // zoom instead function zoomed() { group.attr("transform", d3.event.transform); } svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 8]) .on("zoom", zoomed)); var stroke_width = 3 // draw horizontal lines group.append("g") .attr("class", "phylo_lines") .selectAll("lines") .data(tree_df.horizontal_lines) .join("line") .attr("class", "lines") .attr("x1", d => xScale(d.x0) - stroke_width/2) .attr("y1", d => yScale(d.y0)) .attr("x2", d => xScale(d.x1) - stroke_width/2) .attr("y2", d => yScale(d.y1)) .attr("stroke-width", stroke_width) .attr("stroke", "#777"); // draw vertical lines group.append("g") .attr("class", "phylo_lines") .selectAll("lines") .data(tree_df.vertical_lines) .join("line") .attr("class", "lines") .attr("x1", d => xScale(d.x0)) .attr("y1", d => yScale(d.y0)) .attr("x2", d => xScale(d.x1)) .attr("y2", d => yScale(d.y1)) .attr("stroke-width", stroke_width) .attr("stroke", "#777"); // draw nodes group.append("g") .attr("class", "phylo_points") .selectAll(".dot") // remove rogue dot. .data(tree_df.horizontal_lines.filter(d => d.x1 > 0)) .join("circle") .attr("class", "dot") .attr("r", function(d) { if (d.isTip) { return(4); } else { return(3); } }) .attr("cx", d => xScale(d.x1)) .attr("cy", d => yScale(d.y1)) .attr("stroke", "black") .attr("stroke-width", 2) .attr("fill", function(d) { if (d.isTip) { return("black"); } else { return("white"); }; }) return svg.node() }36:Te31, // treestring = "(((T_1:0.685455224,(T_4:0.4110139941,T_2:0.1872414644):0.2098209821):0.80904822,T_5:0.3464688319):0.4013808114,T_3:0.4052806622);" treestring = "((((T366:0.04397509396,(T291:0.03300629849,(T308:0.02878967207,T304:0.02878967207)63.8:0.004216626411)55.4:0.01096879547)NA:0.002734443264,((T358:0.04072983677,T359:0.04072983677)NA:0.005801466325,((T310:0.03514753143,(T342:0.02779112233,(T297:0.02442060304,(T292:0.01538575591,(T299:0.01328827113,T298:0.01328827113)51.2:0.002097484776)97.2:0.00903484713)69.8:0.003370519292)78.4:0.007356409105)NA:0.009201575525,((T383:0.04021423612,(T315:0.03770249896,(T327:0.03623304633,(T314:0.03335792608,(T350:0.02719350556,(T326:0.02499990212,T316:0.02499990212)51.4:0.002193603441)63:0.006164420517)NA:0.002875120251)NA:0.001469452638)NA:0.002511737157)NA:0.002049479242,((T336:0.03397985113,T335:0.03397985113)52.2:0.007657313317,((T293:0.03673337523,T294:0.03673337523)NA:0.003431753654,(T339:0.03759782302,((T341:0.0329322193,(T322:0.03085915211,T353:0.03085915211)NA:0.002073067194)NA:0.002279320109,(T305:0.03344204163,((T330:0.01977384193,T331:0.01977384193)85.8:0.01187730301,(T296:0.03054288137,(T313:0.02989221314,(T354:0.0280581376,((T323:0.01516032455,T324:0.01516032455)97:0.01203700762,(T301:0.026166516,(T317:0.02351754268,(T309:0.02270796281,(T365:0.02137913519,(T320:0.01958552417,((T311:0.01356829158,(T321:0.009797676679,T312:0.009797676679)61.8:0.003770614898)NA:0.003676194746,(T318:0.01508760228,(T300:0.0125242839,T319:0.0125242839)NA:0.002563318377)NA:0.002156884042)NA:0.002341037848)NA:0.001793611024)NA:0.001328827615)NA:0.0008095798715)NA:0.002648973322)NA:0.001030816159)NA:0.0008608054395)NA:0.001834075539)NA:0.0006506682255)NA:0.001108263573)NA:0.00179089669)NA:0.001769497782)NA:0.002386283614)NA:0.002567305862)NA:0.00147203556)NA:0.0006265509183)NA:0.002085391595)NA:0.002182196133)NA:0.0001782341272)NA:0.009820716977,(T346:0.0495707188,(T295:0.04571189054,(T345:0.01766548982,T344:0.01766548982)100:0.02804640071)NA:0.003858828266)NA:0.006959535394)76:0.09488063596,((D374:0.06757002932,(((D375:0.05918301776,((D382:0.04596651155,(D370:0.041631059,(D379:0.03782293287,D380:0.03782293287)NA:0.003808126134)NA:0.00433545255)NA:0.005226771849,(D343:0.04830257484,D381:0.04830257484)NA:0.002890708563)NA:0.007989734355)NA:0.004117140923,((D371:0.05386095334,(D355:0.05137310534,(D307:0.04461225596,(D372:0.04306423971,(D340:0.04045263878,(D378:0.02204658188,(D306:0.013766427,D334:0.013766427)94.8:0.008280154877)99.6:0.0184060569)NA:0.002611600934)NA:0.001548016246)NA:0.006760849384)NA:0.002487848003)NA:0.006285195256,(D364:0.05655555988,(D361:0.05309108956,(D363:0.05018925118,(D347:0.03988672339,(D360:0.03295148181,(D357:0.02096263942,D356:0.02096263942)82.6:0.01198884239)63.8:0.006935241578)NA:0.01030252779)NA:0.002901838384)NA:0.003464470319)NA:0.003590588718)NA:0.003154010077)NA:0.003456015528,((D349:0.05771473154,D385:0.05771473154)NA:0.006786118672,((D332:0.05363855272,((D348:0.03993633123,D368:0.03993633123)NA:0.009226437513,(D377:0.04161734159,D384:0.04161734159)NA:0.007545427161)NA:0.00447578397)NA:0.009447857247,(D351:0.05392687597,(D338:0.04996253855,(D373:0.04626522502,(D362:0.03580684431,D376:0.03580684431)NA:0.01045838071)NA:0.003697313523)NA:0.003964337426)NA:0.009159533991)NA:0.001414440249)NA:0.002255323993)NA:0.0008138551137)NA:0.006440065628,((D369:0.01432086646,D367:0.01432086646)100:0.0566870592,((D303:0.01330830153,D302:0.01330830153)100:0.04900934321,(D329:0.0477603575,(D328:0.04072757461,D333:0.04072757461)78.6:0.007032782889)NA:0.01455728724)NA:0.008690280914)NA:0.003002169292)76:0.07740079521);"37:Ta33,/** * Rectangle layout algorithm. * Attempted copy of .layout.rect() function here https://github.com/ArtPoon/ggfree/blob/master/R/tree.R * @param {object} node */ function get_horizontal(node) { // phylodata layout... var pd = fortify(node); // get the names of the tips var tips = pd.map(d => (d.isTip ? d.thisLabel : null)).filter(d => d != null); // set y to null... not needed here. pd.map(d => (d.y = null)); // where y corresponds to a tip, return tip number // make y0 and y1 equal. var tipID = 1; for (var i = 0; i < pd.length; i++) { if (pd[i].isTip == true) { pd[i].y0 = tipID; pd[i].y1 = tipID; tipID += 1; } } // probably incredibly inefficient for large trees. // gets the y values of two child branches by looping through the whole tree... function y_vals(child_1, child_2) { for (var i = 0; i < pd.length; i++) { if (pd[i].thisId === child_1) { var y1 = pd[i].y0; } if (pd[i].thisId === child_2) { var y2 = pd[i].y0; } } return d3.mean([y1, y2]); } // if the node is not a tip... for (var i = 0; i < pd.length; i++) { if (pd[i].isTip === false) { // then y0 === y1 and is the mean of the parental nodes pd[i].y0 = y_vals(pd[i].children[0], pd[i].children[1]); pd[i].y1 = y_vals(pd[i].children[0], pd[i].children[1]); } } // find root var root = pd .map(d => (d.parentId === null ? d.thisId : null)) .filter(d => d != null)[0]; // sort the data temporarily in decreasing parentId pd.sort((a, b) => b.thisId - a.thisId); // get the branchlength of the parentID function get_parent_branchLength(current_parentId) { for (var i = 0; i < pd.length; i++) { if (pd[i].thisId === current_parentId) { var branchLength = pd[i].x1; } } return branchLength; } // last loop... // now get the x0 and x1 coordinates. for (var i = 0; i < pd.length; i++) { // special cases where parent is the root. if (pd[i].parentId === root) { // x0 = 0 and x1 is branch length pd[i].x0 = 0; pd[i].x1 = pd[i].branchLength; } else { // the x0 is that of the parent var parent_branchLength = get_parent_branchLength(pd[i].parentId); pd[i].x0 = parent_branchLength; // the x1 is the sum of parent and current branchlength pd[i].x1 = parent_branchLength + pd[i].branchLength; } } // return the original sorted data pd.sort((a, b) => a.thisId - b.thisId); // remove root? // finally get rid of unwanted y, x and angle properties return pd; }38:T624,function get_arcs(pd){ // must return start of arc and end // these are pairs of edges that have the same parent // start is the min(angle) of the children and end is the max(angle) // radius is the radius of the parent // origin is 0, 0 var data = [] var start = {} var end = {} var radius = {} var root = pd.map(d => d.parentId === null ? d.thisId:null).filter(d => d != null)[0] // get the branchlength of the parentID function sister_angle(current_parentId){ for(var i=0; i d.start !== d.end & d.radius !== 0) }39:Tb3d,function radial_data(node){ // should start out the same as get_horizontal // it's very similar in fact, but keeping separate for clarity. var pd = fortify(node) var tip_number = numTips(node) // make tip angles var tipID = 1; for(var i=0; i d.parentId === null ? d.thisId:null).filter(d => d != null)[0] // sort the data temporarily in decreasing parentId pd.sort((a,b) => b.thisId - a.thisId) // get the branchlength of the parentID function get_parent_branchLength(current_parentId){ for(var i=0; i a.thisId - b.thisId) return pd }3a:T552,/** * Equal-angle layout algorithm for unrooted trees. * Populates the nodes of a tree object with information on * the angles to draw branches such that they do not * intersect. * @param {object} node */ function equalAngleLayout(node) { if (node.parent === null) { // node is root node.start = 0.; // guarantees no arcs overlap 0 node.end = 2.; // *pi node.angle = 0.; // irrelevant node.ntips = numTips(node); node.x = 0; node.y = 0; } var child, arc, lastStart = node.start; for (var i=0; ix.id), 'branchLength': 0., 'isTip': false, 'x': node.x, 'y': node.y, 'angle': node.angle }) } else { df.push({ 'parentId': node.parent.id, 'parentLabel': node.parent.label, 'thisId': node.id, 'thisLabel': node.label, 'children': node.children.map(x=>x.id), 'branchLength': node.branchLength, 'isTip': (node.children.length==0), 'x': node.x, 'y': node.y, 'angle': node.angle }) } } if (sort) { df = df.sort(function(a, b) { return a.thisId - b.thisId; }) } return(df); }3d:T92d,/** * Parse a Newick tree string into a doubly-linked * list of JS Objects. Assigns node labels, branch * lengths and node IDs (numbering terminal before * internal nodes). * @param {string} text Newick tree string. * @return {object} Root of tree. * taken from Art Poon; http://slides.filogeneti.ca/js/phylo.js */ function readTree(text) { // remove whitespace text = text.replace(/ \t/g, ''); var tokens = text.split(/(;|$|$|,)/), root = {'parent': null, 'children':[]}, curnode = root, nodeId = 0; for (const token of tokens) { if (token == "" || token == ';') { continue } if (token == '(') { // add a child to current node var child = { 'parent': curnode, 'children': [] }; curnode.children.push(child); curnode = child; // climb up } else if (token == ',') { // climb down, add another child to parent curnode = curnode.parent; var child = { 'parent': curnode, 'children': [] } curnode.children.push(child); curnode = child; // climb up } else if (token == ')') { // climb down twice curnode = curnode.parent; if (curnode === null) { break; } } else { var nodeinfo = token.split(':'); if (nodeinfo.length==1) { if (token.startsWith(':')) { curnode.label = ""; curnode.branchLength = parseFloat(nodeinfo[0]); } else { curnode.label = nodeinfo[0]; curnode.branchLength = null; } } else if (nodeinfo.length==2) { curnode.label = nodeinfo[0]; curnode.branchLength = parseFloat(nodeinfo[1]); } else { // TODO: handle edge cases with >1 ":" console.warn(token, "I don't know what to do with two colons!"); } curnode.id = nodeId++; // assign then increment } } // if root node is unlabelled curnode.id = nodeId; return (root); } 3e:[] 31:{"id":"9ce39c1396bd4f94","slug":"a-lightweight-library-for-phylogenies","title":"A lightweight library for phylogenies","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-04-04T17:50:28.159Z","update_time":"$D2021-02-02T21:51:43.484Z","view_time":null,"first_public_time":"$D2020-05-15T16:20:04.719Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"8736e7a8f8672f04","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":"starter_2024"},"version":2281,"publish_version":2281,"role":null,"authored":false,"authors":[{"type":"individual","id":"448dbf923c3ebf2f","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":null}],"members":[{"type":"individual","id":"448dbf923c3ebf2f","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"A lightweight library for phylogenies","cells":[{"id":0,"value":"md`# A lightweight library for phylogenies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1810,"value":"md`**A work in progress!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1656,"value":"radialLayout(readTree(treestring))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"md`### Scales & axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"xScale = d3\n .scaleLinear()\n .domain([0, 1])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"yScale = d3\n .scaleLinear()\n .domain([0, 100])\n .range([height, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"radialLayout(readTree(treestring))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"tree = readTree(treestring)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"margin = ({top: 0, right: 10, bottom: 10, left: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"width = 1000 - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"height = 1000 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1523,"value":"origin = ({y: height/2,\n x: width/2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"md`### Tree layout functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1133,"value":"md`Rooted trees are those which are polarised by some information about which taxa are ancestral to others. The typical rooted tree is the rectangular layout, which is what a classical phylogenetic tree looks like. Another kind of rooted tree is the radial layout (yet to be implemented).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"md`The rectangleLayout() function is a wrapper of get_vertical() and get_horizontal(), as I thought it was easier to think about drawing a phylogeny in this way.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2260,"value":"get_vertical(readTree(treestring))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2280,"value":"get_horizontal(readTree(treestring))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"function rectangleLayout(node){\n var data = {}\n \n data.horizontal_lines = get_horizontal(node)\n data.vertical_lines = get_vertical(node)\n \n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"function get_vertical(node){\n var data = get_horizontal(node)\n \n // for the current iteration of the loop find the matching parentId\n // then take the difference\n function find_pairs(current_node){\n for(var i=0; i < data.length; i++){\n if(data[i].parentId === current_node.parentId){\n var height = Math.abs(data[i].y0 - current_node.y0)\n }\n }\n return height\n }\n \n var verticals = []\n // find root\n var root = data.map(d => d.parentId === null ? d.thisId:null).filter(d => d != null)[0]\n \n for(var i=0; i < data.length; i++){\n if(data[i].thisId !== root){\n \n verticals.push({\n 'thisId': data[i].thisId,\n 'x0': data[i].x0,\n 'x1': data[i].x0, // x values remain constant\n 'y0': data[i].y0,\n 'y1': data[i].y0 + find_pairs(data[i]),\n 'heights': find_pairs(data[i])\n })\n\n }\n }\n\n \n return verticals\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"md`The radialLayout() function...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1617,"value":"radialLayout(readTree(treestring))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1790,"value":"{var test = d3.create(\"svg\")\n .attr(\"width\", 300)\n .attr(\"height\", 300)\n\n// which one is right? match the negative or match the positive?\n//-3.07329716112045, 3.141592653589793\n// -0.3809338619903472, 3.013538605209775\ntest.append(\"g\")\n .selectAll(\"lines\")\n .data([1])\n .join(\"path\")\n .attr(\"d\", d => describeArc(150, 150, 100, -0.3809338619903472, 3.013538605209775))\n .attr('fill-opacity', '0')\n .attr(\"class\", \"path\")\n .attr(\"stroke\", \"#777\")\n \nreturn test.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1688,"value":"function polarToCartesian(centerX, centerY, radius, angleInRadians) {\n return {\n x: centerX + (radius * Math.cos(angleInRadians)),\n y: centerY + (radius * Math.sin(angleInRadians))\n };\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"function describeArc(x, y, radius, startAngle, endAngle){\n\n var start = polarToCartesian(x, y, radius, startAngle);\n var end = polarToCartesian(x, y, radius, endAngle);\n\n // refers to middle zero below... but no large arcs needed?\n // var largeArcFlag = endAngle - startAngle <= Math.PI ? \"0\" : \"1\";\n\n var d = [\n \"M\", start.x, start.y, \n \"A\", radius, radius, 0, 0, 0, end.x, end.y\n ].join(\" \");\n\n return d; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"function radialLayout(node){\n var data = {}\n \n data.radii = get_radii(node)\n data.data = radial_data(node)\n data.arcs = get_arcs(data.data)\n \n return data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1429,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2033,"value":"Math.sign(100) === -1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1950,"value":"// thanks https://codereview.stackexchange.com/questions/187510/angle-reflection-function\nfunction reflectAngle(rad, dir) {\n const c = Math.cos(rad), s = Math.sin(rad);\n const PI_sub = \"3.1415\"\n \n function check_sign(x){\n if(x.toString().includes(PI_sub)){\n x = Math.abs(x);\n }\n return x\n }\n \n return check_sign(Math.atan2(...(dir === \"X\" ? [s, -c] : [-s, c])));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"function get_radii(node){\n var data = radial_data(node)\n \n // for the current iteration of the loop find the matching parentId\n function get_radius(current_node){\n for(var i=0; i < data.length; i++){\n if(data[i].thisId === current_node.parentId){\n var radius = data[i].r\n }\n }\n return radius\n }\n \n var arcs = []\n // find root\n var root = data.map(d => d.parentId === null ? d.thisId:null).filter(d => d != null)[0]\n \n for(var i=0; i < data.length; i++){\n if(data[i].thisId !== root){\n \n arcs.push({\n 'thisId': data[i].thisId,\n 'x0': data[i].x,\n // radius of the parent * cos(angle)\n 'x1': get_radius(data[i])*Math.cos(data[i].angle),\n 'y0': data[i].y,\n // radius of the parent * sin(angle)\n 'y1': get_radius(data[i])*Math.sin(data[i].angle),\n 'isTip': data[i].isTip\n })\n\n }\n }\n\n \n return arcs\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"md`The equal angle layout is a algorithm which produces an unrooted tree.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"unrooted = function(node){\n var data = {}\n \n // use the Felsenstein equal angle layout algorithm\n var eq = fortify(equalAngleLayout(node))\n data.tree_df = eq\n // make the edges dataset\n data.edges = edges(eq)\n \n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"md`### Core helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`The functions below are helper functions which turn a newick string into eventually an array of objects, which represents the tree as a graph.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"/**\n * Count the number of tips that descend from this node\n * @param {object} thisnode\n */\nfunction numTips(thisnode) {\n var result = 0;\n for (const node of levelorder(thisnode)) {\n if (node.children.length == 0) result++;\n }\n return(result);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"/**\n * Recursive function for breadth-first search of a tree\n * the root node is visited first.\n * @param {object} node\n * @param {Array} list An Array of nodes\n * @return An Array of nodes in pre-order\n */\n\nfunction levelorder(root) {\n // aka breadth-first search\n var queue = [root],\n result = [],\n curnode;\n\n while (queue.length > 0) {\n curnode = queue.pop();\n result.push(curnode);\n for (const child of curnode.children) {\n queue.push(child);\n }\n }\n return(result);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"/**\n * Recursive function for post-order traversal of tree\n * the root node is visited last.\n * @param {object} node\n * @param {Array} list An Array of nodes\n * @return An Array of nodes in pre-order\n */\n\nfunction postorder(node, list=[]) {\n for (var i=0; i < node.children.length; i++) {\n list = postorder(node.children[i], list);\n }\n list.push(node);\n return(list);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"/**\n * Recursive function for pre-order traversal of tree\n * (output parent before children).\n * @param {object} node\n * @param {Array} list An Array of nodes\n * @return An Array of nodes in pre-order\n */\n\nfunction preorder(node, list=[]) {\n list.push(node);\n for (var i=0; i < node.children.length; i++) {\n list = preorder(node.children[i], list);\n }\n return(list);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"d3@5\", \"d3-path@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1800,"value":"md`## Credits`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1804,"value":"md`This is built upon material available at https://github.com/ArtPoon/slides, released under a Creative Commons BY-SA license. Thanks Art!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 32:"$31:body"