31:T481,hover2 = { const svg = d3.select(vis); // used to test out interactivity in this cell const status = html`hover: none`; circles.on("mouseover.hover2", function(d) { let me = d3.select(this); let div = d3.select("body").append("div"); div.attr("id", "details"); div.attr("class", "tooltip"); let rows = div.append("table") .selectAll("tr") .data(Object.keys(d)) .enter() .append("tr"); rows.append("th").text(key => key); rows.append("td").text(key => d[key]); // show what we interacted with d3.select(status).text("hover: " + d.letter); }); circles.on("mousemove.hover2", function(d) { let div = d3.select("div#details"); // get height of tooltip let bbox = div.node().getBoundingClientRect(); div.style("left", d3.event.clientX + "px") div.style("top", (d3.event.clientY - bbox.height) + "px"); }); circles.on("mouseout.hover2", function(d) { d3.selectAll("div#details").remove(); d3.select(status).text("hover: none"); }); return status; }32:[] 2f:{"title":"Interactivity","cells":[{"id":0,"value":"md`\n# Interactivity\n\nThis notebook demonstrates some basic approaches for interactivity using D3.js. This includes various tooltip, hovering, and brushing strategies, but not zooming, panning, linked views, or sorting. \n\nSee other notebooks for more applied examples.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`\n\n## Data\n\nOur data will be a toy dataset on the English alphabet.\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":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"md`## Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`\nWe will now create the scales to be used by our visualization. They will be defined globally so that they can be reused throughout this notebook.\n`","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":426,"value":"md`#### Position scales`","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":417,"value":"md`#### Categorical color scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"swatches({\n color: color\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"types = d3.set(letters, d => d.type);","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":11,"value":"md`\n## Visualization\n\nNext we will create a basic visualization of this data without axis lines or labels. We just need something we can start interacting with.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"vis = {\n // wait until this cell is visible\n await visibility();\n \n const svg = d3.select(DOM.svg(width, height)); \n svg.style(\"border\", \"1px solid #bbbbbb\"); \n \n // data layer to keep circles\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 // annotation layer to keep labels on top of data\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\nNow we will demonstrate various methods of interaction; note that these might not all really make sense for this particular example. Users are also encouraged to drag the cell of interest next to the SVG to see the interaction update the status text.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`For all of these, we will use a pre-computed selections for performance.`","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":52,"value":"md`\n\n### Highlight\n\nThe following will add a red stroke to highlight a circle on mouse hover. This can help users figure out which visual element they are interacting with when there is overdraw.\n\n##### Resources\n[Handling Events](https://github.com/d3/d3-selection/blob/master/README.md#handling-events) \n[Mouse Events](https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"highlight = {\n const svg = d3.select(vis);\n \n // used to test out interactivity in this cell\n const status = html`highlight: none`;\n \n // event.namespace allows us to add multiple functions for one event\n // only needed in examples like this where some events trigger multiple functions\n circles.on(\"mouseover.highlight\", function(d) { \n d3.select(this)\n .raise() // bring to front\n .style(\"stroke\", \"red\")\n .style(\"stroke-width\", 2);\n \n // show what we interacted with\n d3.select(status).text(\"highlight: \" + d.letter);\n });\n\n circles.on(\"mouseout.highlight\", function(d) {\n d3.select(this).style(\"stroke\", null);\n d3.select(status).text(\"highlight: none\");\n });\n \n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`\n### Hover Text, Version 1\n\nThe following will add a text label below a circle on mouse hover. This is useful if you just need to show a label and no other information. It should *not* replace labeling or annotating elements when possible.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"hover1 = {\n const svg = d3.select(vis);\n \n // used to test out interactivity in this cell\n const status = html`hover: none`;\n\n circles.on(\"mouseover.hover1\", function(d) {\n let me = d3.select(this);\n \n annotations.insert(\"text\")\n .attr(\"id\", \"label\")\n .attr(\"x\", me.attr(\"cx\"))\n .attr(\"y\", me.attr(\"cy\"))\n .attr(\"dy\", r + 14)\n .attr(\"text-anchor\", \"middle\")\n .text(d.codeword);\n\n // show what we interacted with\n d3.select(status).text(\"hover: \" + d.letter);\n });\n\n circles.on(\"mouseout.hover1\", function(d) {\n annotations.select(\"text#label\").remove();\n d3.select(status).text(\"hover: none\");\n });\n \n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`\n### Hover Text, Version 2\n\nThe following will show a detailed tooltip next to the mouse pointer when hovered over a circle. This is useful if you need to provide a lot of context for an element. Since we are using a div, any HTML can be inserted into the tooltip... including other visualizations!\n\n##### Resources\n\n[Absolute-Positioned Tooltip](https://bl.ocks.org/mbostock/1087001) \n[CSS Position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`\n### Brushing, Version 1\n\nThe following will make circles belonging to other classes grey on mouse hover.\n\n##### Resources\n[fill-opacity](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"brush1 = {\n const svg = d3.select(vis);\n \n // used to test out interactivity in this cell\n const status = html`brush: none`;\n \n circles.on(\"mouseover.brush1\", function(d) {\n circles.filter(e => (d.type !== e.type)).transition().style(\"fill\", \"#bbbbbb\");\n \n // show what we interacted with\n d3.select(status).text(\"brush: \" + d.type);\n });\n \n circles.on(\"mouseout.brush1\", function(d) {\n circles.transition().style(\"fill\", d => color(d.type));\n d3.select(status).text(\"brush: none\");\n });\n \n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`\n### Brushing, Version 2\n\nThe following will allow users to draw a rectangle around circles to highlight. The CSS styles defined in the appendix are relevant for this example.\n\n##### Resources\n[d3-brush](https://github.com/d3/d3-brush) \n[selection.classed()](https://github.com/d3/d3-selection#selection_classed) \n[Scatterplot Matrix Brushing](https://bl.ocks.org/mbostock/4063663) (for d3v3) \n[Scatterplot Brushing](https://beta.observablehq.com/@d3/d3-brushable-scatterplot) (for d3v5)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"brush2 = {\n const svg = d3.select(vis);\n \n // used to test out interactivity in this cell\n const status = html`brush: none`;\n \n let brush = d3.brush()\n .on(\"start.brush2 brush.brush2 end.brush2\", brushed);\n \n function brushed() {\n if (d3.event.selection) {\n const [[x0, y0], [x1, y1]] = d3.event.selection;\n \n // show what we interacted with\n d3.select(status).text(\"brush: \" + d3.event.selection);\n \n circles.classed(\"dim\", function(d) {\n let cx = +d3.select(this).attr(\"cx\");\n let cy = +d3.select(this).attr(\"cy\");\n return !(x0 <= cx && cx < x1 &&\n y0 <= cy && cy < y1);\n });\n }\n else {\n d3.select(status).text(\"brush: none\");\n circles.classed(\"dim\", false);\n }\n }\n \n // place brush BEHIND points so we still get pointer events\n svg.insert(\"g\", \":first-child\").attr(\"class\", \"brush\").call(brush);\n \n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`\n### Dragging\n\nThe following will enable users to click and drag circles to new locations. \n\n*Note:* This does not make sense for a scatterplot, as changing the position breaks the data encoding. We should also update the text label and tooltip positions, which is left out here for simplicity.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"drag = {\n const svg = d3.select(vis);\n \n // used to test out interactivity in this cell\n const status = html`drag: none`;\n \n let drag = d3.drag();\n \n drag.on(\"start.drag\", function(d) {\n d3.select(this).raise(); // places circle above others\n \n // show what we interacted with\n d3.select(status).text(\"drag: \" + d.letter);\n });\n \n drag.on(\"drag.drag\", function(d) {\n d3.select(this)\n .attr(\"cx\", d3.event.x)\n .attr(\"cy\", d3.event.y);\n });\n \n drag.on(\"end.drag\", function(d) {\n d3.select(status).text(\"drag: none\");\n });\n \n circles.call(drag);\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":403,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`Below defines the CSS styles for this notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}