Visualization over Web: Tools and Tips－吳泰輝
•
31 likes•7,290 views
Visualization over Web: Tools and Tips－吳泰輝
Recommended
More Related Content
Similar to Visualization over Web: Tools and Tips－吳泰輝
Similar to Visualization over Web: Tools and Tips－吳泰輝 (20)
More from 台灣資料科學年會
More from 台灣資料科學年會 (20)
Recently uploaded
Recently uploaded (20)
Visualization over Web: Tools and Tips－吳泰輝
- 1. Visualization over Web Tools and Tips Kirby
- 3. 本網站最佳瀏覽模式建議為1024 x 768， 建議瀏覽器為IE 6或FireFox2.0以上版本
- 5. 800px
- 6. on iPhone 4s mobile ver.
- 8. Diversity of Android Camp
- 13. Landscape x 10 Portrait x 6 Desktop x 12 Mobile x 4
- 16. Raster vs Vector
- 17. Large in SizeLow Quality
- 18. Small in SizeHigh Quality
- 22. <SVG width=“800px” height=“600px” viewBox=“0 0 400 300” preserveAspectRatio=“xMidYMid”>
- 24. Desktop Mobile
- 30. 檔案 → 指令檔 → ai2html
- 31. ai2html-settings：產⽣生檔案的設定 ai2html-css：在產出檔案中插⼊入額外的 CSS ai2html-js：在產出檔案中插⼊入額外的 JS ai2html-html：在產出檔案中插⼊入額外的 HTML ai2html-text：設定變數，⽅方便在其它⽂文字⽅方塊中引⽤用 * variable-name: value」設定變數 以 <%=variable-name%>使⽤用變數
- 35. 19 charts
- 37. Why Rasterize?
- 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
- 42. ClientServer 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”);
- 43. client server 500ms delay 2.5MB in size
- 44. Rasterize SVG require(“canvg”); require(“canvas”); canvg(new canvas(), “<svg> …</svg>”); using node-canvg
- 45. client server svg server png 500ms delay 2.5MB in size 112k in size 10ms loading
- 46. D3.js Canvas D3Data DOM DOM to Canvas Canvas DOM to Canvas
- 47. client d3js + svg server svg server png client d3js + canvas 500ms 300ms 900ms 10ms
- 48. SVG CANVAS Animation Comparison using Force Layout http://infographicstw.github.io/d3canvas/d3cmove.html
- 53. var obj = { method: ‘feed’, link: ‘http://your.com/viz/?' + keyword, name: keyword + ‘的顏⾊色是 …. !’ picture: yourImageURL } FB.ui(obj, function() {});
- 56. loading.io
- 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
- 67. 0.3% Android 2 in all page views
- 68. 1% IE 7 + 8 in all page views
- 69. 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 )
- 71. 25% traffic from handheld device
- 73. Buy Now Buy Now Buy Now
- 74. Buy NowBuy Now Buy Now tips! Mouseover doesn’t work
- 75. Portrait mode is the common scenario
- 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
- 88. Wrap Up • Consider Different Device / Resolution / Browser • Use Vector / Raster Image on Demand • Leverage the Power of Web Services / API