drio / perfsvgcanvashc Goto Github PK

I wanted to report on what I have accomplished so far. I have the d3 (svg and canvas)
rendering engines working. The canvas engine is currently based on this concept to avoid losing the data binding
capabilities.

If you clone the repo and run it locally, you can change the mode from: single to benchmark.

In the first one, you can render a line chart with any of the engines. In the second one, we render
many datasets with different engines and time the javascript execution. At the end, we report the
results:

To run locally:

$ ./sh/watch.sh # if you want to hack on it (requires ruby filewatcher)
$ ./sh/server.sh

And point your browser to: localhost:9002.

As you can see svg is outperforming the other engines. Keep in mind that we are using the custom
DOM elements hack to keep d3's data binding. That seems to be driving the computation time:

But canvas still outperforms HC:

And I was surprise to see how fast svg is even with 25k data points:

Next, I want to try canvas without the custom elements hack to see how it performs.