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

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Improving D3 Performance with CANVAS and other Hacks

Semelhante a Improving D3 Performance with CANVAS and other Hacks (20)

Mais de Philip Tellis

Mais de Philip Tellis (20)

Último

Último (20)

Improving D3 Performance with CANVAS and other Hacks