21:null 22:["$","title",null,{"children":"21 June 2020: Brushing to Filter and Zoom Using D3 Brush | Di | Observable"}] 27:T934,md` The D3 docs for [\`brush(group)\`](https://github.com/d3/d3-brush/blob/master/README.md#_brush), in particular, are the most insightful for getting the general picture of brush: - The "**brush**" group contains all the brush parts: \`…\` - Inside the brush group there are \`rect\`s for 3 main parts: overlay, selection, and various handle parts. - **Overlay**: "The overlay rect covers the brushable area defined by \`brush.extent\`." - **Selection**: "The selection rect covers the area defined by the current brush selection. The handle rects cover the edges and corners of the brush selection, allowing the corresponding value in the brush selection to be modified interactively." - Each **handle** \`rect\` looks like this: \`\` - \`n\` in \`handle--n\` indicates north (a top handle) - \`ns\` in \`ns-resize\` indicates a north to south resize cursor In code… > The structure of a two-dimensional brush is as follows: ~~~js ~~~ The docs also note, "To modify the brush selection programmatically, use \`brush.move\`". `28:T772,md` - [Focus + Context by Mike Bostock](https://observablehq.com/@d3/focus-context) - [Programmatically control a D3 brush by John Clarke](https://observablehq.com/@john-clarke/programmatically-control-a-d3-brush) - [Click to Recenter Brush by Mike Bostock](https://observablehq.com/@d3/click-to-recenter-brush) - [D3 Brushable Timeline (barchart) by Beatriz Martínez](https://observablehq.com/@maritrinez/d3-brushable-timeline) - [Brushable Scatterplot Matrix by Mike Bostock](https://observablehq.com/@d3/brushable-scatterplot-matrix) - [Ordinal Brushing by Mike Bostock](https://observablehq.com/@d3/ordinal-brushing?collection=@d3/d3-brush) - [Brushable and interactive bar chart in d3.js by Nadieh Bremer](https://www.visualcinnamon.com/2016/07/brush-bar-chart-d3.html) - [Brushable Horizontal Bar Chart - IV by Nadieh Bremer](http://bl.ocks.org/nbremer/326fb6de768e85261bfd47aa1f497863) - [COVID-19 deaths and cases by country (brushable bar chart with mini map) by Sourabh](https://observablehq.com/@yaduvan/covid-19-deaths-and-cases-by-country-brushable-bar-chart-wit) - [Abrupt color gradients by Nadieh Bremer](https://www.visualcinnamon.com/2016/06/abrupt-color-gradients) - [D3 Real Time Chart with Multiple Data Streams by Aaron Kyle Dennis](https://observablehq.com/@aaronkyle/d3-real-time-chart-with-multiple-data-streams) - [Brush Snapping (Transitions) by Mike Bostock](https://observablehq.com/@d3/brush-snapping-transitions) - [Data driven range sliders by David B.](https://observablehq.com/@bumbeishvili/data-driven-range-sliders) - [Brushing in d3.js](https://www.d3-graph-gallery.com/graph/interactivity_brush.html) - [Crossfilter with some toys by kaz184](https://observablehq.com/@kaz184/crossfilter-with-some-toys) - [d3-brush collection on Observable](https://observablehq.com/collection/@d3/d3-brush) - [AntV: G2: Brush](https://g2.antv.vision/en/examples/interaction/brush) `29:T41f,md`I've seen two approaches to brushable minimaps in Observable for filtering and zooming line, bar, or area charts: 1. Two cells: a cell is used for brushing a small, zoomed out version of the chart and another cell is used for showing the main chart filtered by the brushable cell. For example, [Focus + Context by Mike Bostock](https://observablehq.com/@d3/focus-context). 2. One cell: the one cell is used for both the brushable chart and the main chart. For example, [Programmatically control a D3 brush by John Clarke](https://observablehq.com/@john-clarke/programmatically-control-a-d3-brush) or [D3 Real Time Chart with Multiple Data Streams by Aaron Kyle Dennis](https://observablehq.com/@aaronkyle/d3-real-time-chart-with-multiple-data-streams). I suppose one advantage of the separate cells (and separate SVGs) is that it might be more flexible, so you could more readily reposition your brushable context chart if you wanted. On the other hand, a single cell is self-contained and might be more readily dropped into a dashboard or similar. `2a:[{"id":"b87cc77119ea1fb1082ff70c156b1b644da6bb04b9c50a1f767b593ee8fe53dfa84e14c55c8e367f899143ad4e25379e6341ed781ddb9eb0ae770d6d4abd2ddf","href":"https://static.observableusercontent.com/files/b87cc77119ea1fb1082ff70c156b1b644da6bb04b9c50a1f767b593ee8fe53dfa84e14c55c8e367f899143ad4e25379e6341ed781ddb9eb0ae770d6d4abd2ddf","name":"Viz.png","type":"image/png","lastModified":1592725779195.554,"size":33002},{"id":"19d6eb982e3355282037402eacf121f79eb39669a297ad8ef2b68c65cc52fb2adf36846be7de3222b3becee49a35bd883fc82a2eab9475e6c0455c8fa6743bb4","href":"https://static.observableusercontent.com/files/19d6eb982e3355282037402eacf121f79eb39669a297ad8ef2b68c65cc52fb2adf36846be7de3222b3becee49a35bd883fc82a2eab9475e6c0455c8fa6743bb4","name":"image@1.png","type":"image/png","lastModified":1592721764396.043,"size":162616},{"id":"93859f2c21ed0b18a6ed03993e754eb18b0729e3e925f3ac27f73aeb48c3870e3fb760c3636adb4f4dbe67ace28a06df1b000aefdb10018b58e63eb1a42ed85b","href":"https://static.observableusercontent.com/files/93859f2c21ed0b18a6ed03993e754eb18b0729e3e925f3ac27f73aeb48c3870e3fb760c3636adb4f4dbe67ace28a06df1b000aefdb10018b58e63eb1a42ed85b","name":"Brush.png","type":"image/png","lastModified":1592726109069.653,"size":58491},{"id":"89e9b61a2e8b0dce1a198592d8619429549c97df0d91edcb1d0fc1fd47c4f92e84fa09d48930543fe57d685a5c85b73815a7c82cdb301747f499266a10d3a035","href":"https://static.observableusercontent.com/files/89e9b61a2e8b0dce1a198592d8619429549c97df0d91edcb1d0fc1fd47c4f92e84fa09d48930543fe57d685a5c85b73815a7c82cdb301747f499266a10d3a035","name":"Clip.png","type":"image/png","lastModified":1592739458395.048,"size":54223}] 25:{"id":"7b5cec81a18ed03b","slug":"21-june-2020-brushing-to-filter-and-zoom-using-d3-brush","title":"21 June 2020: Brushing to Filter and Zoom Using D3 Brush","thumbnail":"d52b5e81ae1d5b6cdac8dc6d44a49edc429c6deb2a6d8b78105345b1c9744b90","access_level":"public","create_time":"$D2020-06-20T08:22:03.501Z","update_time":"$D2020-06-21T11:52:50.891Z","view_time":null,"first_public_time":"$D2020-06-21T11:53:15.770Z","has_unpublished_edits":null,"fork":{"id":"45b2a821b4b3177b","slug":"20-june-2020-sketchy-d3-bar-chart-style","title":"20 June 2020: Sketchy D3 Bar Chart Style","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"stars":7,"starred":false,"owner":{"type":"team","id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":"starter_2024"},"version":10413,"publish_version":10413,"role":null,"authored":false,"authors":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null}],"members":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"2646dc1fd46613a4","slug":"journal-getting-started-with-data-viz-collection","title":"Journal: Getting Started with Data Viz","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"type":"notebook","body":{"titling":"auto","title":"21 June 2020: Brushing to Filter and Zoom Using D3 Brush","cells":[{"id":0,"value":"md`# 21 June 2020: Brushing to Filter and Zoom Using D3 Brush`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`After [20 June 2020: Sketchy D3 Bar Chart Style](https://observablehq.com/@didoesdigital/20-june-2020-sketchy-d3-bar-chart-style), I wanted to have another go at brushing. I took a deep dive into the documentation and various notebooks to wrap my head around what a brush *is*, *does*, and *looks like*. What are the parts of a brush? How do you use it?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9600,"value":"md`## Brushing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9603,"value":"md`Brushing is often used to *filter and zoom* data. According to [d3-brush docs](https://github.com/d3/d3-brush):\n\n> Brushing is the interactive specification a one- or two-dimensional selected region using a pointing gesture, such as by clicking and dragging the mouse. Brushing is often used to select discrete elements, such as dots in a scatterplot or files on a desktop. It can also be used to zoom-in to a region of interest, or to select continuous regions for cross-filtering data or live histograms\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10297,"value":"md`For example, this wireframe shows a bar chart with accompanying minimap showing an overview of the data to provide context with a brush selection used to filter and zoom the main bar chart data:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10293,"value":"vizWireframe = {\n const img = FileAttachment(\"Viz.png\").image();\n img.alt = \"Bar chart with accompanying minimap with brush selection.\"\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10236,"value":"md`## D3 brush`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10180,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10321,"value":"mdVisualOverview = md`### Visual overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10308,"value":"md`To visualise these concepts, here's the wireframe again showing the brush group (\\`g\\`), selection \\`rect\\`, overlay \\`rect\\`, and brush handle \\`rect\\`s:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10305,"value":"brushAnatomy = {\n const img = FileAttachment(\"Brush.png\").image();\n img.alt = \"Bar chart with accompanying minimap with brush selection, showing anatomy of the brush, including the brush group, brush handles, selection area, and overlay area.\"\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10326,"value":"mdHandlesAndCursors = md`### Handles and cursors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10204,"value":"md`[MDN: cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) explains some of the naming conventions used by D3 brush that aren't explained in the D3 docs:\n\n> Some edge is to be moved. For example, the \\`se-resize\\` cursor is used when the movement starts from the *south-east* corner of the box. In some environments, an equivalent bidirectional resize cursor is shown. For example, \\`n-resize\\` and \\`s-resize\\` are the same as \\`ns-resize\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10195,"value":"resizeCursorsImage = {\n const image = await FileAttachment(\"image@1.png\").image();\n image.alt = \"Thumbnails of all the resize cursors along with their cursor values.\"\n image.width = 640;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10338,"value":"mdBrushEvents = md`### Brush events`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10226,"value":"md`The [Brush events](https://github.com/d3/d3-brush/blob/master/README.md#brush-events) docs explain:\n\n> When a brush event listener is invoked, \\`d3.event\\` is set to the current brush event. The event object exposes several fields:\n- \\`target\\` - the associated [brush behavior](https://github.com/d3/d3-brush/blob/master/README.md#brush).\n- \\`type\\` - the string “start”, “brush” or “end”; see [brush.on](https://github.com/d3/d3-brush/blob/master/README.md#brush_on).\n- \\`selection\\` - the current [brush selection](https://github.com/d3/d3-brush/blob/master/README.md#brushSelection).\n- \\`sourceEvent\\` - the underlying input event, such as mousemove or touchmove.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10233,"value":"md`Finally, the [brush.on](https://github.com/d3/d3-brush/blob/master/README.md#brush_on) docs explain:\n\n> The type must be one of the following:\n- \\`start\\` - at the start of a brush gesture, such as on mousedown.\n- \\`brush\\` - when the brush moves, such as on mousemove.\n- \\`end\\` - at the end of a brush gesture, such as on mouseup.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10347,"value":"mdCodeExamples = md`## Code examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10348,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10342,"value":"mdInObservable = md`## In Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9547,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10368,"value":"md`[Focus + Context by Mike Bostock](https://observablehq.com/@d3/focus-context) seems to depend on [Observable behaviour](https://github.com/observablehq/stdlib/blob/master/README.md#Generators_input) to [dispatch](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch) a custom \"input\" event. The \\`d3.event.selection\\` returns the current brush selection according to the [\\`brushSelection\\`](https://github.com/d3/d3-brush/blob/master/README.md#brushSelection), which looks like \\`[x0, x1]\\` for a brushX or \\`[[x0, y0], [x1, y1]]\\` for a two-dimensional brush. This brushed function adds a \"value\" property to the SVG selection with the brush's selection in terms of the domain values:\n\n~~~js\n function brushed() {\n if (d3.event.selection) {\n svg.property(\"value\", d3.event.selection.map(x.invert, x));\n svg.dispatch(\"input\");\n }\n }\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9643,"value":"mdTerminology = md`## Terminology`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9622,"value":"md`The terminology people use seems a bit inconsistent. It looks to me like the three notebooks above take 3 different approaches:\n\n- Mike Bostock calls the brushable cell \"focus\" and the main cell \"chart\"\n- John Clarke calls the brushable group \"context\" and the main group \"focus\"\n- Aaron Kyle Dennis calls the brushable group \"nav\" and the main group \"main\"\n\nI've also seen the small brushable chart referred to elsewhere as \"minimap\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10365,"value":"md`## Zoom on brush`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10379,"value":"md`\nMany of the examples of brushing on Observable respond to brush events by changing the \\`domain\\` of the chart scale and axis to filter and zoom the data. This approach effectively removes the excess data outside the area that is the current focus. In other words, only the data in the area that is the current focus is charted.\n\nAlternatively, these examples from Nadieh Bremer instead use transforms and a clip region to reframe the chart and hide the rest of the chart, while still technically charting it:\n\n- [Brushable and interactive bar chart in d3.js by Nadieh Bremer](https://www.visualcinnamon.com/2016/07/brush-bar-chart-d3.html)\n- [Brushable Horizontal Bar Chart - IV by Nadieh Bremer](http://bl.ocks.org/nbremer/326fb6de768e85261bfd47aa1f497863)\n\nTo visualise that approach:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10386,"value":"clipAnatomy = {\n const img = FileAttachment(\"Clip.png\").image();\n img.alt = \"Bar chart with accompanying minimap with brush selection, revealing offscreen bars clipped by an annotated clip region.\"\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10402,"value":"md`This approach means you can also scroll the chart to pan to the section of interest. You can see another example of this behaviour in [COVID-19 deaths and cases by country (brushable bar chart with mini map) by Sourabh](https://observablehq.com/@yaduvan/covid-19-deaths-and-cases-by-country-brushable-bar-chart-wit), which ports Nadieh Bremer's approach from bl.ocks.org.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9632,"value":"mdProTips = md`## Pro-tips`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9634,"value":"md`\n- Handle the case where people drag their pointer outside the brushable error.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10279,"value":"mdResources = md`## Resources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8861,"value":"d3 = require(\"d3@5\", \"d3-array@2.4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2a","stdlib":"1"}} 26:"$25:body"