I'm drawing a line consisting of 5000
separate segments and recording
total elapsed time and the time taken
for each 250 line-segment chunk.
* SVG Path Benchmark:
* http://bl.ocks.org/1296930
* Canvas Path Benchmark:
* http://bl.ocks.org/1297383
Drawing into an HTML5
Canvas can be 40x faster
than using SVG
Slide 6
Slide 6 text
#SPXTFS
$PNQBUJCJMJUZ
Slide 7
Slide 7 text
Can I Use SVG?
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
from blog.infographics.tw, last month
Slide 10
Slide 10 text
.BSLFUJOH
BOE
0UIFS/FFE
Slide 11
Slide 11 text
Server Side D3.js
var d3_document = this.document;
d3.select = function(node) {
var group;
if (typeof node === "string") {
group = [ d3_select(node, d3_document) ];
group.parentNode = d3_document.documentElement;
} else {
group = [ node ];
group.parentNode = d3_documentElement(node);
}
return d3_selection([ group ]);
};
Slide 12
Slide 12 text
Server Side D3.js
npm install d3 jsdom domino
d3.select(jsdom.jsdom().body)
with jsdom
d3.select(
domino.createWindow(“”)
.document.querySelector(“div")
)
with domino
Slide 13
Slide 13 text
Client
Server
render.js
function render(node,data) {
d3.select(node).select("circle")
.data(data).enter().append("circle");
}
module.exports = render;
require(“./render”);
browserify
render = require(“./render.js”);
Slide 14
Slide 14 text
client server
Slide 15
Slide 15 text
client server
500ms delay 2.5MB in size
Slide 16
Slide 16 text
Rasterize SVG
* imagemagick (server)
* inkscape (server)
* phantomjs (server)
* svg2png
* canvas (client)
* canvg
* node-canvg ( server + client)
following approach can be used:
Slide 17
Slide 17 text
Rasterize SVG
svg = new Blob([…], {type:”image/svg…”});
url = window.URL.createObjectURL(svg);
img = new Image()
img.src = url;
ctx = canvas.getContext(“2d”);
ctx.drawImage(img, 0, 0);
result = ctx.toDataURL();
mechanism
Slide 18
Slide 18 text
Rasterize SVG
npm install svg2png
svg2png(“source.svg”,“target.png”,cb);
using svg2png
Slide 19
Slide 19 text
Rasterize SVG
canvg(“canvas”, “ …”);
using canvg
Slide 20
Slide 20 text
Rasterize SVG
require(“canvg”);
require(“canvas”);
canvg(new canvas(), “ …”);
using node-canvg
Slide 21
Slide 21 text
client server svg server png
500ms delay 2.5MB in size
112k in size
10ms loading
Slide 22
Slide 22 text
Client
Server
render.js
require(“./render”);
browserify
render = require(“./render.js”);
SVG
PNG D3.JS + SVG
small
fast
responsive interactive
Slide 23
Slide 23 text
D3.js Canvas
D3
Data DOM
DOM to
Canvas
Canvas
DOM to Canvas
Slide 24
Slide 24 text
D3.js Canvas
DOM to Canvas
http://bl.ocks.org/mbostock/1276463
Slide 25
Slide 25 text
var sketch = d3.select(“body").append("custom:sketch");
d3.ns.prefix.custom = “http://d3canvas.org“;
sketch.append(“custom:circle");
sketch.call(custom);
function custom(selection) {
d3.timer(function() {
for(i=0;i
Slide 26
Slide 26 text
D3.js Canvas
geo.path builtin Support
http://bl.ocks.org/mbostock/3783604 http://bl.ocks.org/mbostock/4183330
Slide 27
Slide 27 text
var context = canvas.node().getContext("2d");
var path = d3.geo.path()
.projection(projection)
.context(context);
path(topojson.feature(us,us.objects.counties));
context.stroke();
Slide 28
Slide 28 text
client
d3js + svg
server
svg
server
png
client
d3js + canvas
500ms 300ms 900ms 10ms
Slide 29
Slide 29 text
SVG CANVAS
Animation Comparison
using Force Layout
http://infographicstw.github.io/d3canvas/d3cmove.html
Slide 30
Slide 30 text
Client
Server
render.js
browserify
SVG
PNG SVG
small
fast
rwd interactive
Canvas
fast
animate
Slide 31
Slide 31 text
Image Based Animation
Slide 32
Slide 32 text
loading.io
Slide 33
Slide 33 text
Image Based Animation
gif.js (client)
node-gif (server)
gifencoder (server)
Slide 34
Slide 34 text
Client
Server
render.js
browserify
SVG
PNG SVG
small
fast
rwd interactive
Canvas
fast
animate
GIF
Preview
GIF
Polyfill
Slide 35
Slide 35 text
Client
Server
render.js
browserify
SVG
PNG SVG
small
fast
rwd interactive
Canvas
fast
animate
GIF
Preview
GIF
Polyfill
PNG
offload
Client
Server
render.js
browserify
SVG
PNG SVG
small
fast
rwd
Canvas
fast
animate
GIF
Preview
GIF
Polyfill
PNG
offload
3D 2D
X3D
Model
X3D
interactive
3D + 2D
interactive
2D 3D
2D + 3D
Slide 42
Slide 42 text
Client
Server
render.js
browserify
SVG
PNG SVG
small
fast
rwd
Canvas
fast
animate
GIF
Preview
GIF
Polyfill
PNG
offload
3D 2D
X3D
Model
X3D
interactive
3D + 2D
interactive
2D 3D
2D + 3D
node-webgl
toDataURL
Canvg node-gif GIF.js
Canvg
toDataURL
custom
element
x3dom.js
Slide 43
Slide 43 text
http://bl.ocks.org/zbryikt/raw/4539556/
3D in SVG
Slide 44
Slide 44 text
http://bl.ocks.org/supereggbert/aff58196188816576af0
3D in SVG
Slide 45
Slide 45 text
var renderSurface=function(){
for(var x=0;x
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
3D in SVG
Binary Space Partition Tree + Painter’s Algorithm
Slide 48
Slide 48 text
2D in HTML
background: #009
width: 20px
height: 20px
border-radius: 50%
width: 20px
height: 20px
border: 10px solid transparent;
width: 0;
height: 0;
border-bottom-color: #009
primitive type
Slide 49
Slide 49 text
3D in HTML
Slide 50
Slide 50 text
Rasterize HTML
Here is a paragraph that requires word wrap
Slide 51
Slide 51 text
http://bl.ocks.org/jebeck/10699411
Slide 52
Slide 52 text
Client
Server
render.js
browserify
SVG
PNG SVG
small
fast
rwd
Canvas
fast
animate
GIF
Preview
GIF
Polyfill
PNG
offload
X3D
Model
X3D
interactive
interactive
HTML
layout
flow
HTML
layout
flow
Slide 53
Slide 53 text
Rasterize D3.js
D3.js
HTML SVG
X3D CUSTOM
CANVAS
SVG
3D
CANVAS
WEBGL CA
NV
AS
CANVAS
DATA
BINDING
INTERFACE
IMPLEMENTATION
CSS 3D
CA
NV
AS
PHANTOMJS or NATIVE PORTING SERVER SIDE
Slide 54
Slide 54 text
D3.js powerful client-side visualisation library
SVG responsive & interactive Graphics DOM
Canvas
fast, small and social-media friendly
browser compatibility, off-load from server
PNG
GIF animation preview in non-browser environment
better browser compatibility thean CSS3D & SMIL
faster interactive rendering
make it possible to rasterise
HTML leverge layout & flow engine
work with css3 animation
X3D directly use prebuilt 3D Model
WRAP UP