2c:null 2d:["$","title",null,{"children":"Interactivity (Template) | Sophie Engle | Observable"}] 32:[] 30:{"id":"40e6035ce52898ae","slug":"interactivity-template","title":"Interactivity (Template)","thumbnail":"f6221504ffb5c7c49ffec0a2e310f344867f5a0d66073c55faa05981bfabc1cd","access_level":"public","create_time":"$D2019-02-26T18:27:43.660Z","update_time":"$D2020-02-24T23:56:19.353Z","view_time":null,"first_public_time":"$D2019-02-26T18:32:37.786Z","has_unpublished_edits":null,"fork":{"id":"e3ffaaf4642627e2","slug":"interactivity","title":"Interactivity","owner":{"id":"5daeb3b295f61c60","login":"sjengle","name":"Sophie Engle"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5daeb3b295f61c60","login":"sjengle","name":"Sophie Engle","avatar_url":"https://avatars-next.observableusercontent.com/ba843dbbe22e6effd001e1baf75052c3b58b856ba20f2250b1152f6fc72c5648","tier":"starter_2024"},"version":413,"publish_version":413,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd2851261031ef7e","login":"sjengle","name":"Sophie Engle","avatar_url":"https://avatars-next.observableusercontent.com/ba843dbbe22e6effd001e1baf75052c3b58b856ba20f2250b1152f6fc72c5648","tier":null}],"members":[{"type":"individual","id":"cd2851261031ef7e","login":"sjengle","name":"Sophie Engle","avatar_url":"https://avatars-next.observableusercontent.com/ba843dbbe22e6effd001e1baf75052c3b58b856ba20f2250b1152f6fc72c5648","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"4975d67c95cf8aad","slug":"interactive-scatterplot","title":"Interactive Scatterplot","owner":{"id":"5daeb3b295f61c60","login":"sjengle","name":"Sophie Engle"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\n\n## Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"import {letters} from \"@sjengle/english-alphabet-dataset\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"letters","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"letters[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"types = d3.set(letters, d => d.type);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`## Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"color = {\n return d3.scaleOrdinal(d3.schemeSet2).domain(types.values());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"swatches({\n color: color\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`\n## Visualization\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`\n## Interactivity\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"circles = d3.select(vis).select(\"g#circles\").selectAll(\"circle\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"annotations = d3.select(vis).select(\"g#annotation\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`Below defines the CSS styles for this notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"