Live data from Hacker News

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

leeoniya.github.io

31–40 of 118 posts

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

#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 legend, but that's a small price to pay for this level of performance.

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

#32
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

Kudos for directing folks to other projects if uPlot isn't fast enough for them. Every developer should take the time to write out appropriate and inappropriate use-cases on the readme.

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

#33

If you wanted to render these on a regular basis, WebGL is fairly straightforward, and works really well for this simple sort of rendering. You could do this with one polygon and a small fragment shader (treat the data as a texture, and use SDF to draw the line and fills), or use the actual geometry (render as a triangle strip; and separate the line if you want to do more interesting stuff in your fragment shader).

[deleted]

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

#35

If you wanted to render these on a regular basis, WebGL is fairly straightforward, and works really well for this simple sort of rendering. You could do this with one polygon and a small fragment shader (treat the data as a texture, and use SDF to draw the line and fills), or use the actual geometry (render as a triangle strip; and separate the line if you want to do more interesting stuff in your fragment shader).

I probably wouldn't even generate an SDF, instead read the data directly from a 1D texture and fill the anti-aliased line directly in the fragment shader.

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

#36
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, but even a simple prototype just drawing a few tens of thousands to a hundred thousand lines using canvas was slower than this for me (subjectively).

I'll have to look at the code later, but I'm curious about where this library is getting the performance from. Before I saw this I would have said you can't do this at this speed without using previously downsampled version of the data points, I'm not entirely sure now.

I'm still looking at the performance tab in the browser dev tools and how impressively empty the main Javascript usage plot is.

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

#37
post #34

Looks really nice. I was slightly disappointed when I zoomed in as I expected 3 years of data in 150ms increments (600 million measurements) but that's probably not possible

Assuming there is some culling, I’ve found myself somewhat obsessed about the methods of dataset-culling. If there’s a single outlier, for example, some methods would skip it, where it should really be highlighted.

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

#38
Slick! I too felt that many libraries were not slick/fast enough, but I eventually ended up using react-stockcharts (in canvas mode) for my use case and was quite satisfied with its performance.

Could you compare your performance against this one if possible?

https://github.com/rrag/react-stockcharts

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

#39

I find it curious that the volume of users are similar for day of the month regardless of year. For instance the first of the month is not always the same day of the week.

Eyeballing the data, there doesn't seem to be a strong weekday effect. Not sure if this is real data (human activity data usually show weekday effects).

If there was a very pronounced weekday effect, a quick hack is to use a 364-day instead of full-year offset for comparison.

Post reply on HN