31:[] 2f:{"title":"Interactivity (Template)","cells":[{"id":0,"value":"md`\n# Interactivity (Template)\n\nThis is a template for live coding. See the [main notebook](https://beta.observablehq.com/@sjengle/interactivity) for the full example.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`\n\n## Data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"import {letters} from \"@sjengle/english-alphabet-dataset\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"letters","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"letters[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"types = d3.set(letters, d => d.type);","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"md`## Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"viewof height = slider({\n min: 10,\n max: width,\n step: 1,\n value: 400,\n title: \"height\",\n description: \"height of svg\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof r = slider({\n min: 1,\n max: 100,\n step: 1,\n value: 15,\n title: \"r\",\n description: \"radius of circles\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"x = {\n return d3.scaleLinear()\n .domain(d3.extent(letters, d => d.frequency))\n .range([2 * r, width - 2 * r]) // pad by circle radius\n .nice();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"y = { \n return d3.scaleLinear()\n .domain(d3.extent(letters, d => d.points))\n .range([height - 2 * r, 2 * r]) // pad by circle radius\n .nice();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"color = {\n return d3.scaleOrdinal(d3.schemeSet2).domain(types.values());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"swatches({\n color: color\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`\n## Visualization\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"vis = {\n const svg = d3.select(DOM.svg(width, height)); \n svg.style(\"border\", \"1px solid #bbbbbb\"); \n \n const g = svg.append(\"g\").attr(\"id\", \"circles\");\n \n g.selectAll(\"circle\")\n .data(letters)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => x(d.frequency))\n .attr(\"cy\", d => y(d.points))\n .attr(\"r\", r)\n .style(\"fill\", d => color(d.type));\n \n svg.append(\"g\").attr(\"id\", \"annotation\");\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`\n## Interactivity\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"highlight = {\n const svg = d3.select(vis);\n const status = html`highlight: none`;\n \n // TODO\n \n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"hover1 = {\n const svg = d3.select(vis);\n const status = html`hover: none`;\n\n // TODO\n \n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"hover2 = {\n const svg = d3.select(vis);\n const status = html`hover: none`;\n\n // TODO\n \n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"brush1 = {\n const svg = d3.select(vis);\n const status = html`brush: none`;\n \n // TODO\n \n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"brush2 = {\n const svg = d3.select(vis);\n const status = html`brush: none`;\n \n // TODO\n \n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"drag = {\n const svg = d3.select(vis);\n const status = html`drag: none`;\n \n // TODO\n \n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"circles = d3.select(vis).select(\"g#circles\").selectAll(\"circle\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"annotations = d3.select(vis).select(\"g#annotation\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`Below defines the CSS styles for this notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}