Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rasterize D3.js

tkirby
July 16, 2015

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.

tkirby

July 16, 2015
Tweet

More Decks by tkirby

Other Decks in Technology

Transcript

  1. 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
  2. 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 ]); };
  3. 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
  4. 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”);
  5. Rasterize SVG * imagemagick (server) * inkscape (server) * phantomjs

    (server) * svg2png * canvas (client) * canvg * node-canvg ( server + client) following approach can be used:
  6. 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
  7. 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”), …);
 }
  8. client d3js + svg server svg server png client d3js

    + canvas 500ms 300ms 900ms 10ms
  9. Client Server render.js browserify SVG PNG SVG small fast rwd

    interactive Canvas fast animate GIF Preview GIF Polyfill
  10. Client Server render.js browserify SVG PNG SVG small fast rwd

    interactive Canvas fast animate GIF Preview GIF Polyfill PNG offload
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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