visualization over web: tools and tips-吳泰輝
Post on 15-Apr-2017
5.996 views
TRANSCRIPT
http://www.nytimes.com/interactive/2015/06/17/world/middleeast/map-isis-attacks-around-the-world.html?smid=tw-nytimes&_r=1
ai2html-settings:產⽣生檔案的設定 ai2html-css:在產出檔案中插⼊入額外的 CSS ai2html-js:在產出檔案中插⼊入額外的 JS ai2html-html:在產出檔案中插⼊入額外的 HTML ai2html-text:設定變數,⽅方便在其它⽂文字⽅方塊中引⽤用
* variable-name: value」設定變數 以 <%=variable-name%>使⽤用變數
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 HTML5Canvas can be 40x fasterthan using SVG
Server Side D3.jsnpm install d3 jsdom domino
d3.select(jsdom.jsdom().body)
with jsdom
d3.select( domino.createWindow(“<div></div>”) .document.querySelector(“div") )
with domino
ClientServer
render.jsfunction 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”);
Rasterize SVG
require(“canvg”); require(“canvas”);
canvg(new canvas(), “<svg> …</svg>”);
using node-canvg
SVG CANVAS
Animation Comparisonusing Force Layout
http://infographicstw.github.io/d3canvas/d3cmove.html
var obj = { method: ‘feed’, link: ‘http://your.com/viz/?' + keyword, name: keyword + ‘的顏⾊色是 …. !’ picture: yourImageURL } FB.ui(obj, function() {});
<x3d> <scene> <shape><box></box></shape> </scene> </x3d>
d3.select(“x3d scene”).selectAll(“shape”) .data(data) .append(“shape”) .append(“box”) …
D3.js + X3DOM
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
Rasterize D3.js
D3.js
HTML SVGX3D CUSTOM
CANVASSVG
3D
CANVAS
WEBGL CANVASCANVAS
DATA BINDING
INTERFACE
IMPLEMENTATION
CSS 3DCANVAS
PHANTOMJS or NATIVE PORTING SERVER SIDE
D3.js powerful client-side visualisation library
SVG responsive & interactive Graphics DOM
Canvas
fast, small and social-media friendly browser compatibility, off-load from serverPNG
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
1%(IE) + 0.3%(Android2)
4 people in 300
can’t read SVG format
~
it’s about 235 people in all visitors
( lost 2 customers with 1% conversion rate )
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
http://www.clicktorelease.com/code/streetViewReflectionMapping/