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
Show HN: Plotting 3 years of hourly data in 150ms
61–70 of 118 posts
Re: Show HN: Plotting 3 years of hourly data in 150ms
#62Unfortunately, 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
Re: Show HN: Plotting 3 years of hourly data in 150ms
#63If 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.
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
#64Earlier 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?
Re: Show HN: Plotting 3 years of hourly data in 150ms
#65Earlier 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/
https://github.com/leeoniya/uPlot/blob/master/bench/Highchar...
Re: Show HN: Plotting 3 years of hourly data in 150ms
#66Re: Show HN: Plotting 3 years of hourly data in 150ms
#67Looks 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
#68Re: Show HN: Plotting 3 years of hourly data in 150ms
#69I 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)
Re: Show HN: Plotting 3 years of hourly data in 150ms
#70Unfortunately, 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?