Scatter brush — Björk UI

Components•Scatter brush

Scatter brush

Fifteen hundred points on one canvas. Drag out a region to select it: the selection takes the accent, everything else falls back, and the marginal histograms and the readout follow live. The trend line is a least-squares fit over whatever is selected, so brushing one cluster shows its own slope and r² rather than the overall one. Drag the brush to move it or its edges to resize it, click empty space to clear, and drive it all from the keyboard.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/scatter-brush

How to use

import { ScatterBrush } from "@/components/bjork-ui/charts/scatter-brush";<ScatterBrush  points={sessions.map((s) => ({ x: s.minutes, y: s.score, label: s.id }))}  xLabel="Session length"  yLabel="Engagement"  trend  onBrushChange={(brush, selected) => console.log(selected.length)}/>

Sessions (first 400 points)
Point	Session length	Engagement
Session 1	1.5m	21
Session 2	4.4m	51
Session 3	8.0m	69
Session 4	4.0m	39
Session 5	7.5m	74
Session 6	6.2m	67
Session 7	7.1m	70
Session 8	6.8m	64
Session 9	6.7m	71
Session 10	5.3m	81
Session 11	6.7m	57
Session 12	2.7m	45
Session 13	2.0m	16
Session 14	6.9m	71
Session 15	4.7m	48
Session 16	7.3m	65
Session 17	5.2m	80
Session 18	3.3m	33
Session 19	2.9m	42
Session 20	6.8m	76
Session 21	6.3m	71
Session 22	3.1m	49
Session 23	7.8m	70
Session 24	2.9m	46
Session 25	1.6m	29
Session 26	4.3m	37
Session 27	4.6m	38
Session 28	1.9m	35
Session 29	7.0m	68
Session 30	1.9m	32
Session 31	4.2m	43
Session 32	7.1m	75
Session 33	6.7m	76
Session 34	6.4m	70
Session 35	6.5m	89
Session 36	7.3m	77
Session 37	7.6m	61
Session 38	3.1m	35
Session 39	4.5m	51
Session 40	2.6m	37
Session 41	2.2m	27
Session 42	3.3m	44
Session 43	7.9m	61
Session 44	3.0m	32
Session 45	7.8m	77
Session 46	4.8m	57
Session 47	3.9m	47
Session 48	5.4m	79
Session 49	7.3m	68
Session 50	0.8m	13
Session 51	1.6m	20
Session 52	7.1m	64
Session 53	1.5m	7
Session 54	6.8m	68
Session 55	1.8m	13
Session 56	5.3m	56
Session 57	3.7m	34
Session 58	3.0m	47
Session 59	2.7m	30
Session 60	6.5m	72
Session 61	4.4m	46
Session 62	1.8m	26
Session 63	2.7m	29
Session 64	4.7m	47
Session 65	6.5m	87
Session 66	2.1m	34
Session 67	3.1m	43
Session 68	5.6m	79
Session 69	3.3m	40
Session 70	2.6m	30
Session 71	3.0m	29
Session 72	3.1m	34
Session 73	2.7m	34
Session 74	1.9m	26
Session 75	7.7m	78
Session 76	1.7m	40
Session 77	6.4m	79
Session 78	3.7m	43
Session 79	2.0m	38
Session 80	3.0m	31
Session 81	7.5m	76
Session 82	7.5m	75
Session 83	3.4m	34
Session 84	6.6m	70
Session 85	5.0m	50
Session 86	5.9m	76
Session 87	3.8m	31
Session 88	3.3m	50
Session 89	1.8m	43
Session 90	6.0m	72
Session 91	2.2m	39
Session 92	7.7m	89
Session 93	4.0m	58
Session 94	7.1m	72
Session 95	6.5m	75
Session 96	2.5m	30
Session 97	1.7m	34
Session 98	5.4m	47
Session 99	5.5m	96
Session 100	4.0m	37
Session 101	4.1m	39
Session 102	2.5m	27
Session 103	4.6m	37
Session 104	0.9m	27
Session 105	4.1m	47
Session 106	4.3m	45
Session 107	3.7m	44
Session 108	8.4m	68
Session 109	1.8m	30
Session 110	7.4m	71
Session 111	4.7m	59
Session 112	4.8m	59
Session 113	6.7m	65
Session 114	7.4m	74
Session 115	3.4m	40
Session 116	2.7m	32
Session 117	3.5m	27
Session 118	2.5m	29
Session 119	2.4m	24
Session 120	1.6m	34
Session 121	2.2m	38
Session 122	7.6m	67
Session 123	3.3m	43
Session 124	8.1m	69
Session 125	2.9m	36
Session 126	5.9m	81
Session 127	5.0m	52
Session 128	1.3m	26
Session 129	3.1m	30
Session 130	7.5m	76
Session 131	3.6m	55
Session 132	6.4m	75
Session 133	6.1m	75
Session 134	7.9m	80
Session 135	3.4m	44
Session 136	7.6m	76
Session 137	3.7m	33
Session 138	3.3m	45
Session 139	4.1m	47
Session 140	8.8m	66
Session 141	7.3m	73
Session 142	3.6m	40
Session 143	7.1m	70
Session 144	2.8m	34
Session 145	4.0m	57
Session 146	6.4m	70
Session 147	3.3m	41
Session 148	1.3m	32
Session 149	1.8m	13
Session 150	8.0m	75
Session 151	3.8m	47
Session 152	2.5m	32
Session 153	3.0m	26
Session 154	3.2m	40
Session 155	2.4m	38
Session 156	5.5m	85
Session 157	2.7m	29
Session 158	4.2m	55
Session 159	2.3m	41
Session 160	3.8m	42
Session 161	6.8m	79
Session 162	5.4m	83
Session 163	6.2m	77
Session 164	2.9m	45
Session 165	3.4m	33
Session 166	2.0m	36
Session 167	7.0m	71
Session 168	3.7m	46
Session 169	6.8m	63
Session 170	6.8m	66
Session 171	4.2m	37
Session 172	6.4m	74
Session 173	3.0m	30
Session 174	2.6m	42
Session 175	7.0m	78
Session 176	2.9m	46
Session 177	2.3m	24
Session 178	5.4m	46
Session 179	3.4m	40
Session 180	3.4m	39
Session 181	4.3m	44
Session 182	3.4m	47
Session 183	5.6m	84
Session 184	5.7m	58
Session 185	4.9m	52
Session 186	6.2m	71
Session 187	2.2m	18
Session 188	4.9m	36
Session 189	4.9m	80
Session 190	2.2m	39
Session 191	6.6m	66
Session 192	3.1m	35
Session 193	1.8m	32
Session 194	6.3m	69
Session 195	6.6m	71
Session 196	8.4m	71
Session 197	2.9m	55
Session 198	6.7m	75
Session 199	5.9m	85
Session 200	5.6m	70
Session 201	6.1m	72
Session 202	6.5m	75
Session 203	3.3m	40
Session 204	4.1m	46
Session 205	2.5m	32
Session 206	6.5m	83
Session 207	5.4m	77
Session 208	7.9m	74
Session 209	4.4m	47
Session 210	3.7m	53
Session 211	7.2m	76
Session 212	3.5m	56
Session 213	3.0m	29
Session 214	3.6m	37
Session 215	4.4m	48
Session 216	7.5m	62
Session 217	3.1m	48
Session 218	7.4m	70
Session 219	3.3m	35
Session 220	7.4m	71
Session 221	5.1m	65
Session 222	1.9m	34
Session 223	6.9m	76
Session 224	0.7m	26
Session 225	2.5m	37
Session 226	7.0m	73
Session 227	7.3m	66
Session 228	1.3m	25
Session 229	6.1m	78
Session 230	7.2m	79
Session 231	7.0m	72
Session 232	3.6m	46
Session 233	3.7m	42
Session 234	6.7m	70
Session 235	6.1m	80
Session 236	7.6m	74
Session 237	3.5m	38
Session 238	5.8m	80
Session 239	1.9m	35
Session 240	3.7m	44
Session 241	2.7m	29
Session 242	1.4m	10
Session 243	3.3m	33
Session 244	5.9m	78
Session 245	4.4m	87
Session 246	3.9m	37
Session 247	5.3m	70
Session 248	7.1m	84
Session 249	7.1m	74
Session 250	2.6m	35
Session 251	1.6m	18
Session 252	1.4m	29
Session 253	4.3m	47
Session 254	5.5m	56
Session 255	7.4m	66
Session 256	1.4m	38
Session 257	2.1m	23
Session 258	4.2m	54
Session 259	5.6m	83
Session 260	7.8m	75
Session 261	3.3m	45
Session 262	6.8m	79
Session 263	3.5m	38
Session 264	6.8m	79
Session 265	7.2m	79
Session 266	2.8m	42
Session 267	7.3m	74
Session 268	6.6m	67
Session 269	3.2m	24
Session 270	7.3m	67
Session 271	3.9m	30
Session 272	7.0m	77
Session 273	6.8m	71
Session 274	3.4m	35
Session 275	2.9m	33
Session 276	1.2m	22
Session 277	4.1m	69
Session 278	2.5m	27
Session 279	5.2m	59
Session 280	5.1m	43
Session 281	4.0m	59
Session 282	4.4m	43
Session 283	5.4m	57
Session 284	2.5m	37
Session 285	5.5m	78
Session 286	6.2m	72
Session 287	7.3m	65
Session 288	6.3m	65
Session 289	2.8m	33
Session 290	2.4m	42
Session 291	5.1m	52
Session 292	3.7m	52
Session 293	6.4m	73
Session 294	6.7m	74
Session 295	2.5m	36
Session 296	4.3m	47
Session 297	3.3m	48
Session 298	3.7m	42
Session 299	5.7m	78
Session 300	3.8m	45
Session 301	6.8m	83
Session 302	3.4m	42
Session 303	1.7m	31
Session 304	4.6m	38
Session 305	7.5m	78
Session 306	3.3m	31
Session 307	5.2m	57
Session 308	4.6m	47
Session 309	4.6m	41
Session 310	6.6m	71
Session 311	6.7m	72
Session 312	4.0m	42
Session 313	5.3m	86
Session 314	3.8m	52
Session 315	4.9m	82
Session 316	3.2m	45
Session 317	0.6m	16
Session 318	2.7m	29
Session 319	4.1m	52
Session 320	1.8m	17
Session 321	3.4m	40
Session 322	3.4m	42
Session 323	1.5m	25
Session 324	2.9m	24
Session 325	8.7m	59
Session 326	3.0m	47
Session 327	2.5m	36
Session 328	2.2m	40
Session 329	1.6m	23
Session 330	2.1m	36
Session 331	4.6m	41
Session 332	7.9m	71
Session 333	2.4m	23
Session 334	7.1m	63
Session 335	2.1m	25
Session 336	5.7m	86
Session 337	6.9m	73
Session 338	1.4m	31
Session 339	1.6m	33
Session 340	6.9m	69
Session 341	6.1m	88
Session 342	7.2m	75
Session 343	2.4m	40
Session 344	4.9m	52
Session 345	1.4m	29
Session 346	2.3m	29
Session 347	4.2m	47
Session 348	5.9m	68
Session 349	5.1m	79
Session 350	6.6m	86
Session 351	2.8m	12
Session 352	1.8m	28
Session 353	5.9m	73
Session 354	4.6m	87
Session 355	3.4m	46
Session 356	4.3m	49
Session 357	4.9m	79
Session 358	5.7m	43
Session 359	4.8m	77
Session 360	3.2m	37
Session 361	6.9m	75
Session 362	6.7m	78
Session 363	2.3m	19
Session 364	2.6m	38
Session 365	8.9m	66
Session 366	6.5m	71
Session 367	3.1m	47
Session 368	0.2m	10
Session 369	5.7m	85
Session 370	2.2m	20
Session 371	8.0m	67
Session 372	2.4m	36
Session 373	3.9m	57
Session 374	6.1m	84
Session 375	7.5m	55
Session 376	3.8m	41
Session 377	3.1m	36
Session 378	1.3m	24
Session 379	6.7m	77
Session 380	4.1m	40
Session 381	7.2m	70
Session 382	7.1m	74
Session 383	4.1m	39
Session 384	1.2m	30
Session 385	3.6m	37
Session 386	4.3m	49
Session 387	3.1m	44
Session 388	8.2m	84
Session 389	6.7m	67
Session 390	8.5m	67
Session 391	5.9m	64
Session 392	6.2m	65
Session 393	1.9m	31
Session 394	2.3m	32
Session 395	1.4m	20
Session 396	3.7m	43
Session 397	3.3m	37
Session 398	6.9m	63
Session 399	2.3m	38
Session 400	1.9m	26

Options

Trend line