31:T4a3,md` Brush is a useful way of allowing users to select a subset of the data. There are multiple ways of adding brush interactions to a chart. Here, we will look at two standard ways of doing it: (1) using the D3.js \`brush\`, and (2) making your own brush from elements such as \`rect\`s and \`path\`s. Generally speaking, D3 \`brush\` will do manage events and components for you, but will often make it difficult or impossible to make modifications. On the other hand, if you make your own brush out of elementary elements, you will be able to easily make modifications at the cost of having to manage all components and elements yourself. (Note: If you take the D3.js \`brush\` approach for Homework 3, the most difficult pieces will be (1) understanding D3.js \`brush\` well enough to be able to change the functionality to allow multi-brushes, and (2) bypassing the D3.js \`brush\`'s protection against modifying events (e.g, using keyboard events, adding additional elements, using separate buttons, etc.). If you take the \`rect\`s approach, the most difficult piece will be managing all elements and events on your own, which will be quite tricky to get correct and more code.) `32:T401,md` Just adding the brush unfortunately does not trigger any interaction with the data itself. We need to provide information about what should be done when a brush edit (i.e, drawing the selection, resizing, and moving) is started (usually triggered by clicking down, similar to \`mousedown\`), is in process (usually triggered when the mouse is moved while mouse is clicked), and is ended (usually triggered when click is released, similar to \`mouseup\`). These functions can be passed to our brush by: ~~~ js d3.brush() .on("start", /* function to run when the edit is started */) .on("brush", /* function to run during the edit */) .on("end", /* function to run when the edit is done */); ~~~ For example, consider the following function for highlighting all lines with a point within a selected region by reducing the opacity of all other lines. (Note: this is different from what we are asking for in Homework 3. In Homework 3, you should only pick lines that enter from the left and exit through the right.) `33:T841,md` Looking into the svg elements generated for the brush, we can see that the brush is really a combination of 10 \`rect\`s: one \`overlay\` \`rect\`, one \`selection\` \`rect\`, and eight \`handle\` \`rect\`s. ~~~ html ~~~ The functionality of each of these elements is:

_overlay_: The \`rect\` covering the entire brush region. When no selection is made, draggin within the overlay generates a new selection. When a selection is made, clicking on the overlay removes the selection.
_selection_: The \`rect\` for the selected region. Dragging this region moves the selection region.

(Note: The attributes, including the class names are automatically generated by D3 \`brush\`.) With this knowledge, we can modify the style and the functionality of the brush. First, as an example, and to further illustrate where each of these elements is, let us fill the \`overlay\` with \`firebrick\`, the \`selection\` with \`steelblue\`, and the \`handles\` \`gray\`. `34:T470,function addResizeCallback(rect, controlRect) { let initialMouseY; let initialRectY; let initialRectHeight; // Obtain the initial rectangle and mouse status function resizeStarted(event) { initialMouseY = event.y; initialRectY = +rect.attr("y"); initialRectHeight = +rect.attr("height"); } function resized(event) { let minY = /* Fill in */; // Compute the minimum value of y of the rect let maxY = /* Fill in */; // Compute the maximum value of y of the rect rect.attr("y", /* Fill in */) // set the new y of the rect .attr("height", /* Fill in */); // set the new height of the rect controlRect.attr("y", initialRectY + event.y - initialRectY - 3); // Set the new y of the control } // Always keep the top control on top function resizeEnded(event) { let minY = Math.min(initialRectY + event.y - initialMouseY, initialRectY + initialRectHeight); controlRect.attr("y", minY - 3); } // Attach callback to controlRect controlRect.call(d3.drag() .on("start", resizeStarted) .on("drag", resized) .on("end", resizeEnded)); }35:[{"id":"f60bc1efbd755b2e99864cf118a23a10b52254cffc635904e40d7e1b0ec2f922bbcb9375d17ee2fcfc5201c101d9bad5bf061620c6fefd9812771473a045c20d","href":"https://static.observableusercontent.com/files/f60bc1efbd755b2e99864cf118a23a10b52254cffc635904e40d7e1b0ec2f922bbcb9375d17ee2fcfc5201c101d9bad5bf061620c6fefd9812771473a045c20d","name":"untitled (1).png","type":"image/png","lastModified":1602442197770.432,"size":67573}] 2f:{"title":"Let's Make a Brushable Line Chart","cells":[{"id":0,"value":"md`# Let's Make a Brushable Line Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`\nIn this notebook, we will make a brushable line chart using D3. We've already imported the D3.js library and a few utilities that you can see at the end of this notebook. So let's start by loading a dataset. We've placed a dataset containing stock prices of three major airlines in the US (\\`AAL\\` (American Airlines), \\`UAL\\` (United Airlines), \\`DAL\\` (Delta Airlines)) at the following link:\n\nhttp://magrawala.github.io/cs448b-fa20/assets/docs/airlines.csv\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"airlineRawData = d3.csv(\"https://magrawala.github.io/cs448b-fa20/assets/docs/airlines.csv\", function(d) {\n return {\n airline: d.airline,\n date: /* Fill in */, // We need to parse the date string into a Date object using d3.timeParse. Here, the string looks like 10/15/19 (%m/%d/%y).\n price: +d.price\n };\n}).then(function(airlineRawData) {\n //Outside of Observable notebooks you would put all code to draw the graph here.\n return airlineRawData;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"printTable(airlineRawData.slice(0, 10, 5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`\nThe loaded data has each row representing represents an (\\`airline\\`, \\`date\\`, \\`price\\`) tuple, but it would be advantageous for the plotting stage to group the data by each airline since each airline would correspond to a unique line in the resulting line chart. Although we can use many different formats, we will use the following format:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"airlineData = [{airline: \"AAL\", values: []}, {airline: \"UAL\", values: []}, {airline: \"DAL\", values: []}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`\nLet's fill this in:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"airlineRawData.forEach(function(d) {\n airlineData[[\"AAL\", \"UAL\", \"DAL\"].indexOf(d.airline)].values.push({date: d.date, price: d.price})\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`\nWe will keep around the original loaded data as \\`airlineRawData\\` since it allows simple computation of the data ranges. For example, we can easily find that the range of dates is:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"d3.extent(airlineRawData, d => d.date);","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`\n# Basic Drawing Setup\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`\nOur goal is to construct a line chart of the stock price (y-axis) over time (x-axis) where the line for \\`AAL\\` is \\`gray\\`, the line for \\`UAL\\` is \\`steelblue\\`, and the line for \\`DAL\\` is \\`firebrick\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"color = ({\"AAL\": \"gray\", \"UAL\": \"steelblue\", \"DAL\": \"firebrick\"});","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`\nThe resulting plot should look something like:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"FileAttachment(\"untitled (1).png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`\nWe start by defining the width, height, and margin of the plot.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"plotVars = ({\n plotWidth: 600, // Width of plot region\n plotHeight: 300, // Height of plot region\n plotMargin: 50 // Margin space for axes and their labels\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`\n## Setup scales\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`\nNext, we setup the scales for the x and y dimensions.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"xScale = d3.scaleTime()\n .domain(/* Fill in */) // Try using d3.extent(), which gives [min, max]. We want to know the date ranges among the dates\n .range(/* Fill in */);","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"yScale = d3.scaleLinear()\n .domain([0, /* Fill in */]) // Try using d3.max(). We want the max of the price\n .range(/* Fill in */); // Don't forget to flip as the origin of the SVG is at top, left","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`\n## Draw the data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`\nA line on the svg is drawn using a \\`path\\`. The \\`path\\` uses the attribute \\`d\\` to specify the location of points on the \\`path\\`. The value of the attribute would be a string that is a concatenation of commands (e.g, \\`M0,0\\`: move to (0, 0), \\`L100,100\\`: line to (100, 100)) (For more details, see [here](https://www.w3schools.com/graphics/svg_path.asp)). For example, a \\`path\\` starting at (50, 10), then passing through (75, 200), and ending at (225, 100) would be drawn:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"{\n let svgPlotContainer = d3.create(\"svg\")\n .attr(\"width\", 250)\n .attr(\"height\", 250)\n .style(\"background-color\", \"whitesmoke\"); // Color container bg to see its extent\n \n svgPlotContainer.append(\"path\")\n .attr(\"d\", \"M50,10L75,200L225,100\")\n .attr(\"fill\", \"none\") // Do not fill the area defined by the path (Try erasing this if you are curious)\n .attr(\"stroke\", \"steelblue\"); // Set a color for the line\n \n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`\nWriting out the value for the attribute \\`d\\` could be tedious, but fortunately, we can use \\`d3.line()\\` in D3.js to create a generator for this string.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"lineGenerator = d3.line()\n .x(d => /* Fill in */)) // date should go on the x-axis\n .y(d => /* Fill in */); // price should go on the y-axis","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"lineGenerator(airlineData[0].values)","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`\nUsing the line generator, we can draw the lines:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"function drawLines(airlineData, plotContainer) {\n plotContainer.append(\"g\")\n .selectAll(\"path\")\n .data(airlineData)\n .join(\"path\")\n .attr(\"class\", \"data-line\") // Class name to be able to access the lines later\n .attr(\"d\", d => /* Fill in */) // Use lineGenerator on d.values\n .attr(\"fill\", \"none\") // Do not fill the area defined by the path\n .attr(\"stroke\", d => /* Fill in */); // Set a color for the line (The maps for color is in 'color')\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"{\n let svgPlotContainer = d3.create(\"svg\")\n .attr(\"width\", plotVars.plotWidth)\n .attr(\"height\", plotVars.plotHeight)\n .style(\"background-color\", \"whitesmoke\"); // Color container bg to see its extent\n \n // drawLines(airlineData, svgPlotContainer); // Uncomment this to see the result\n \n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"md`\nWe will continue with the barebone chart and leave adding axes and legends as an exercise. If you don't remember how this was done, you can refer back to the required class notebooks about adding [axes](https://observablehq.com/@stanfordvis/introduction-to-d3) and [legends](https://observablehq.com/@stanfordvis/making-d3-charts-interactive).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`\n# Adding Brush Interaction\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"md`\n## Method 1: Using the D3.js brush\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`\nWe can use the D3.js implementation of brush: \\`d3.brush()\\`. With the D3.js brush, users can draw a rectangular selection by dragging on the region, resize the selection by dragging the edges and corners, move the selection by dragging the selection, and delete the region by clicking outside the selection.\n\nTry to play around with the brush below to get familiar with the interactions it provide:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"{\n let svgPlotContainer = d3.create(\"svg\")\n .attr(\"width\", 250)\n .attr(\"height\", 250)\n .style(\"background-color\", \"whitesmoke\"); // Color container bg to see its extent\n \n \n const brush = d3.brush();\n \n svgPlotContainer.call(brush); // Attach the brush to svgPlotContainer\n \n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"function brushed(lines) {\n return function({selection}) {\n if (selection) {\n const [[xMin, yMin], [xMax, yMax]] = selection; // Unpack the bounding box of the selection\n if (xMin === xMax && yMin === yMax) {\n // The selection box is empty\n lines.style(\"opacity\", 1);\n } else {\n lines.style(\"opacity\", 0.2) // Start by setting all opacity to 0.2\n .filter(d => \n /* Fill in */) // Filter for lines that have at least one point within the rectangle. Feel free to change this to function(d) {operations; return something;} if you cannot get the code for the filtering in one line.\n .style(\"opacity\", 1);\n }\n } else {\n // Nothing has been selected yet\n lines.style(\"opacity\", 1);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"md`\nNote: Within Observable notebooks, you can use \\`{selection}\\` to directly obtain the bounding box of the selection, but for standalone applications, you should use \\`d3.brushSelection()\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"md`\nWe can now define a function for adding the brush to a designated container.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"function addBrush(brushContainer, lines) {\n const brush = d3.brush()\n .on(\"start brush end\", brushed(lines))\n .extent(/* Fill in */); // Sets the brushable area [[xMin, yMin], [xMax, yMax]]\n \n brushContainer.call(brush);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`\nFinally, we have our brushable line chart!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"{\n let svgPlotContainer = d3.create(\"svg\")\n .attr(\"width\", plotVars.plotWidth)\n .attr(\"height\", plotVars.plotHeight)\n .style(\"background-color\", \"whitesmoke\"); // Color container bg to see its extent\n \n drawLines(airlineData, svgPlotContainer);\n \n let brushContainer = svgPlotContainer.append(\"g\");\n addBrush(brushContainer, svgPlotContainer.selectAll(\"path.data-line\"));\n \n\n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"md`\n## Additional notes on brush\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"{\n let svgPlotContainer = d3.create(\"svg\")\n .attr(\"width\", 250)\n .attr(\"height\", 250);\n \n \n const brush = d3.brush();\n \n svgPlotContainer.call(brush); // Attach the brush to svgPlotContainer\n \n // Color overlay rectangle with firebrick\n svgPlotContainer.selectAll(\"rect.overlay\")\n .style(\"fill\", \"firebrick\")\n .style(\"opacity\", 0.5);\n \n // Color the selection rectangle\n svgPlotContainer.selectAll(\"rect.selection\")\n .style(\"fill\", \"steelblue\")\n .style(\"opacity\", 0.5);\n \n // Color the handles\n svgPlotContainer.selectAll(\"rect.handle\")\n .style(\"fill\", \"gray\")\n .style(\"opacity\", 0.5);\n \n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"md`\n_Try making selections and interacting with each of the components to become familiar with the building blocks of brush._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`\nWe can also remove certain functionality using this knowledge. For example, if we want to disallow deletion of the selection once it is first drawn, we can remove the \\`overlay\\` once the selection is drawn:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"{\n let svgPlotContainer = d3.create(\"svg\")\n .attr(\"width\", 250)\n .attr(\"height\", 250)\n .style(\"background-color\", \"whitesmoke\"); // Color container bg to see its extent\n \n \n const brush = d3.brush()\n .on(\"end\", function() {\n /* Fill in */\n }); // Remove the overlay when the selection is completed.\n \n svgPlotContainer.call(brush); // Attach the brush to svgPlotContainer\n \n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`\nThis is an especially useful idea in going towards implementing multiple brushes, as is done in this [example](http://bl.ocks.org/ludwigschubert/28b2792f0e5b9e3f06fd0e1382498cd1).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"md`\n## Method 2: Using elementary elements\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"md`\nOne caveat of modifying functionalities is that adding or changing events is not as easy as D3 brush attempts to handle all events internally. Because we know the components of a brush, we could in implement our own brush from \\`rect\\`s (or something else) if we need a highly customized brush.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"md`\nLet's start by making a \\`rect\\` that can be moved around by dragging on it.\n\nIn order to do this, we need to define callback functions for drag events and attach these callback functions to the rect.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"function addMoveCallback(rect) {\n function moved(event) {\n rect.attr(\"x\", /* Fill in */) // Shift the x value by event.dx\n .attr(\"y\", /* Fill in */); // Shift the y value by event.dy\n }\n\n // Attach callback to rect\n rect.call(d3.drag()\n .on(\"drag\", /* Fill in */)); // Use our 'moved' function\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"md`\nNow, we can make a \\`rect\\` that can be moved around by dragging on it by applying our function on the \\`rect\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"{\n let svgPlotContainer = d3.create(\"svg\")\n .attr(\"width\", 250)\n .attr(\"height\", 250)\n .style(\"background-color\", \"whitesmoke\"); // Color container bg to see its extent\n \n let rect = svgPlotContainer.append(\"rect\")\n .attr(\"x\", 100)\n .attr(\"y\", 100)\n .attr(\"width\", 50)\n .attr(\"height\", 50)\n .style(\"fill\", \"firebrick\")\n .style(\"cursor\", \"all-scroll\"); // Change the cursor to show that the rect can be moved.\n \n addMoveCallback(rect);\n \n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"md`\nNow, let's add one control \\`rect\\` on top of the rect to allow resizing. We leave the addition and managing of the remaining sides and corners as exercise.\n\n(Note 1: We could also use \\`path\\` for the side controls)\n\n(Note 2: For the assignment, you could have a different element for each control, or you could have a single rect element to handle all control events, and this would instead require carefully figuring out which side/corner of the rectangle you are interacting with.)\n\nAs before, we need to add callback functions to handle drag events, this time on the control \\`rect\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":715,"value":"md`\nLet's not forget to update the move callback so that the control \\`rect\\` moves with the selection \\`rect\\` when it is moved.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"function addMoveCallbackWithControl(rect, controlRect) {\n function moved(event) {\n rect.attr(\"x\", +rect.attr(\"x\") + event.dx) // Shift the x value by event.dx\n .attr(\"y\", +rect.attr(\"y\") + event.dy); // Shift the y value by event.dy\n \n controlRect.attr(\"x\", /* Fill in */) // Shift the x value by event.dx\n .attr(\"y\", /* Fill in */); // Shift the y value by event.dy\n }\n\n // Attach callback to rect\n rect.call(d3.drag()\n .on(\"drag\", moved));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"md`\nNow we have a resizable (top-only) and movable rect.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"{\n let svgPlotContainer = d3.create(\"svg\")\n .attr(\"width\", 250)\n .attr(\"height\", 250)\n .style(\"background-color\", \"whitesmoke\"); // Color container bg to see its extent\n \n let rect = svgPlotContainer.append(\"rect\")\n .attr(\"x\", 100)\n .attr(\"y\", 100)\n .attr(\"width\", 50)\n .attr(\"height\", 50)\n .style(\"fill\", \"firebrick\")\n .style(\"cursor\", \"all-scroll\");\n \n let controlRect = svgPlotContainer.append(\"rect\")\n .attr(\"x\", 100)\n .attr(\"y\", 100 - 3)\n .attr(\"width\", 50)\n .attr(\"height\", 6) // Set the thickness to 6.\n .style(\"fill\", \"black\")\n .style(\"cursor\", \"ns-resize\");\n \n addMoveCallbackWithControl(rect, controlRect);\n addResizeCallback(rect, controlRect);\n \n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`\nNow that we have the tools for making \\`rect\\`s resizable and movable, it remains to make an overlay, which would define the region where the brushing can happen.\n\nThe overlay will need to handle drag events and create interactive the selection \\`rect\\` and its control accordingly. We will leave this as an exercise.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"imports = md`

\n## Imports & Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}