2d:null 2e:["$","title",null,{"children":"IGME-460 Week 6 Day 1: Interactivity | Arin R. Greenwood | Observable"}] 33:T8b0,x11colors = [ "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen" ]34:[] 31:{"id":"38c8beb3caaa1cf6","slug":"igme-460-week6-interactivity","title":"IGME-460 Week 6 Day 1: Interactivity","thumbnail":"a30543321746eabce674c374eb03c9a428be1fbe0d968c84a7884db502e4f888","access_level":"public","create_time":"$D2022-02-09T04:49:09.180Z","update_time":"$D2024-02-26T20:26:00.476Z","view_time":null,"first_public_time":"$D2024-02-21T21:04:07.610Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"fe509c97e5bd30c6","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":"starter_2024"},"version":270,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe3c2958bd86f26e","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":null}],"members":[{"type":"individual","id":"fe3c2958bd86f26e","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":null,"role":"editor"},{"type":"team","id":"fe509c97e5bd30c6","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"IGME-460 Week 6 Day 1: Interactivity","cells":[{"id":0,"value":"md`# IGME-460 Week 6 Day 1: Interactivity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"viewof color = Inputs.select(x11colors, { value: \"green\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"colors = ['green', 'orange', 'red', 'purple', 'blue']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"w = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"h = 250","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"dataset = [\n 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,\n 11, 12, 15, 20, 18, 17, 16, 18, 23, 25\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"xScale = d3\n .scaleBand()\n .domain(d3.range(dataset.length))\n .rangeRound([0, w])\n .paddingInner(0.05)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(dataset)])\n .range([0, h])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"cScale = d3.scaleLinear().domain(d3.extent(dataset)).range([\"red\", \"blue\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", w).attr(\"height\", h);\n\n //Create bars\n svg\n .selectAll(\"rect\")\n .data(dataset)\n .join(\"rect\")\n .attr(\"x\", (d, i) => xScale(i))\n .attr(\"y\", (d) => h - yScale(d))\n .attr(\"width\", xScale.bandwidth())\n .attr(\"height\", (d) => yScale(d))\n .attr(\"fill\", (d) => cScale(d))\n .on(\"click\", function (event, d) {\n //debugger;\n d3.select(this)\n //.remove();\n .transition()\n .duration(500)\n .ease(d3.easeBounce)\n .attr(\"y\", (d) => h - yScale(d) - 100)\n .transition()\n .attr(\"y\", (d) => h - yScale(d));\n })\n //.append(\"title\")\n //.text((d) => d);\n .call(attachTooltip);\n\n return html`\n

\n\t\t\t

Tooltip!

\n\t\t\t

100%

\n\t\t

\n ${svg.node()}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"styles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function attachTooltip(selection) {\n selection\n .on(\"mousemove\", function (event, d) {\n const [x, y] = d3.pointer(event);\n\n d3.select(\"#tooltip\").style(\"top\", `${y}px`).style(\"left\", `${x}px`);\n d3.select(\"#tooltip\").select(\"#value\").text(d);\n d3.select(\"#tooltip\").classed(\"hidden\", false);\n })\n .on(\"mouseout\", function (event, d) {\n d3.select(\"#tooltip\").classed(\"hidden\", true);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"