Brush / Scrubbing

[techniq]

• Set selection via props (change range, bind, etc)
• Synced / Coordinated views
  • https://observablehq.com/@yurivish/coordinated-views
  • https://observablehq.com/@d3/brushable-scatterplot-matrix
  • https://layercake.graphics/example/SyncedBrush
  • https://observablehq.com/@weiglemc/brushing-and-linking-example-with-vega-lite
• Click outside to clear
• Update immediately (change event)
• Update on mouseup (end event)
  • https://charts.carbondesignsystem.com/svelte/?path=/story/utility-zoom-bar--stacked-area-time-series-zoom-bar-enabled
  • https://svelte.dev/repl/b0624560aeb24dde993fd0bc2a3347c8?version=3.48.0
• Axis
  • x-only
  • y-only
  • x and y (rect)
    • https://observablehq.com/@d3/brushable-scatterplot-matrix
    • https://observablehq.com/@d3/quadtree-brush
    • https://d3og.com/mbostock/5050837/
• Highlight selected values
  • https://vega.github.io/vega-lite/examples/interactive_brush.html
  • https://observablehq.com/@maritrinez/d3-brushable-timeline-beeswarm
• Styling (range, handle)
  • Add icons to handles
    • https://twitter.com/karsvaniersel/status/1544226461715931140
    • https://svelte.dev/repl/00f726facd434b978c737af2698e0dbc?version=4.2.0
  • SVG pattern range
    • https://airbnb.io/visx/brush
  • Range above axis
    • https://observablehq.com/@maritrinez/d3-brushable-timeline-beeswarm
• Double click to select all / clear (possibly?)
  • https://observablehq.com/@d3/double-click-brush-clear
• Ordinal
  • https://observablehq.com/@d3/ordinal-brushing
• Bar Chart example
  • https://observablehq.com/@didoesdigital/26-june-2020-d3-bar-chart-brush
  • https://observablehq.com/@maritrinez/d3-brushable-timeline
• Snapping
  • https://observablehq.com/@d3/brush-snapping-transitions
  • https://observablehq.com/@d3/brush-snapping
  • https://d3og.com/mbostock/6232537/
• Improve axis ticks, especially for dates
  • Possibly leverage getMajorTicks() / getMinorTicks()
• Radial
  • https://www.amcharts.com/demos/radar-chart-visualizing-yearly-activities/
  • https://www.amcharts.com/demos/radial-histogram/
  • https://www.amcharts.com/demos/zoomable-radar/
  • https://d3og.com/emeeks/2fffa9abe50ac97603c7/
  • Brushable Radial Chart
• Parallel coordinates
  • https://observablehq.com/@d3/brushable-parallel-coordinates
  • https://vizhub.com/curran/parallel-coordinates-with-brushing
• Geo
  • https://d3og.com/mbostock/5050837/
• Coordinated views (scrolling with brushing)
  • https://observablehq.com/@yurivish/coordinated-views
  • https://observablehq.com/@heman/zooming-usability
• Drag handle for single axis
  • https://echarts.apache.org/examples/en/editor.html?c=candlestick-brush
• Clear selection with single click, double click, or disable
• Translate using scroll
• Diagonal handles

---

Examples

• Svelte
  • https://layercake.graphics/example/Brush
  • https://layercake.graphics/example/SyncedBrush
  • Brush component
  • Brushing D3
  • performant high-density path chart scrubbing in SVG
  • https://1000experiments.dev/posts/drag-to-resize
  • https://svelte-ux.vercel.app/docs/components/RangeSlider
  • Carbon Zoom bar
• d3
  • https://d3js.org/d3-brush
  • https://observablehq.com/@d3/ordinal-brushing
  • https://observablehq.com/@didoesdigital/26-june-2020-d3-bar-chart-brush
  • https://observablehq.com/@maritrinez/d3-brushable-timeline
  • https://observablehq.com/@maritrinez/d3-brushable-timeline-beeswarm
  • https://observablehq.com/@d3/brush-filter
  • https://observablehq.com/@d3/click-to-recenter-brush
  • https://observablehq.com/@d3/empty-brush-selection
  • https://observablehq.com/@d3/brush-handles
  • https://observablehq.com/@d3/double-click-brush-clear
  • https://observablehq.com/@bumbeishvili/data-driven-range-sliders
  • https://observablehq.com/@d3/focus-context?collection=@d3/d3-brush
  • https://d3-graph-gallery.com/graph/interactivity_brush.html
  • https://observablehq.com/@yurivish/coordinated-views
  • https://observablehq.com/@heman/zooming
  • https://observablehq.com/@thetylerwolf/day-17-radial-bar-chart
  • https://observablehq.com/@sandraviz/global-temperatures-anomalies
  • https://observablehq.com/@d3/brushable-scatterplot-matrix
  • https://observablehq.com/@d3/quadtree-brush
  • https://observablehq.com/@bumbeishvili/data-driven-range-sliders
• Other
  • https://vx-demo.vercel.app/brush
  • https://twitter.com/karsvaniersel/status/1544226461715931140

[techniq]

First iteration of Brush component is now available in 0.40.0