tancorko / svg-time-series Goto Github PK

D3.js-based SVG time series charts done right to reach 60 FPS. Much much faster pan and zoom than other charts, whether canvas- or SVG-based.

• demo 1: 1 grid, 2 series of 1070 points
• demo 2: 5 grids, 10 series of 1070 points

Demo 1 reaches 60 FPS on desktops, recent iPhones and top Android phones. Demo 2 shows 60 FPS on desktops, about 24 FPS on iPhone and about 3 FPS on old and slow LG D90.

In comparison, dygraphs.org library basically never reaches 60 fps. Try to pan their demo at the home page by holding shift. Note that the demos above use the same NY vs SF temperature dataset.

D3.js seem slow: stock D3 panning. But it turns out the SVG rasterization is not the bottleneck. Only 2 issues had to be fixed in that demo to reach 60 fps:

• avoid extra attribute setting on SVG lines of the grid during pan and zoom (partially already in HEAD of d3-axis)
• draw in d3.timeout() instead of d3.zoom(), that is, avoid drawing more often than screen refreshes

In the demos above, SVG DOM manipulations during grid updates seem to consume at least 20% of drawing time, so further optimization work is possible. Keep watching!

• No legacy
• Very basic features
• Rasterizer-side coordinate transformations (No JS multiplication loops)
• A Range Minimum Query index for O(log(N)) autoscale (No JS minmax loops)
• No drawing or heavy CPU work in mouse handlers
• Don't change anything more often than once per screen refresh
• Only calculate and apply coordinate transformations in requestAnimationFrame
• Take care of requestAnimationFrame not firing in background. Don't redraw when in background to save battery.

1. Install MSVS 2015 community (make sure you have Update 3 installed)
2. Install Microsoft ASP.NET and Web Tools (if it has not been installed with MSVS 2015)
3. Install latest TypeScript tools for MSVS 2015 2.x.x
4. Install nodejs (npm will be also installed)
5. Open project in VS -> package.json -> Right click -> Restore dependencies
6. Build project

1. Install npm (node.js is installed as a dependency)
2. In project root npm install to install our dependencies (many of them, mostly d3, typescript and build tools)
3. npm run tsify-demo2. This step creates demo2/bundle.js

Stock axes panning example and:

• No drawing or heavy CPU work in mouse handlers
• Don't change anything more often than once per screen refresh

d3-axes grad and performance improvements of axis not accepted by the upstream

Stock d3 phyllotaxis pan-zoom example plus:

• No drawing or heavy CPU work in mouse handlers
• Don't change anything more often than once per screen refresh