scatter plots

uPlot.Scatter

e.g. https://academy.datawrapper.de/article/65-how-to-create-a-scatter-plot

spatial index via e.g. https://github.com/mourner/kdbush or https://github.com/mourner/flatbush

data format e.g.:

[
  [x,y,v,l,x,y,v,l],  // series 1
  [x,y,v,l,x,y,v,l],  // series 2
  [x,y,v,l,x,y,v,l],  // series 3
]

• v value (size of point/shape)
• l label

should use a Path2D shape cache

[leeoniya]

sneak peek

30,000 scatter points (10k per series) in 100ms:

this is without building a spatial point index, which turns out to be a fairly expensive task (~40ms for kdbush).

if the points were square (instead of circles) and pixel-aligned, this would likely run 30-50% faster since there’d be no need for anti-aliasing.

[leeoniya]

ok, so i optimized point rendering in 12b6beb23d58bfab52c8af052c6e80cd23a267f7, to use a single Path2D.

since i had no baseline for whether 75ms was slow or fast for a 30k point scatter plot. i tried the same with the next-fastest lib (Chart.js 3.0 alpha). spoiler: it’s was never actually 75ms (that’s just JS exec time):

uPlot:

• build: 450ms (75ms js + 375ms “system”)
• toggle last series on/off: 625ms

Chart.js 3.0 alpha:

• build: 900ms
• toggle last series on/off: 3157ms

so about 2x as fast for init (but still without building a spatial index). and much faster for series toggle, even with rebuilding all paths. once i cache the Path2D objects, toggle will be faster still (by a lot).

another question is whether the design should accommodate multi-scale scatter plots. these are not very common, but they do exist: