Live data from Hacker News

Show HN: Plotting 3 years of hourly data in 150ms

leeoniya.github.io

41–50 of 118 posts

Re: Show HN: Plotting 3 years of hourly data in 150ms

#41
post #2

Unfortunately, I have to use Google Analytics and Google Ads at work every day, and these UIs have absolutely terrible performance :( A small part of the problem is drawing the trend charts. So I decided to make uPlot [1] to see what was really possible. [1] https://github.com/leeoniya/uPlot

I like this a lot! Reminds me of dygraphs, and then I saw it in that in the acknowledgements :)

Re: Show HN: Plotting 3 years of hourly data in 150ms

#45
Minor suggestion: not really a bug, but inconvenient UX. When I move start the selection and I move my mouse outside the chart it stops selecting it. If you added the mouse movement listeners to the document/body then when I move my mouse outside the chart it would keep working.

Great job btw, really instant.

Re: Show HN: Plotting 3 years of hourly data in 150ms

#46

The 150ms benchmark in the title is really selling this short, the performance is very impressive. The 150ms seem to refer to the time it takes to initialize the graph, and with a hot cache that is more like 50ms for me here. Redrawing seems much, much faster. I have done some visualization with WebGL because I couldn't get it fast enough with just drawing lines. That was a while ago so I'm not sure about the details…

It looks like the mouse lines and the selection highlight are just partially-transparent divs stacked on top of the canvas that get moved around, so nothing actually gets redrawn unless the date range changes (which is a pretty clever approach!).

Re: Show HN: Plotting 3 years of hourly data in 150ms

#47
post #31

That looks amazing, nice job! I was trying to create a seb dashboard with several graphs each with a few hundred data points recently. None of the libraries felt "snappy" on a mobile device in terms of load time or responsivity. I ended up abandoning the proejct because of that, but if only I knew about this library at the time... The only thing I wish µPlot had is support for tooltips rather than numbers in the lege…

there are a couple tooltip demos here:

https://leeoniya.github.io/uPlot/demos/tooltips.html

https://leeoniya.github.io/uPlot/demos/cursor-tooltip.html

Re: Show HN: Plotting 3 years of hourly data in 150ms

#48

The 150ms benchmark in the title is really selling this short, the performance is very impressive. The 150ms seem to refer to the time it takes to initialize the graph, and with a hot cache that is more like 50ms for me here. Redrawing seems much, much faster. I have done some visualization with WebGL because I couldn't get it fast enough with just drawing lines. That was a while ago so I'm not sure about the details…

[deleted]

Re: Show HN: Plotting 3 years of hourly data in 150ms

#50
post #46

The 150ms benchmark in the title is really selling this short, the performance is very impressive. The 150ms seem to refer to the time it takes to initialize the graph, and with a hot cache that is more like 50ms for me here. Redrawing seems much, much faster. I have done some visualization with WebGL because I couldn't get it fast enough with just drawing lines. That was a while ago so I'm not sure about the details…

It looks like the mouse lines and the selection highlight are just partially-transparent divs stacked on top of the canvas that get moved around, so nothing actually gets redrawn unless the date range changes (which is a pretty clever approach!).

but really tricky to align correctly at different screen pixel densities and rounding errors. it's still not pixel-perfect, but i decided it was good enough.
Post reply on HN