2b:null 2c:["$","title",null,{"children":"Interaction | 3sam3 | Observable"}] 31:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1596009212520.777,"size":48822}] 2f:{"id":"09c533f03601f5e9","slug":"interaction","title":"Interaction","thumbnail":"99d9db96fb31cc68a171e80b5f59b09c772c7a0f2f35e4785da1d3fd25b66940","access_level":"public","create_time":"$D2020-07-29T07:52:28.020Z","update_time":"$D2021-04-22T09:18:33.466Z","view_time":null,"first_public_time":"$D2020-08-02T08:01:36.187Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":"starter_2024"},"version":180,"publish_version":180,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc3b848d8db8ae07","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":null}],"members":[{"type":"individual","id":"fc3b848d8db8ae07","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"8d988b71e2e99afd","slug":"d3","title":"D3","owner":{"id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3"}},"type":"notebook","body":{"title":"Interaction","cells":[{"id":0,"value":"md`# Interaction\n\n all these codes are from here\n\n https://observablehq.com/@d3/learn-d3-interaction?collection=@d3/learn-d3\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"{\n const svg = d3.create('svg').attr('viewBox', [0, 0, width, height])\n svg.append('path')\n .attr('d', line(data))\n .attr('fill', 'none')\n .attr('stroke', 'steelblue')\n .attr('stroke-width', '1.5')\n \n const g = svg.append('g')\n .attr('fill', 'none')\n .attr('pointer-events', 'all')\n .selectAll('rect')\n .data(data)\n .join('rect')\n .attr('x', d => x(d.date))\n .attr('height', height)\n .attr('width', x(data[1].date) - x(data[0].date))\n .append('title')\n .text(d => `${formatDate(d.date)}${formatClose(d.close)}`)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"voronoi = d3.Delaunay\n .from(data, d => x(d.date), d => y(d.close))\n .voronoi([0, 0, width, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"{\n const svg = d3.create('svg').attr('viewBox', [0, 0, width, height])\n svg.append('path')\n .attr('d', line(data))\n .attr('fill', 'none')\n .attr('stroke', 'steelblue')\n .attr('stroke-width', '1.5')\n \n const g = svg.append('g')\n .attr('fill', 'none')\n .attr('pointer-events', 'all')\n .attr('stroke', 'red')\n .attr('stroke-width', '0.5')\n .selectAll('path')\n .data(data)\n .join('path')\n .attr('d', (d, i) => voronoi.renderCell(i))\n .append('title')\n .text(d => `${formatDate(d.date)}${formatClose(d.close)}`)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"class Tooltip {\n constructor() {\n this._date = svg``;\n this._close = svg``;\n this.node = svg`\n \n \n ${this._date}\n ${this._close}\n \n `;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${x(d.date)},${y(d.close)})`);\n this._date.textContent = formatDate(d.date);\n this._close.textContent = formatClose(d.close);\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"{\n const tooltip = new Tooltip();\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"d\", line(data));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"pointer-events\", \"all\")\n .selectAll(\"rect\")\n .data(d3.pairs(data))\n .join(\"rect\")\n .attr(\"x\", ([a, b]) => x(a.date))\n .attr(\"height\", height)\n .attr(\"width\", ([a, b]) => x(b.date) - x(a.date))\n .on(\"mouseover\", ([a]) => tooltip.show(a))\n .on(\"mouseout\", () => tooltip.hide());\n\n svg.append(() => tooltip.node);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"bisect = {\n const bisectDate = d3.bisector(d => d.date).left;\n return (data, date) => {\n const i = bisectDate(data, date, 1);\n const a = data[i - 1], b = data[i];\n return date - a.date > b.date - date ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"viewof number = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"number","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"viewof name = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"viewof fruit = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"fruit","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"viewof hover = {\n \n return Object.assign(html``, {\n value: null,\n onmousemove: event => {\n event.currentTarget.value = bisect(data, x.invert(event.offsetX));\n event.currentTarget.dispatchEvent(new CustomEvent(\"input\"));\n }, \n onmouseleave: event => {\n event.currentTarget.value = null;\n event.currentTarget.dispatchEvent(new CustomEvent(\"input\"));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"viewof i = Scrubber(d3.range(100), {\n autoplay: false,\n loop: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"d3.pairs(data, (d, b) => {\n return [d, b];\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"formatDate = d3.utcFormat(\"%b %-d, ’%y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"formatClose = d3.format(\"$.2f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"height = 240","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.close))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"data = d3.csvParse(await FileAttachment(\"aapl-bollinger.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"