31:T534,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g") .attr("transform",`translate(300,50)`) //nodeLinks for(let i = 0; i < nodeLinks.length; i++){ var pathData = d3.linkVertical().x(d => d.x).y(d => d.y)(nodeLinks[i]) outer.append("path") .attr("stroke","black") .attr("fill","none") .attr("d",pathData) } //treeNodes for(let i = 0;i < descendants.length; i++){ outer.append("circle") .attr("r",15) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx", descendants[i].x) .attr("cy", descendants[i].y) .on("mouseover",function(){ var target = d3.select(this) target.attr("fill","tomato") text.attr("x",400) text.attr("y",50) text.attr("opacity",1) text.text(`${descendants[i].id}`) }) .on("mouseout",function(){ var target = d3.select(this) target.attr("fill","cornflowerblue") text.attr("opacity",0) }) var text = svg.append("text") .text("") .attr("opacity",0) } return svg.node() }32:Tb35,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g") .attr("transform",`translate(300,50)`) var pathLayer = svg.append("g") .attr("transform","translate(300,50)") //nodeLinks for(let i = 0; i < nodeLinks.length; i++){ outer.append("line") .attr("stroke","black") .attr("x1",nodeLinks[i].source.x) .attr("y1",nodeLinks[i].source.y) .attr("x2",nodeLinks[i].target.x) .attr("y2",nodeLinks[i].target.y) } //treeNodes for(let i = 0;i < descendants.length; i++){ outer.append("circle") .attr("r",15) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx", descendants[i].x) .attr("cy", descendants[i].y) } //circle var circle = pathLayer.append("circle") .attr("r",5) .attr("fill","tomato") .attr("stroke","black") .attr("cx",nodeLinks[0].source.x) .attr("cy",nodeLinks[0].source.y) yield svg.node() //if statements var choiceOne = Math.random() var choiceTwo = Math.random() var coordinatesAA = descendants[0].children[0] var coordinatesAB = descendants[0].children[1] var coordinatesAAA = descendants[1].children[0] var coordinatesAAB = descendants[1].children[1] var coordinatesABA = descendants[2].children[0] var coordinatesABB = descendants[2].children[1] var goAA = async (circle) => { await circle.transition().duration(1000).attr("cx",coordinatesAA.x).attr("cy",coordinatesAA.y).end() } var goAB = async (circle) => { await circle.transition().duration(1000).attr("cx",coordinatesAB.x).attr("cy",coordinatesAB.y).end() } var goAAA = async (circle) => { await circle.transition().duration(1000).attr("cx",coordinatesAAA.x).attr("cy",coordinatesAAA.y).end() } var goAAB = async (circle) => { await circle.transition().duration(1000).attr("cx",coordinatesAAB.x).attr("cy",coordinatesAAB.y).end() } var goABA = async (circle) => { await circle.transition().duration(1000).attr("cx",coordinatesABA.x).attr("cy",coordinatesABA.y).end() } var goABB = async (circle) => { await circle.transition().duration(1000).attr("cx",coordinatesABB.x).attr("cy",coordinatesABB.y).end() } if (choiceOne >= 0.5 && choiceTwo >= 0.5){await goAB(circle) await goABB(circle)} if (choiceOne >= 0.5 && choiceTwo < 0.5){await goAB(circle) await goABA(circle)} if (choiceOne < 0.5 && choiceTwo >= 0.5){await goAA(circle) await goAAB(circle)} if (choiceOne < 0.5 && choiceTwo < 0.5){await goAA(circle) await goAAA(circle)} }33:[] 2f:{"title":"\nData Viz Final Problem 1\n","cells":[{"id":0,"value":"html`\n\n

\nData Viz Final Problem 1\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"md`\n## B Part\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"viewof s = slider({min:10,max:100,title:\"Width\",step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"viewof t = slider({min:10,max:100,title:\"Height\",step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"md`\n## B+ Part\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":968,"value":"md`\n## Formatting\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"root = d3.stratify().id(d =>d.name).parentId(d => d.parent)(treeData).sum(d => 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"descendants = d3.tree().nodeSize([s,t])(root).descendants()","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"nodeLinks = d3.tree().nodeSize([s,t])(root).links()","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"md`\n## Datasets\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"treeData = [{name:\"A\",parent:\"\"},{name:\"AA\",parent:\"A\"},{name:\"AB\",parent:\"A\"},{name:\"AAA\",parent:\"AA\"},{name:\"AAB\",parent:\"AA\"},{name:\"ABA\",parent:\"AB\"},{name:\"ABB\",parent:\"AB\"}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}