25:["$","title",null,{"children":"D3 Interaction (solutions) | Chris North | Observable"}] 49:T78f,// From D3 Visualization notes... //// = new stuff chart = { //console.log("ran it"); // Define and select the SVG let svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("border", "0.1px solid lightgrey"); //// Define details-on-demand tag let text = svg .append("text") .attr("x", 10) .attr("y", 20) .style("font", "12px Arial") .html("Select a bar"); let bars = svg // MARKS: maps data rows to rects .selectAll("rect") .data(data) .join("rect") // creates new rects for each data row // CHANNELS: maps data columns to rect attributes .attr("x", (r) => xScale(r.Abbrev)) .attr("width", xScale.bandwidth() - 1) .attr("y", (r) => yScale(r.PercentCollegeGrad)) .attr("height", (r) => yScale(0) - yScale(r.PercentCollegeGrad)) .style("fill", "steelblue") ////; ////.style('fill', r => (r.PercentCollegeGrad >= filter ? 'steelblue' : 'lightgrey')) // Poor performance, using 'filter' here causes cell re-execution when filter changes //// Interaction events .on("mouseover", (event, r) => { bg = d3.select(event.target).style("fill"); // save the current color of the rect for mouseout d3.select(event.target).style("fill", "orange"); // Modify SVG DOM text.html(r.Name + " " + r.PercentCollegeGrad); text.attr("x", xScale(r.Abbrev)); //.attr("y", yScale(r.PercentCollegeGrad)); mutable hover = r; // Export hover selection }) .on("mouseout", (event, r) => { d3.select(event.target).style("fill", bg); }); let bg = null; //// Drag or Brush interactions: //setupDrag(svg, bars); //setupBrush(svg, bars); //// Interactive updates from other widgets svg.node().filterBy = function (filterMin) { bars.style("fill", (r) => r.PercentCollegeGrad >= filterMin ? "steelblue" : "lightgrey" ); }; //Good performance return svg.node(); }4a:[{"id":"15ea0fcea2d8534d17dc5bb9551a35d8b1755a3ac631092d2a2cecc4a1864c1036c346e0da3627df35e4745f168b0b781686c43be1a1bb17323f498ab67bba65","href":"https://static.observableusercontent.com/files/15ea0fcea2d8534d17dc5bb9551a35d8b1755a3ac631092d2a2cecc4a1864c1036c346e0da3627df35e4745f168b0b781686c43be1a1bb17323f498ab67bba65","name":"States2010.csv","type":"text/csv","lastModified":1601351134168.911,"size":3002}] 29:{"id":"fadbe2e8a19e60f2","slug":null,"title":"D3 Interaction (solutions)","thumbnail":"628fb56bbacf0641db66eada538f0ff670c80c4ccd42c695c15b4faa4d8e36d3","access_level":"public","create_time":"$D2020-09-29T03:11:03.572Z","update_time":"$D2023-10-09T18:59:16.312Z","view_time":null,"first_public_time":"$D2022-10-13T01:47:39.165Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"944d12de66c65f0a","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":"starter_2024","bio":"Department of Computer Science, Virginia Tech","followed_by_you":false,"follows_you":false},"version":569,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bd52d2c49b80248","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":null,"bio":"Department of Computer Science, Virginia Tech","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"2bd52d2c49b80248","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":26,"collection":{"id":"9aa1bc9d4b544fec","slug":"vt-cs-5764","title":"VT CS 5764 Lecture Notes","owner":{"id":"944d12de66c65f0a","login":"chrislnorth","name":"Chris North"}},"type":"notebook","body":{"titling":"auto","title":"D3 Interaction (solutions)","cells":[{"id":0,"value":"# D3 Interaction (solutions)\nVirginia Tech, CS 5764 InfoVis, Lecture Notes by Dr. Chris North\n\nCovers topics from Murray, \"[Interactive Data Visualization for the Web](https://www.oreilly.com/library/view/interactive-data-visualization/9781491921296/)\", Chapters 10, 12.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"### Topics\n* How user input events are processed in HTML\n* How to register and handle event listeners in D3\n* How to use D3 Brush and Drag interactions\n* How to use \"reactive\" interaction in Observable\n* How to use HTML input widgets with visualizations\n* How to consider interaction performance in D3 and Observable\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## HTML5 user input event processing\n1. [Programmer] Register event listener on DOM elements\n1. [Browser] Hit testing to find the DOM element clicked on\n1. [Browser] Invoke event listener for the hit DOM element\n1. [Programmer] Update DOM to provide visual feedback\n1. [Browser] Re-render updated DOM\n\nAdd `onclick` events this HTML code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"## Interaction Events in D3\n\n1. Register callback function\n * D3 event listener API: https://github.com/d3/d3-selection/blob/v2.0.0/README.md#handling-events\n\n3. Modify the DOM in the callback\n * Useful list of color names: https://codepen.io/bagaski/full/RwKvybw\n\nExamples: https://observablehq.com/@d3/learn-d3-interaction?collection=@d3/learn-d3\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"data = await FileAttachment(\"States2010.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"yScale = d3.scaleLinear().domain([0, 50]).range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"xScale = d3\n .scaleBand()\n .domain(data.map((d) => d.Abbrev))\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"## Event output\nExport interaction results to other cells. Two possible methods:\n\n* Export to a **mutable** variable: https://observablehq.com/@mbostock/mutable-values\n* Export using **viewof**: https://observablehq.com/@observablehq/introduction-to-views\n\nThen, any cell that references the mutable or viewof will automatically update via Observable's reactive framework.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"// mutable = can be modified by other cells\nmutable hover = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"You selected ${hover.Name} which has ${hover.PercentCollegeGrad} % college graduates","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":564,"value":"*skip to Track the Mouse Position...*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"## D3 Brush API\nDraws a \"brush\" as a rectangle: https://github.com/d3/d3-brush\n\nNote that we can operate on the 'rects', which is a D3 selection of DOM elements.\n\nCan use this to implement methods such as Brushing-and-linking across multiple visualizations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"function setupBrush(svg, rects) {\n // D3 Brush API\n const brush = d3.brush().on(\"start brush end\", brushing);\n //.extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])\n svg.append(\"g\").call(brush); // Create brush and regiser events\n\n // Brush event callback function\n function brushing(event) {\n if (event.selection) {\n //console.log(event.selection);\n const [[left, top], [right, bottom]] = event.selection; // The brush pixel coordinates\n \n //// do brush stuff here...\n rects.style(\"fill\", (r) =>\n pointInRect(\n [xScale(r.Abbrev), yScale(r.PercentCollegeGrad)],\n event.selection\n )\n ? \"gold\"\n : \"steelblue\"\n );\n mutable brushed = data.filter((r) =>\n pointInRect(\n [xScale(r.Abbrev), yScale(r.PercentCollegeGrad)],\n event.selection\n )\n );\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"mutable brushed = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"function pointInRect(p, r) { // p=[x,y], r=[[l,t],[r,b]]\n const [x, y] = p;\n const [[left, top], [right, bottom]] = r;\n return left <= x && x <= right && top <= y && y <= bottom;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"## D3 Drag API\nEnables dragging elements in a visualization\nhttps://github.com/d3/d3-drag\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"function setupDrag(svg, rects) {\n // D3 Drag API\n const drag = d3.drag().on(\"start drag end\", dragging);\n rects.call(drag); // register drag events on all rects\n\n // Drag event callback function\n function dragging(event, d) {\n //// do drag stuff here... 'this' is the dragged element\n d3.select(this).attr(\"x\", event.x).attr(\"y\", event.y);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"## HTML Input Widgets\n\nUse widgets to control the visualization, such as Dynamic Query filters.\n\n1. Create 'viewof' html widget\n * https://observablehq.com/@observablehq/introduction-to-views\n2. Link widget value to call updates on the visualization\n * IMPORTANT, be careful about performance implications:\n * Do not reference the widget value in the visualization cell. This would reactively re-execute the visualization cell and rebuild the entire visualization from scratch during each interactive update. This is **slow**.\n * Instead, update existing visualization DOM using D3 selections (e.g. 'rects')\n\nExamples: https://observablehq.com/@observablehq/interactivity-in-observable\n\n**Filter states by a user-defined minimum value of PercentCollegeGrad:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"// Create the widget\nviewof filter = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"// reference the widget value\nfilter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"// update the visualization\nchart.filterBy(filter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"## Tracking the mouse position in the chart\nThis example demonstrates:\n* Add interaction events to the SVG, instead of marks.\n* Interaction events report the mouse x,y position\n * mouse pixel location: event.offsetX and event.offsetY\n * d3.pointer(event, event.currentTarget) is useful if the SVG is scaled.\n* **scale.invert()** translates pixel coordinates back to data coordinates.\n\nOther examples: https://observablehq.com/@giorgiofighera/histogram-with-tooltips-and-bars-highlighted-on-mouse-over","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"scale = d3\n .scaleLinear()\n .domain([0, 1000000])\n .range([50, 600 - 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"// Data => Pixel\nscale(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"// Pixel => Data\nscale.invert(50)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"//// = new\n{\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", 600) // best to use fixed pixel size to avoid scaling\n .attr(\"height\", 100)\n //.attr(\"viewBox\", [0, 0, 600, 100]) // scales the SVG, causes offsetX to be scaled\n .style(\"border\", \"0.1px solid lightgrey\") // offsetX off by border width?\n \n //// Add mouse events here\n .on(\"mousemove\", (event) => {\n mutable mouseEvent = event;\n mutable xyPixel = d3.pointer(event, event.currentTarget); // useful when SVG is scaled\n mutable xPixel = event.offsetX; // pixel offset within SVG\n //event.x,event.screenX,event.clientX,event.movementX,event.offsetX,event.pageX,event.layerX\n mutable xData = scale.invert(event.offsetX);\n });\n\n drawAxis(svg, scale, \"bottom\", 50);\n\n let rect = svg\n .append(\"rect\")\n .attr(\"x\", scale(100000))\n .attr(\"width\", scale(200000) - scale(100000))\n .attr(\"y\", 10)\n .attr(\"height\", 40)\n .attr(\"fill\", \"steelblue\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"mutable mouseEvent = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"mutable xPixel = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"mutable xData = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"mutable xyPixel = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"import { drawAxis } from \"@chrislnorth/simple-axis-drawing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null