visualization over web: tools and tips－吳泰輝
Post on 21-Apr-2017
5.989 views
TRANSCRIPT
Visualization over WebTools and Tips
Kirby
Responsive Visualization
Responsive Visualization RWD
inData Viz
本網站最佳瀏覽模式建議為1024 x 768，建議瀏覽器為IE 6或FireFox2.0以上版本
1920px
1024px
800px
on iPhone 4s mobile ver.
Diversity of Android Camp
Landscape x 10Portrait x 6
Desktop x 12
Mobile x 4
Raster vs Vector
Large in SizeLow Quality
Small in SizeHigh Quality
width
height
(x1,y1)
(x2,y2)
<svg width=“w” height=“h” viewBox=“x1 y1 x2 y1”>
preserveAspectRatio
xMin xMid xMax
yMinyMid
yMax
<SVG width=“800px” height=“600px” viewBox=“0 0 400 300” preserveAspectRatio=“xMidYMid”>
http://www.nytimes.com/interactive/2015/06/17/world/middleeast/map-isis-attacks-around-the-world.html?smid=tw-nytimes&_r=1
Desktop Mobile
ai2html.jsx → Presets\zh_TW\指令檔
檔案 → 指令檔 → ai2html
ai2html-settings：產⽣生檔案的設定 ai2html-css：在產出檔案中插⼊入額外的 CSS ai2html-js：在產出檔案中插⼊入額外的 JS ai2html-html：在產出檔案中插⼊入額外的 HTML ai2html-text：設定變數，⽅方便在其它⽂文字⽅方塊中引⽤用
* variable-name: value」設定變數 以 <%=variable-name%>使⽤用變數
19 charts
WhyRasterize?
Performance Optimization
why rasterize?
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”);
client server
500ms delay 2.5MB in size
Rasterize SVG
require(“canvg”); require(“canvas”);
canvg(new canvas(), “<svg> …</svg>”);
using node-canvg
client server svg server png
500ms delay 2.5MB in size 112k in size10ms loading
D3.js Canvas
D3Data DOM
DOM to Canvas
Canvas
DOM to Canvas
clientd3js + svg
serversvg
serverpng
clientd3js + canvas
500ms 300ms 900ms 10ms
SVG CANVAS
Animation Comparisonusing Force Layout
http://infographicstw.github.io/d3canvas/d3cmove.html
Marketing and
Social Media
why rasterize?
var obj = { method: ‘feed’, link: ‘http://your.com/viz/?' + keyword, name: keyword + ‘的顏⾊色是 …. !’ picture: yourImageURL } FB.ui(obj, function() {});
Applications
why rasterize?
Image Based Animation
loading.io
<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
Compatibility
why rasterize?
0.3% Android 2 in all page views
1% IE 7 + 8 in all page views
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 )
25% traffic from handheld device
PrecisionGestureButtonsHoverCursor
High LowEasyHard
3+ 1NoYes
Yes No
Buy Now Buy Now Buy Now
Buy NowBuy Now Buy Now
tips!
Mouseover doesn’t work
Portrait mode is the common scenario
Performance and Bandwidth
Visualization withWeb Resources
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/
https://www.biodigital.com/developers
http://graphics.wsj.com/3d-nasdaq/
http://shinydemos.com/facekat/
http://bignerdranch.github.io/music-frequency-d3/
http://dinahmoelabs.com/plink
Wrap Up
• Consider Different Device / Resolution / Browser
• Use Vector / Raster Image on Demand
• Leverage the Power of Web Services / API