40. 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
41. 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
58. 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
59. Rasterize D3.js
D3.js
HTML SVG
X3D CUSTOM
CANVAS
SVG
3D
CANVAS
WEBGL CA
NV
ASCANVAS
DATA
BINDING
INTERFACE
IMPLEMENTATION
CSS 3DCA
NV
AS
PHANTOMJS or NATIVE PORTING SERVER SIDE
60. 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
Different Purpose
80. ON BROADWAY: Represent our cities in new ways.
http://www.on-broadway.nyc/app/#http://www.fastcodesign.com/3043091/infographic-of-the-day/massive-data-visualization-brings-nycs-busiest-street-to-life#7