Rasterize D3.js

d3.js with svg, canvas, generate png, compose gif, work with x3d
3D with svg, html, html to svg to canvas to png.

Transcript

1. D3.js Rasterization
2. Why Rasterize?
3. 1FSGPSNBODF
   0QUJNJ[BUJPO
4. http://www.foundi.info/lab/badneighbor/
5. 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
6. #SPXTFS
   $PNQBUJCJMJUZ
7. Can I Use SVG?
9. from blog.infographics.tw, last month
10. .BSLFUJOH
    BOE
    0UIFS
    /FFE
11. 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 ]); };
12. Server Side D3.js npm install d3 jsdom domino d3.select(jsdom.jsdom().body) with jsdom d3.select(
 domino.createWindow(“<div></div>”) .document.querySelector(“div") ) with domino
13. Client Server render.js function render(node,data) { d3.select(node).select("circle") .data(data).enter().append("circle"); } module.exports = render; require(“./render”); <script src=“bundle.js”> browserify render = require(“./render.js”);
14. client server
15. client server 500ms delay 2.5MB in size
16. Rasterize SVG * imagemagick (server) * inkscape (server) * phantomjs (server) * svg2png * canvas (client) * canvg * node-canvg ( server + client) following approach can be used:
17. 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
18. Rasterize SVG npm install svg2png svg2png(“source.svg”,“target.png”,cb); using svg2png
19. Rasterize SVG <script src=“canvg.js”></script>
 canvg(“canvas”, “<svg> …</svg>”); using canvg
20. Rasterize SVG require(“canvg”); require(“canvas”); canvg(new canvas(), “<svg> …</svg>”); using node-canvg
21. client server svg server png 500ms delay 2.5MB in size 112k in size
 10ms loading
22. Client Server render.js require(“./render”); <script src=“bundle.js”> browserify render = require(“./render.js”); SVG PNG D3.JS + SVG small fast responsive interactive
23. D3.js Canvas D3 Data DOM DOM to Canvas
 Canvas DOM to Canvas
24. D3.js Canvas DOM to Canvas http://bl.ocks.org/mbostock/1276463
25. 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<selection[0].childNodes.length;i++) { draw(selection.childeNodes[i]); }});} function draw(node) { context.arc(node.getAttribute(“x”), …);
 }
26. D3.js Canvas geo.path builtin Support http://bl.ocks.org/mbostock/3783604 http://bl.ocks.org/mbostock/4183330
27. var context = canvas.node().getContext("2d"); var path = d3.geo.path() .projection(projection) .context(context); path(topojson.feature(us,us.objects.counties)); context.stroke();
28. client d3js + svg server svg server png client d3js + canvas 500ms 300ms 900ms 10ms
29. SVG CANVAS Animation Comparison using Force Layout http://infographicstw.github.io/d3canvas/d3cmove.html
30. Client Server render.js browserify SVG PNG SVG small fast rwd interactive Canvas fast animate
31. Image Based Animation
32. loading.io
33. Image Based Animation gif.js (client) node-gif (server) gifencoder (server)
34. Client Server render.js browserify SVG PNG SVG small fast rwd interactive Canvas fast animate GIF Preview GIF Polyfill
35. Client Server render.js browserify SVG PNG SVG small fast rwd interactive Canvas fast animate GIF Preview GIF Polyfill PNG offload
36. D3.js + X3DOM
37. <x3d> <scene> <shape><box></box></shape> </scene> </x3d> d3.select(“x3d scene”).selectAll(“shape”) .data(data) .append(“shape”) .append(“box”) … D3.js + X3DOM
38. data = $(“.x3dom-canvas”)[0].toDataURL(); img =new Image(); img.src = data; D3.js + X3DOM convert to image
39. D3.js + WebGL D3.js SVG X3D Canvas WebGL
40. D3.js + WebGL D3.js SVG X3D Canvas WebGL node-webgl phantomjs node-canvas
41. 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
42. 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
43. http://bl.ocks.org/zbryikt/raw/4539556/ 3D in SVG
44. http://bl.ocks.org/supereggbert/aff58196188816576af0 3D in SVG
45. var renderSurface=function(){ for(var x=0;x<xlength-1;x++){ for(var y=0;y<ylength-1;y++){ var depth=data[x][y][2]+data[x+1][y][2]+ data[x+1][y+1][2]+data[x][y+1][2]; d0.push({path: 'M'+(data[x][y][0]+displayWidth/2).toFixed(10)+
 … +(data[x][y+1][1]+displayHeight/2).toFixed(10)+’Z’, depth: depth, data: originalData[x][y] }); }} d0.sort(function(a, b){return b.depth-a.depth}); var dr=node.selectAll('path').data(d0); dr.enter().append("path"); 3D in SVG note : Rendering order in SVG
47. 3D in SVG Binary Space Partition Tree + Painter’s Algorithm
48. 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
49. 3D in HTML
50. Rasterize HTML <svg>
 <foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml"> <body xmlns="http://www.w3.org/1999/xhtml"> <p>Here is a paragraph that requires word wrap</p> </body> </foreignObject> </svg use SVG foreignObject canvg
51. http://bl.ocks.org/jebeck/10699411
52. 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
53. 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
54. 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
55. Q & A