30:T450,{ var svgDims = [600,600] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:${colors[3]};border:1px solid black`) var label = svg.append("text") .text(``) .attr("x",300) .attr("y",300) .attr("text-anchor","middle") var overlay = svg.append("circle") .attr("r",descendants[0].r) .attr("stroke","black") .attr("cx",300) .attr("cy",300) .on("click",function(){ var target = d3.select(this) target.lower() label.lower() }) //circles for(let i = 0;i < descendants.length; i++){ svg.append("circle") .attr("r",descendants[i].r) .attr("cx",descendants[i].x) .attr("cy",descendants[i].y) .attr("stroke","black") .attr("fill",colors[2-descendants[i].depth]) .on("click",function(){ var target = d3.select(this) var fill = target.attr("fill") overlay.raise() overlay.attr("fill",fill) label.raise() label.text(descendants[i].id) }) } return svg.node() }31:[] 2e:{"title":"May 1","cells":[{"id":0,"value":"html`

May 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`

Some Practice with Events and Transitions

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",`background:white;border:1px solid black`)\n\n var text = svg.append(\"text\")\n .text(``)\n .attr(\"x\",300)\n .attr(\"y\",50)\n .attr(\"text-anchor\",\"middle\")\n .attr(\"font-size\",40)\n \n var drag = d3.drag()\n .on(\"drag\",function(){\n var x = d3.event.x\n var target = d3.select(this)\n target.attr(\"width\",x)\n text.text(`${d3.format(\".0f\")(x)}`)\n })\n .on(\"end\",function(){\n var target = d3.select(this)\n target.transition().duration(1000).ease(d3.easeBounceOut).attr(\"width\",50)\n text.text(``)\n })\n\n\n \n svg.append(\"rect\")\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"x\",0)\n .attr(\"y\",125)\n .attr(\"fill\",\"gold\")\n .attr(\"stroke\",\"black\")\n .call(drag)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"html`

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",`background:white;border:1px solid black`)\n \n for(var i = 0; i < 1000; i++){\n var circle = svg.append(\"circle\")\n .attr(\"r\",Math.random()*20)\n .attr(\"cx\",0)\n .attr(\"cy\",0)\n .attr(\"fill\",\"lightcyan\")\n .attr(\"stroke\",\"black\")\n \n circle.transition().duration(Math.random()*1000).delay(Math.random()*2000).attr(\"cx\",Math.random()*600).attr(\"cy\",Math.random()*300)\n }\n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"html`

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",`background:white;border:1px solid black`)\n\n svg.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"cx\",250)\n .attr(\"cy\",150)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n .on(\"click\",function(){\n var target = d3.select(this)\n target.raise()\n })\n .on(\"mouseout\",function(){\n var target = d3.select(this)\n target.lower()\n })\n \n svg.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"cx\",350)\n .attr(\"cy\",150)\n .attr(\"fill\",\"tomato\")\n .attr(\"stroke\",\"black\")\n .on(\"click\",function(){\n var target = d3.select(this)\n target.raise()\n })\n .on(\"mouseout\",function(){\n var target = d3.select(this)\n target.lower()\n })\n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"html`

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"data = [\n {name:\"US\",parent:\"\"},\n {name:\"NY\",parent:\"US\"},\n {name:\"PA\",parent:\"US\"},\n {name:\"Albany\",parent:\"NY\"},\n {name:\"Buffalo\",parent:\"NY\"},\n {name:\"Rochester\",parent:\"NY\"},\n {name:\"Erie\",parent:\"PA\"},\n {name:\"Philadelphia\",parent:\"PA\"},\n {name:\"Pittsburgh\",parent:\"PA\"}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"root = d3.stratify().id(d => d.name).parentId(d => d.parent)(data).sum(d => 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"descendants = d3.pack().size([600,600])(root).descendants()","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"colors = [\"#eff3ff\",\"#bdd7e7\",\"#6baed6\",\"#2171b5\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}