Visualization over Web

share about thing to take care when we do visualization over web

Transcript

1. Visualization over Web Tools and Tips Kirby
2. Why Web?
3. Cross Platform
4. Cross Device
5. Interactive http://zbryikt.github.io/visualize/dorling/
6. Social-Friendly
7. Active Community http://zbryikt.github.io/visualize/banana/
8. How Web?
9. Responsive
 Visualization Responsive
 Visualization RWD in Data Viz
10. 本網站最佳瀏覽模式建議為1024 x 768， 建議瀏覽器為IE 6或FireFox2.0以上版本
11. 1920px 1024px
12. 800px
13. on iPhone 4s mobile ver.
15. Diversity of Android Camp
20. Landscape x 10 Portrait x 6 Desktop x 12 Mobile x 4
23. 1. Use Percentage div { width: 800px; font-size: 15px; } div { width: 80%; font-size: 1.2em; }
24. Israel Says It Did Not Kill Palestinians at U.N. School …more Israel Says It Did Not Kill Palestinians at U.N. School …more Israel Says It Did Not Kill Palestinians at U.N. School …more Israel Says It Did Not Kill Palestinians at U.N. School …more
25. Buy
 Now Pricing About Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
26. 2. Use CSS3 Media Query 1024px screen width 800px 480px
27. Buy Now Pricing About Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Buy Price About
28. #logo { background: url(/logo.png) } @media (max-width:800px) { #logo { background: url(/logo@800.png) } }
29. 3. Flexible Images
30. Israel Says It Did Not Kill Palestinians at U.N. School …more Israel Says It Did Not Kill Palestinians at U.N. School …more Israel Says It Did Not Kill Palestinians at U.N. School …more Israel Says It Did Not Kill Palestinians at U.N. School …more …more …more
31. 4. Raster vsVector
32. Large in Size Low Quality
33. Small in Size High Quality
34. width height (x1,y1) (x2,y2) <svg width=“w” height=“h” viewBox=“x1 y1 x2 y1”>
36. preserveAspectRatio xMin xMid xMax yMin yMid yMax
37. <SVG width=“800px” height=“600px” viewBox=“0 0 400 300” preserveAspectRatio=“xMidYMid”>
38. http://www.nytimes.com/interactive/2015/06/17/world/middleeast/map-isis-attacks-around-the-world.html?smid=tw-nytimes&_r=1
39. Desktop Mobile
44. ai2html.jsx → Presets\zh_TW\指令檔
45. 檔案 → 指令檔 → ai2html
47. ai2html-settings：產⽣生檔案的設定 ai2html-css：在產出檔案中插⼊入額外的 CSS ai2html-js：在產出檔案中插⼊入額外的 JS ai2html-html：在產出檔案中插⼊入額外的 HTML ai2html-text：設定變數，⽅方便在其它⽂文字⽅方塊中引⽤用 * variable-name: value」設定變數
 以 <%=variable-name%>使⽤用變數
52. 19 charts
54. Rasterization still helps
55. 1FSGPSNBODF
    0QUJNJ[BUJPO why rasterize?
56. http://www.foundi.info/lab/badneighbor/
57. 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
58. SVG CANVAS Animation Comparison using Force Layout http://infographicstw.github.io/d3canvas/d3cmove.html
59. 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
60. Rasterize SVG require(“canvg”); require(“canvas”); canvg(new canvas(), “<svg> …</svg>”); using node-canvg
61. client server svg server png 500ms delay 2.5MB in size 112k in size
 10ms loading
62. .BSLFUJOH
    BOE
    4PDJBM
    .FEJB why rasterize?
66. var obj = { method: ‘feed’, link: ‘http://your.com/viz/?' + keyword, name: keyword + ‘的顏⾊色是 …. !’ picture: yourImageURL } FB.ui(obj, function() {});
67. $PNQBUJCJMJUZ why rasterize?
73. 0.3% Android 2 in all page views
74. 1% IE 7 + 8 in all page views
75. 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 )
77. Rasterize D3.js D3.js HTML SVG X3D CUSTOM CANVAS SVG 3D CANVAS WEBGL CA NV AS CANVAS DATA
 BINDING INTERFACE IMPLEMENTATION CSS 3D CA NV AS PHANTOMJS or NATIVE PORTING SERVER SIDE
78. 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
79. $SPTT
    %FWJDF take care of
80. 25% traffic from handheld device
81. Precision Gesture Buttons Hover Cursor High Low Easy Hard 3+ 1 No Yes Yes No
82. Buy Now Buy Now Buy Now
83. Buy Now Buy Now Buy Now tips! Mouseover doesn’t work
84. Portrait mode is the common scenario
85. Performance and Bandwidth
86. Recap Why Web? Cross Platform / Device Interactive Social Friendly Rich APIs Active Community How Web? Responsive Vectorize Rasterize Handheld Friendly
87. Visualization with Web Resources
88. https://www.project-tp.com/
90. 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
91. http://www.clicktorelease.com/code/streetViewReflectionMapping/
92. https://www.biodigital.com/developers
93. http://graphics.wsj.com/3d-nasdaq/
95. http://shinydemos.com/facekat/
96. http://bignerdranch.github.io/music-frequency-d3/
97. http://dinahmoelabs.com/plink
98. Wrap Up • Cross Device / Resolution / Browser • Use Vector / Raster Image on Demand • Leverage the Power of Web Services / API