Brush / Scrubbing
Open
Nobody has claimed this yet.
geo
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 41
- Avg merge
- 2d 19h
- Merged PRs (30d)
- 16
Description
- Set selection via props (change range, bind, etc)
- Synced / Coordinated views
- Click outside to clear
- Update immediately (
changeevent) - Update on mouseup (
endevent) - Axis
- Highlight selected values
- Styling (range, handle)
- Add icons to handles
- SVG pattern range
- Range above axis
- Double click to select all / clear (possibly?)
- Ordinal
- Bar Chart example
- Snapping
- Improve axis ticks, especially for dates
- Possibly leverage getMajorTicks() / getMinorTicks()
- Radial
- Parallel coordinates
- Geo
- Coordinated views (scrolling with brushing)
- Drag handle for single axis
- Clear selection with single click, double click, or disable
- Translate using scroll
- Diagonal handles
Examples
- Svelte
- 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
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
This is a broad brush roadmap rather than a single scoped change. Start by reviewing the d3-brush documentation and the linked Svelte Brush component examples, then choose one unchecked capability such as ordinal brushing or snapping. Done means the selected behavior works in the relevant chart use case and the corresponding checklist item and example are updated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- d3, typescript
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100