Hacker News new | past | comments | ask | show | jobs | submit login

Super cool! It would be great if you could provide some insight into how you built this and the kind of tricks you had to use to make this possible. Looking forward to a blog post in the future :)



a few things:

- the data is flat arrays of numbers

- there is no per-datapoint memory allocation beyond whatever is necessary for the browser to construct the canvas Path2D object. this keeps the memory pressure low and the GC nearly silent.

- the amount of draw commands is reduced by accumulating the min/max data values per pixel

- uPlot does not generate axis ticks by walking the data. it only uses min/max of the x and y ranges and finds the divisions from that.

- there is no mass-creation of Date objects, data is kept in timestamp format except when hovered.

- the date/time formatting is done by pre-compiling templates and not re-parsing them all the time.

- the cursor interaction uses a binary search over the x array


another one i forgot

- drawing at exact aligned pixel boundaries to avoid or minimize antialiasing

this makes uPlot charts a bit rougher looking, but the perf impact is quite large.


How much of an impact does this have?

I prefer the look of things snapped to pixels; I didn't realize it also speed things up!


hey adam :)

it's highly dependent on what's actually drawn. i regressed it by accident and didnt notice a huge difference until i randomly opened the stress test (which is also densely packed so probably a worst case for AA)[1]. it went up by a factor of 2-4. cant remember exactly.

[1] https://github.com/leeoniya/uPlot/blob/master/bench/uPlot-60...




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: