- [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 - [x] 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/ - [x] Improve axis ticks, especially for dates - Possibly leverage [getMajorTicks() / getMinorTicks()](https://github.com/techniq/layerchart/blob/120704ff81062245625b93fe6b2b30f1321f4b98/packages/layerchart/src/lib/utils/ticks.ts#L146) - [ ] 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](https://d3og.com/emeeks/2fffa9abe50ac97603c7/) - [ ] 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 - [x] Clear selection with single click, double click, or disable - [x] Translate using scroll - [ ] Diagonal handles --- ## Examples - Svelte - https://layercake.graphics/example/Brush - https://layercake.graphics/example/SyncedBrush - [Brush component](https://svelte.dev/repl/632acf9091a94ce5874e660d6bf5ac85?version=4.2.0) - [Brushing D3](https://svelte.dev/repl/00f726facd434b978c737af2698e0dbc?version=4.2.0) - [performant high-density path chart scrubbing in SVG](https://svelte.dev/repl/b0624560aeb24dde993fd0bc2a3347c8?version=3.48.0) - https://1000experiments.dev/posts/drag-to-resize - https://svelte-ux.vercel.app/docs/components/RangeSlider - [Carbon Zoom bar](https://charts.carbondesignsystem.com/svelte/?path=/story/utility-zoom-bar--stacked-area-time-series-zoom-bar-enabled) - 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
changeevent)endevent)Examples