Visualization over Web: Tools and Tips－吳泰輝
31 likes7,318 views
This document discusses techniques for creating responsive visualizations that work across different devices and screen sizes. It suggests using vector formats like SVG for flexibility and raster formats like PNG for performance. It also recommends leveraging web services and APIs to build visualizations and considering the capabilities of different devices, browsers, and resolutions.
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