Brush / Scrubbing

Open techniq opened this issue 4 years ago • 1 comments

[x] Set selection via props (change range, bind, etc)
[x] 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
[x] Click outside to clear
[x] Update immediately (change event)
[x] 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
[x] Axis
- [x] x-only
- [x] y-only
- [x] x and y (rect)
  - https://observablehq.com/@d3/brushable-scatterplot-matrix
  - https://observablehq.com/@d3/quadtree-brush
  - https://d3og.com/mbostock/5050837/
[x] Highlight selected values
- https://vega.github.io/vega-lite/examples/interactive_brush.html
- https://observablehq.com/@maritrinez/d3-brushable-timeline-beeswarm
[x] 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
[x] 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

Jan 12 '22 19:01 techniq

First iteration of Brush component is now available in 0.40.0

Jun 10 '24 14:06 techniq