2e:null 2f:["$","title",null,{"children":"Data Viz Final Problem 1 | Brentyn Muir | Observable"}] 34: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() }35: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)} }36:[] 32:{"id":"4f80e26b8ef74b2e","slug":"data-viz-final-problem-1","title":"\nData Viz Final Problem 1\n","thumbnail":"e2f6151c40f0bb000ec4a1c2ecbe86a5d8b4c30b973e741e64121ed2aef1e7bf","access_level":"public","create_time":"$D2020-05-06T03:37:43.131Z","update_time":"$D2020-05-10T01:27:51.032Z","view_time":null,"first_public_time":"$D2020-05-06T06:53:06.191Z","has_unpublished_edits":null,"fork":{"id":"61cdb942b6b78d31","slug":"starter-template-for-data-vizualization-and-communicatio/3","title":"\nStarter Template for Data Vizualization and Communications\n","owner":{"id":"a92d27483baaceb6","login":"brentynm","name":"Brentyn Muir"}},"stars":1,"starred":false,"owner":{"type":"team","id":"a92d27483baaceb6","login":"brentynm","name":"Brentyn Muir","avatar_url":"https://avatars-next.observableusercontent.com/7a1aa64531f0f1408bc1acfca3fb5f92414250ca342b923828dca72c9819e555","tier":"starter_2024"},"version":1081,"publish_version":1081,"role":null,"authored":false,"authors":[{"type":"individual","id":"d1b03517bd1af21b","login":"brentynm","name":"Brentyn Muir","avatar_url":"https://avatars-next.observableusercontent.com/7a1aa64531f0f1408bc1acfca3fb5f92414250ca342b923828dca72c9819e555","tier":null}],"members":[{"type":"individual","id":"d1b03517bd1af21b","login":"brentynm","name":"Brentyn Muir","avatar_url":"https://avatars-next.observableusercontent.com/7a1aa64531f0f1408bc1acfca3fb5f92414250ca342b923828dca72c9819e555","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"md`\n## B Part\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"viewof s = slider({min:10,max:100,title:\"Width\",step:1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"viewof t = slider({min:10,max:100,title:\"Height\",step:1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"md`\n## B+ Part\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"md`\n## Formatting\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"root = d3.stratify().id(d =>d.name).parentId(d => d.parent)(treeData).sum(d => 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"descendants = d3.tree().nodeSize([s,t])(root).descendants()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"nodeLinks = d3.tree().nodeSize([s,t])(root).links()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"md`\n## Datasets\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"