Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

leeoniya.github.io

Post reply on HN
Print view View original

51–60 of 118 posts

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

#51

Post by fabian2k »

43920 wrote: post #46
fabian2k wrote: post #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…

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!).

That's something I expected, you really don't want to trigger redraws on mouse over. What surprised me was that I couldn't tell the the times where I zoomed in or out from the JS flame chart. Usually that is really obvious, but in this case zooming was so fast that you could hardly see it. And this graph has probably around ~194k data points (388k in the source data, I assume that's x and y). I'm not entirely sure about the number of points here, I'm taking that from the json delivered to the site.

The selection highlight is unusual, I admit. That's something I'd just skip if I were going for high performance.

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

#54

Post by leeoniya »

IshKebab wrote: post #49

That's 26k points. I don't think it's very difficult to render that many points quickly unless you try and use SVG. How long does Dygraphs take?

i don't have dygraphs demo for this, but you can see where it lands on the 166k bench: https://github.com/leeoniya/uPlot#performance

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

#56

Post by oplav »

brockwhittaker wrote: post #11
winrid wrote: post #8

Cool!! I wonder how the performance compares to Highcharts?

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/

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

#58

Post by leeoniya »

augustt wrote: 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)

completely agree.

additionally, it's hard to overstate how impressive modern javascript JITs are, as well as GPUs.

every time i visit a web page that downloads 2MB of js and spins up my CPU fan, i feel ashamed that this is the industry (webdev) where i make my living.

at least with uPlot i show that all this waste is not necessary.

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

#59

Post by leeoniya »

mkchoi212 wrote: post #24

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

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

#60

Post by leeoniya »

fabian2k wrote: post #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…

> I'll have to look at the code later, but I'm curious about where this library is getting the performance from.

https://news.ycombinator.com/item?id=23047156

Post reply on HN