Rasterize D3.js

7f7cce675da85bf8807da9f8d0c3a955?s=47 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.

7f7cce675da85bf8807da9f8d0c3a955?s=128

tkirby

July 16, 2015
Tweet

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?

  8. None
  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
  46. None
  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