Show HN: CandyGraph, a flexible, fast-by-default WebGL plotting library

Copying a twitter thread[1] here for more explanation<p>I built CandyGraph a few months ago to scratch an itch and never really got around to talking about it, but it&#x27;s starting to get some use now, so here it is: <a href="https:&#x2F;&#x2F;github.com&#x2F;wwwtyro&#x2F;candygraph" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;wwwtyro&#x2F;candygraph</a><p>I wanted a plotting library that was designed to not only plot a zillion points very fast, but also deal with changes to the presentation of that data at interactive framerates. If I zoomed in on the plot, for example, I wanted the axes to update fast enough that I wouldn&#x27;t have to worry about the hit. If I changed an axis from linear to log, the rendered data would update immediately; I didn&#x27;t want the CPU to churn through a million data points and ship them to the GPU again before it rerendered.<p>So CandyGraph was born. It adopts D3&#x27;s elegant concept of scales, but it implements them on both the CPU and GPU. When data is rendered, the scaling takes place in the vertex shader. Changing a scale wont cause a missed frame.<p>On top of scales sits coordinate systems, also implemented for the CPU and GPU. These combine multiple scales into a system capable of dealing with 2D points. It has cartesian and polar coordinate systems, currently.<p>It renders everything on the GPU, even axes and text. No need to overlay your speedy WebGL plot with an SVG or another canvas for your axis rendering, and no need to take a perf hit for doing so. And of course, the data rendering itself is speedy; it&#x27;s all instanced by default.<p>Finally, CandyGraph comes with a small but growing collection of optimized primitives and higher-level objects to simplify common plotting tasks.<p>If this sounds like it might scratch your itch, check out the tutorial and examples: <a href="https:&#x2F;&#x2F;wwwtyro.github.io&#x2F;candygraph&#x2F;tutorial&#x2F;dist&#x2F;" rel="nofollow">https:&#x2F;&#x2F;wwwtyro.github.io&#x2F;candygraph&#x2F;tutorial&#x2F;dist&#x2F;</a> <a href="https:&#x2F;&#x2F;wwwtyro.github.io&#x2F;candygraph&#x2F;examples&#x2F;dist&#x2F;" rel="nofollow">https:&#x2F;&#x2F;wwwtyro.github.io&#x2F;candygraph&#x2F;examples&#x2F;dist&#x2F;</a><p>CandyGraph is built on top of the embarassingly good regl library. CandyGraph is in major version zero, but it&#x27;s usable (and in use) today.<p>[1]<a href="https:&#x2F;&#x2F;twitter.com&#x2F;wwwtyro&#x2F;status&#x2F;1396500134716973063" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;wwwtyro&#x2F;status&#x2F;1396500134716973063</a>

Awesome project! I&#x27;m curious how you draw lines? I found that drawing nice lines is quite painful in WebGL; I ended up using the &quot;Screen-Space Projected Lines&quot; technique here:<p><a href="https:&#x2F;&#x2F;mattdesl.svbtle.com&#x2F;drawing-lines-is-hard" rel="nofollow">https:&#x2F;&#x2F;mattdesl.svbtle.com&#x2F;drawing-lines-is-hard</a><p>and then using a fragment shader to antialias them.

Maybe a stupid question, since I am not a web dev, but how exactly do you render the text with the GPU? Text rendering ain&#x27;t simple. On top of that, how does that interact with the browser? Can the browser still select the font (size) of the rendered text? Can the user select it for copying?

This looks promising. I just created a visualization of 5M data points with Observable Plot and found it easy to make the plot aesthetically pleasing — there are a lot of examples, the built-in color scales are lovely, etc. But the browser really struggles to filter&#x2F;summarize&#x2F;render the data.<p>On your Examples page, I would recommend making it more clear that these are live, buttery-smooth WebGL canvases. I thought I was looking at screenshots until I accidentally moused over the Health and Wealth of Nations plot. It would be more convincing to, say, put the scatter plot first, animate the points, and show the framerate. Give me a button to add 10^n points at a time and see how it performs.

This does look promising: responsive without a cumbersome license. What I would like to see is a 3d scatter plot that can handle up to 100K points. The view would not be limited to, and I hope I am describing this right, a &quot;static camera angle with the viewed center of mass being rotatable&quot;. I&#x27;d like to be able to fly&#x2F;zoom in to near a dot and click on it for more information. Ideally you could put it on github.io and accept user files of the form : x,y,z coordinates in first 3 columns and a description in the forth. Column 5 could be optional styling information. The user could upload file or paste in the data. When you click on the dot, you get the description. That would be very useful. Users could grab your html+js, hack it up and re-generate an html page with their data hardwired into the HTML&#x2F;js for sending to collaborators on a science project. This could help people share their, for instance, t-sne plots in a very easy manner.

AFAIK this doesn&#x27;t support anything but ASCII. Plotting the graphs in WebGL is cool but rendering your own text is arguably an anti-pattern. Even if you think you&#x27;d only use numbers you&#x27;re still likely to run into issues with dates. For example in Japan in many government documents today is 令和３年５月２４日 and not just 2021&#x2F;5&#x2F;24. Or if you&#x27;re showing months in English you can get away with Jan&#x2F;Feb&#x2F;Mar&#x2F;Apr&#x2F;May etc... but in Japanese you&#x27;d need １月&#x2F;２月&#x2F;３月 etc... I can certainly imagine in 2021 people would want to use various emoji as labels.

The examples are all so blurry :(. (I am on an iPhone X.)

A general question on plotting libraries -- Why is there so much segregation between 2D and 3D capabilities. Most of them do one or the other.

This seems really nice in terms of how it&#x27;s structured, performance capabilities etc., but unfortunately the lack of anti-aliasing (of lines and shapes) and fuzzy-looking text give a first appearance of low quality. (Maybe this just just an issue with how it&#x27;s rendering on my machine?)

This looks like a really cool library!<p>Perhaps a few more examples of realtime interaction&#x2F;animation on large-ish datasets would help show how fast and snappy it can be?

The examples all look pixelated&#x2F;blurry...

may want to detect a fallback. examples show up blank on old device