Question: Create Alternate C3 Rendering Pipeline Using Raster Canvas

[cnatale]

I'm working on a project that requires generating a lot of data points (100k+). Our current implementation uses C3. SVG is clearly the bottleneck, so we are exploring how best to replace the SVG rendering with canvas.

After looking through C3's source, it seems like the generation of data points in SVG format using generateDraw[name of graph type], and the actual rendering with redraw[name of graph type] methods are modular in a way that would lend itself to adding an alternate raster Canvas methods. Mouse events would need to be handled differently, but this doesn't seem insurmountable.

My question is, can anyone with more experience in the code base advise if this is a foolhardy approach for reasons I'm not considering? If I make these additions, would this be something people would be interested for me to refactor to the point where it's clean enough to offer as a pull request? Thanks.

[aendra-rininsland]

Wow, interesting. C3 uses D3 for everything, which is entirely SVG. So you'd likely need a library to abstract the rendering in a way similar to D3 (does such a thing exist?).

I admittedly have zero experience in Canvas, so I'm not very helpful, but that's a crazy-cool idea. I wonder if you could render SVG in a virtual DOM à la React and then use Canvg to convert to Canvas like SVG Crowbar does, and whether this would be any better for performance?

[aendra-rininsland]

Actually, D3 can apparently be used with Canvas. Who'd've thunk? https://bocoup.com/weblog/d3js-and-canvas/

[cnatale]

Yeah, D3 doesn't inherently require using SVG. It's a misconception. It does have SVG helper methods, but the actual generation of SVG elements always occurs within the enter() handlers and whatnot instead of the core library.

EDIT: Actually it looks like I'm wrong here about how enter() works. I assumed it was building its own model, but all the info I can find suggests it is just using a list of html elements as its model. The first method mentioned in the bocoup article would work, but it's a pretty big divergence since all of the current methods are using the enter() approach to update the model/elements.

[cnatale]

FYI, I've implemented a subset of C3's functionality using Canvas rendering, and created a pull request: https://github.com/cnatale/c3

More info is available here: #1436

Performance improvements have been very impressive. My company's QA is still running tests, but we're seeing an increase in the number of data points a graph can display of anywhere from a factor of 10-100. Raster rendering also greatly cuts down on memory footprint, since the graph doesn't need to keep around all the SVG elements representing graph segments, or the vertical strips used for mouseover detection.

Note that animations are not currently implemented (although hover highlighting is), so if you need animated transitions definitely stick with the SVG version for now. Also this pull request is for version 0.4.8, which is a few versions back from head as of the time of writing. The only file in the fork with the canvas update is the actual c3.js, not the other compressed c3 files in the directory.

[buremba]

💯

[michaelrodov]

looks like the issue is closed