2b:null 2c:["$","title",null,{"children":"D3 Interaction (notes) | Huimin Han | Observable"}] 31:T708,// From D3 Visualization notes... //// = new stuff chart = { // Define and select the SVG let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("border", "1px solid black"); //// Define details-on-demand tag here let text = svg .append("text") .attr("x", 10) .attr("y", 20) .style("font", "12px Arial") .html("Mouseover a bar!"); let rects = 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" // ) //can change the filter to a parameter to see whether it meets the filter, but this is too slow, create rects everytime... //// Interaction events for each rect .on("mouseover", (event, r) => { d3.select(event.target).style("fill", "darkorange"); text.html(r.Name + " " + r.PercentCollegeGrad); //the text here is the one we defined early in the "Define details-on-demand tag here" mutable hover = r; }) .on("mouseout", (event, r) => { d3.select(event.target).style("fill", "steelblue"); }); //// Drag or Brush interactions: setupDrag(svg, rects); // setupBrush(svg, rects); //// Interactive updates from other widgets svg.node().filterBy = function (filterMin) { rects.style("fill", (r) => r.PercentCollegeGrad >= filterMin ? "steelblue" : "lightgrey" ); }; return svg.node(); }32:T40e,function setupBrush(svg, rects) { // D3 Brush API const brush = d3.brush().on("start brush end", brushing); //.extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]]) svg.append("g").call(brush); // Create brush and regiser events // Brush event callback function function brushing(event) { if (event.selection) { //console.log(event.selection); const [[left, top], [right, bottom]] = event.selection; // The brush pixel coordinates, the left top right bottom of the brush box //// do brush stuff here... // logic here: select bars for which the top of the bar is in the brush box rects.style("fill", (r) => pointInRect( [xScale(r.Abbrev), yScale(r.PercentCollegeGrad)], event.selection ) ? "darkorange" : "steelblue" ); mutable brush = data.filter((r) => pointInRect( [xScale(r.Abbrev), yScale(r.PercentCollegeGrad)], event.selection ) ); } } }33:[{"id":"15ea0fcea2d8534d17dc5bb9551a35d8b1755a3ac631092d2a2cecc4a1864c1036c346e0da3627df35e4745f168b0b781686c43be1a1bb17323f498ab67bba65","href":"https://static.observableusercontent.com/files/15ea0fcea2d8534d17dc5bb9551a35d8b1755a3ac631092d2a2cecc4a1864c1036c346e0da3627df35e4745f168b0b781686c43be1a1bb17323f498ab67bba65","name":"States2010.csv","type":"text/csv","lastModified":1665599972658.354,"size":3002}] 2f:{"id":"ab333c0f3af24e50","slug":null,"title":"D3 Interaction (notes)","thumbnail":"3058a538095a387c6d9deda15d911708d6094707aac2d0c5c0c1576bd170362b","access_level":"public","create_time":"$D2022-10-12T18:39:32.658Z","update_time":"$D2022-10-12T19:46:40.779Z","view_time":null,"first_public_time":"$D2022-10-17T18:34:31.433Z","fork":{"id":"99785376e2e171f7","slug":null,"title":"D3 Interaction","owner":{"id":"944d12de66c65f0a","login":"chrislnorth","name":"Chris North"}},"stars":0,"starred":false,"owner":{"type":"team","id":"390adb84a297e322","login":"b3c1d31e147bc5d4","name":"Huimin Han","avatar_url":"https://avatars-next.observableusercontent.com/5b865aa44afd936fc76160f24d13a547a9ac9dcb698c2f10ef75a0485ce562fb","tier":"starter_2024"},"version":422,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b3c1d31e147bc5d4","login":"b3c1d31e147bc5d4","name":"Huimin Han","avatar_url":"https://avatars-next.observableusercontent.com/5b865aa44afd936fc76160f24d13a547a9ac9dcb698c2f10ef75a0485ce562fb","tier":null}],"members":[{"type":"individual","id":"b3c1d31e147bc5d4","login":"b3c1d31e147bc5d4","name":"Huimin Han","avatar_url":"https://avatars-next.observableusercontent.com/5b865aa44afd936fc76160f24d13a547a9ac9dcb698c2f10ef75a0485ce562fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"D3 Interaction (notes)","cells":[{"id":0,"value":"# D3 Interaction (notes)\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","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","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","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"\n ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":31,"value":"data = await FileAttachment(\"States2010.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":374,"value":"You selected ${hover.Name} which has ${hover.PercentCollegeGrad} % college graduates","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"// Create the widget --> a filter slider\nviewof filter = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","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","output":"","database":"$undefined"},{"id":90,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":387,"value":"mutable brush = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"// reference the widget value\n// if we use viewof, then we can use another cell to show the current value of that widget\nfilter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"// update the visualization\nchart.filterBy(filter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"