Live data from Hacker News

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

leeoniya.github.io

61–70 of 118 posts

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

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

This is fantastic and may solve a real problem for me. Thank you so much, and thank you for the MIT license!

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

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

The 166k benchmark is ridiculously snappy. Could you shave off a few more ms by inlining the JSON as a data block?

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

#63
post #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.

Yeah, I meant more in the abstract sense, rather than "create a two-dimensional texture of the distance field", which as you point out would be unnecessary.

You could probably sample all the 1D textures in one pass, and draw all the lines and fills there. One additional nice side effect of this is that you can easily have sequences at different resolutions.

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

#64
post #27
post #17

Earlier quoted context omitted.

Here's a Dash app that use Dask & Datashader for fast aggregations on +40M rows: https://dash-gallery.plotly.host/dash-world-cell-towers The source code, which can be used as a Dash + Dask boilerplate, is here: https://github.com/plotly/dash-world-cell-towers Feel free to ask questions at community.plot.ly

I don't think that actually plots the 40M points, just aggregates them in Python and plots a small section of that data on the website?

I believe so. An optimization of Datashader is that it _doesn't_ plot all the points, but rather optimizes which points actually influence pixel values.

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

#65
post #56

Earlier quoted context omitted.

For a dataset like this, Highcharts would be slower for sure since it will create DOM SVG components for each of the points. (which this is built with) is much quicker at presenting tons and tons of data points like this.

Highcharts has a Boost module which uses WebGL. Here's a sample chart with 1,000,000 points: https://jsfiddle.net/5bvLgs5w/1/

the bench code uses the boost module. so it's apples-to-apples:

https://github.com/leeoniya/uPlot/blob/master/bench/Highchar...

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

#67
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.

https://knowledge.ni.com/KnowledgeArticleDetails?id=kA00Z000... is a good algorithm to use to keep peaks. At a maximum you need 4x the chart width data points. In practice, you can easily reduce that. I've implemented the algorithm before and it can be done in linear time.

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

#69
post #52

I feel like in general people underestimate just how fast computers are. Crazy to hear about libraries that choke on a couple thousand points when compared to https://hackernoon.com/drawing-2-7-billion-points-in-10s-ecc... (for instance)

Yeah. This is still tens of thousands of instructions per point.

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

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

The 166k benchmark is ridiculously snappy. Could you shave off a few more ms by inlining the JSON as a data block?

probably, but something about diminishing returns...:p
Post reply on HN