Explore the use of canvas for some drawing instead of svg

[bhousel]

D3 v4 now has better support for rendering to canvas.
We should try to move some of our svg elements to canvas (e.g. filled areas) to see if we get a performance boost.

cc @batpad @kepta @geohacker

[bhousel]

For inspiration:

https://bocoup.com/blog/smoothly-animate-thousands-of-points-with-html5-canvas-and-d3

https://medium.freecodecamp.com/d3-and-canvas-in-3-steps-8505c8b27444

[Anton-Latukha]

Maybe it is possible to go straight to regl.

Quote from guy from first link you mentioned:

Using this approach with canvas can only get us so far. As you exceed 5,000 points and approach closer to 10,000 it is common to see degradation in performance. If you really need to animate that many points flying around, your best bet is to turn to WebGL and have shaders do the work for you. The regl library provides a nice interface to working with shaders and can be used effectively for this purpose, but that’s a topic for another day!

UPDATE: That blog post has now been written. Check out how to animate 100,000 points in regl for details.

Link to this his post: https://peterbeshai.com/beautifully-animate-points-with-webgl-and-regl.html

It looks realistically. Everything on Earth supports WebGL now.

[Anton-Latukha]

It looks like project matured to truly stable form year ago (graph)[https://github.com/regl-project/regl/graphs/contributors].

It may look like it died-out. But no, - it's maturity of Web-based library.
Main developer reviews PRs and bugreports. And many issues/PRs closed due to functionality already present. Or discussions goes on. PRs get merged.
He responds to messages: regl-project/regl#424, guy there says that it uses it in serious production and it is good for him.

But looks like main developer not eager to write new code. Maybe he busy, or life.
He reviews, merges, writes responses.

[Anton-Latukha]

HTML5Test.com results

[Anton-Latukha]

There is a lot of superb WebGL choices:
(https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc)

[bhousel]

d3-jetpack has a thing to help with sharing coordinate systems between svg and canvas:
https://bl.ocks.org/1wheel/f9b9909f10ed0f01780c5338ad38bd50