Improving D3 Performance with CANVAS and other Hacks

I M P R O V I N G D 3 P E R F O R M A N C E W I T H
C A N VA S A N D O T H E R H A C K S
WebTechCon 2015
2015-10-27

Philip Tellis
@bluesmoon
https://github.com/lognormal/boomerang
http://www.soasta.com/mpulse/

D 3 I S …
• A JavaScript library that maps Data to DOM Nodes
• Extended via layouts & plugins for rich data
visualisations
• You still need to write code to draw things
• Fast on its own, but you can easily make it sluggish
• BSD Licensed — http://d3js.org/

H T T P S : / / G I T H U B . C O M / M B O S T O C K / D 3 /
W I K I / G A L L E RY
G E T S TA R T E D W I T H D 3

B A S I C D 3 T U T O R I A L
• Adding nodes
• Mapping data to nodes
• Data Driven Documents
• Examples 01-06 at http://soasta.github.io/improving-
d3-performance/d3/

A N I M AT E D D 3 C H A R T S
• Force Directed Layout
• Reacting to user interaction
• Reacting to changing data

F O R C E D I R E C T E D L AY O U T
U S I N G P H Y S I C S

F O R C E D I R E C T E D L AY O U T
• http://bl.ocks.org/mbostock/4062045
• Took basic Force Directed Layout and added
enhancements:
• Convex hulls
• Labels
• Mouseovers
• Variable sized points

F O R C E D I R E C T E D L AY O U T —
P R O B L E M S
• Rendering is O(n) based on number of SVG nodes
• Calculations are O(n2
) based on number of links
• Drawing the hull is expensive as nodes move around a
lot

S O L U T I O N S
• Reduce number of links by using a Minimum Spanning
Tree
• Identify clusters and only link one node from each
cluster
• Visually reduce nodes within the cluster using
approximation
• Add decorators later as the animation stabilizes

A D D I T I O N A L O P T I O N S
• We could use CANVAS to get rid of SVG nodes
• Create subgroups within each group to further reduce
links
• Get rid of some of our visual enhancements

E D G E B U N D L E D L AY O U T
U S E R I N T E R A C T I O N

E D G E B U N D L E D L AY O U T
• http://bl.ocks.org/mbostock/7607999
• We added many more links
• Links colored based on performance
• Links sized based on volume of data flow
• Mouseover should highlight connected links
• Nodes sized based on volume within that node

E D G E B U N D L E D L AY O U T — P R O B L E M S
• Default behaviour is to iterate through every link on
mouseover and change colour — this is slooooow!
• Using CSS class to change colour causes major re-
render
• Quickly cycling through nodes has noticeable lag

E D G E B U N D L E D L AY O U T — S O L U T I O N S
• First we tried to not iterate, just use CSS class
cascades
• This was a trade off because we ended up adding a
large number of classes, two per node and one per
link

• The second attempt was to use CANVAS to draw
everything
• The problem here is that CANVAS is not great for text,
and mouseovers no longer worked

• The third attempt was to use CANVAS to draw links
and SVG for nodes
• The biggest problem was to make sure they
overlapped perfectly, ie, it was a small problem.

C A N VA S D O E S N O T
S U P P O R T B E Z I E R C U R V E S ! ! !
E X C E P T …

D 3 W I T H C A N VA S
• There are some great examples online…
• https://bocoup.com/weblog/d3js-and-canvas
• https://gist.github.com/mbostock/1276463
• But not quite what we wanted

D 3 W I T H C A N VA S
• Create a Custom XML NameSpace
• Map dummy nodes from this namespace for each link
• Each dummy node contains the SVG path required to
draw the curve as well as other attributes
• After all nodes have been mapped, call a renderer to
convert this to CANVAS

d3.ns.prefix.custom = "https://foo-bar.com/edge_bundling.html";
d3.select("body").append("custom:sketch")
.classed("link-container", true);
…
linkBinding.enter()
.append("custom:path")
.attr("lineCap", "round")
.attr("lineJoin", "round")
.attr("lineWidth", .2)
.attr("opacity", 0.1)
.attr("selected-opacity", 0.3);
linkBinding
.attr("selected-lineWidth", function(d) { return
weightScale(d.weight); })
.attr("d", function(d) { return line(d.path); });
C R E AT I N G N O D E S

var pathAttrs =
["strokeStyle", "lineCap", "lineJoin", "lineWidth"];
ctx.beginPath();
pathAttrs.forEach(function(a) {
var val = node.attr(selected + a) || node.attr(a);
if(a === "strokeStyle") {
var color = d3.rgb(val);
val = "rgba(" +
color.r + "," +
color.g + "," +
color.b + "," +
node.attr(selected + "opacity") + ")";
}
ctx[a] = val;
});
A P P LY I N G S T Y L E S

var path = node.attr("d"), m;
while((m = path.match(/^ *([MLCQ])([d.,e-]+) */))) {
var cmd = m[1];
var coords = m[2].split(",").map(pathToCoords);
path = path.replace(/^ *([MLCQ])([d.,e-]+) */, "");
switch(cmd) {
case "M":
ctx.moveTo(coords[0], coords[1]);
break;
case "L":
ctx.lineTo(coords[0], coords[1]);
break;
case "C":
ctx.bezierCurveTo(coords[0], coords[1], coords[2], coords[3],
coords[4], coords[5]);
break;
case "Q":
ctx.quadraticCurveTo(coords[0], coords[1],
coords[2], coords[3]);
break;
}
}
D R A W I N G C U R V E S

B U T I T S T I L L WA S N ’ T
FA S T E N O U G H !

E N H A N C E M E N T S
• Use 2 CANVAS elements,
• one to hold the background (ie, all links),
• the second to show the currently selected links
• Change opacity on the background to darken it
• If mouse pointer returns to last selected node, just
redisplay

S U M M A RY
• Number of DOM nodes is very significant
• Reduce calculations on in-memory objects
• Show approximate data, based on available pixels and
power
• Use CANVAS when mouse interaction is not required
• Cache repeated states rather than redrawing them

Improving D3 Performance with CANVAS and other Hacks

More Related Content

Similar to Improving D3 Performance with CANVAS and other Hacks (20)

More from Philip Tellis (20)

Recently uploaded (20)

Improving D3 Performance with CANVAS and other Hacks