Visualization over Web

7f7cce675da85bf8807da9f8d0c3a955?s=47 tkirby
August 23, 2015

Visualization over Web

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

7f7cce675da85bf8807da9f8d0c3a955?s=128

tkirby

August 23, 2015
Tweet

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.

  14. None
  15. Diversity of Android Camp

  16. None
  17. None
  18. None
  19. None
  20. Landscape x 10 Portrait x 6 Desktop x 12 Mobile

    x 4
  21. None
  22. None
  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”>
  35. None
  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

  40. None
  41. None
  42. None
  43. None
  44. ai2html.jsx → Presets\zh_TW\指令檔

  45. 檔案 → 指令檔 → ai2html

  46. None
  47. ai2html-settings:產⽣生檔案的設定 ai2html-css:在產出檔案中插⼊入額外的 CSS ai2html-js:在產出檔案中插⼊入額外的 JS ai2html-html:在產出檔案中插⼊入額外的 HTML ai2html-text:設定變數,⽅方便在其它⽂文字⽅方塊中引⽤用 * variable-name:

    value」設定變數
 以 <%=variable-name%>使⽤用變數
  48. None
  49. None
  50. None
  51. None
  52. 19 charts

  53. None
  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?

  63. None
  64. None
  65. None
  66. var obj = { method: ‘feed’, link: ‘http://your.com/viz/?' + keyword,

    name: keyword + ‘的顏⾊色是 …. !’ picture: yourImageURL } FB.ui(obj, function() {});
  67. $PNQBUJCJMJUZ why rasterize?

  68. None
  69. None
  70. None
  71. None
  72. None
  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 )
  76. None
  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/

  89. None
  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/

  94. None
  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