前端網頁資料視覺化設計

7f7cce675da85bf8807da9f8d0c3a955?s=47 tkirby
December 22, 2015

 前端網頁資料視覺化設計

前端網頁資料視覺化設計 / 分享於現代化網站技術分享日

7f7cce675da85bf8807da9f8d0c3a955?s=128

tkirby

December 22, 2015
Tweet

Transcript

  1. 網⾴頁前端視覺化技術 infographics.tw

  2. None
  3. None
  4. None
  5. Nigel  Holmes TIME  Magazine

  6. $IBSU+VOL%FCBUF &EXBSE5VGUF JO7%2* 「凡對讀者的智⼒力抱著懷疑態度來對待的⼈人, 也無法寫出像樣的作品。」 「如果統計數字枯燥乏味的話, 那你肯定弄錯了數字」 &#8IJUF

  7. $IBSU+VOL%FCBUF &EXBSE5VGUF JO7%2* %BUB*OL3BUJP *OLPG%BUB 5PUBM*OL6TFE

  8. None
  9. None
  10. None
  11. None
  12. 1854 1858 1869

  13. http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0

  14. data = [1,2,3,4,5,6,7,8]

  15. data = [1,2,3,4,5,6,7,8] <div style=“width:100px”></div> <div style=“width:200px”></div> <div style=“width:300px”></div> <div

    style=“width:800px”></div> …..
  16. 2011 Mike Bostock

  17. TA G DATA +

  18. data = [1,2,3,4,5,6,7,8]

  19. data = [1,2,3,4,5,6,7,8] d3.select(“#root”) .selectAll(“div”) .data(data)

  20. data = [1,2,3,4,5,6,7,8] enter() exit() d3.select(“#root”) .selectAll(“div”) .data(data)

  21. data = [1,2,3,4,5,6,7,8] enter() exit() d3.select(“#root”) .selectAll(“div”) .data(data) append remove

  22. data = [1,2,3,4,5,6,7,8] d3.select(“div:nth-of-type(5)”) .text(function(v) {
 return v;
 });

  23. d3.select(“#root”) .selectAll(“div”) .style({ “width”: function(v) { return v + “px”;

    }}) .attr({ … }); Dynamic Property
  24. None
  25. None
  26. MathML

  27. MathML X3D

  28. MathML X3D SMIL

  29. MathML X3D SMIL Document Agnostic

  30. http://zbryikt.github.io/visualize/banana/ Banana in X3D

  31. Transition d3.select(“#root”) .selectAll(“div”) .transition() .duration(1000) .style({ “width”: function(v) { return

    v + “px”; }});
  32. http://bl.ocks.org/mbostock/1256572 D3 Show Reel

  33. None
  34. http://bl.ocks.org/infographicstw/raw/122779b04901c4ffa455/5.html Play with Force Layout

  35. None
  36. None
  37. Processing 2001, MIT Media Lab. Simplified Java

  38. Processing 2001, MIT Media Lab. Simplified Java Processing.js p5.js

  39. d3.select(“#root”) .selectAll(“div”) .data(d) .enter() .append(“div”) .style({ width: function(v) {
 return

    v+”px”;
 }, height: “10px” } );
 
 <div id=“root”></div> function draw() { for(i in d) { rect(0,i*10,
 d[i],(i+1)*10);
 }
 } d3.js p5.js
  40. d3.select(“#root”) .selectAll(“div”) .data(d) .enter() .append(“div”) .style({ width: function(v) {
 return

    v+”px”;
 }, height: “10px” } );
 
 <div id=“root”></div> function draw() { for(i in d) { rect(0,i*10,
 d[i],(i+1)*10);
 }
 } d3.js p5.js CSS Selector HTML CSS D3.js
  41. d3.select(“#root”) .selectAll(“div”) .data(d) .enter() .append(“div”) .style({ width: function(v) {
 return

    v+”px”;
 }, height: “10px” } );
 
 <div id=“root”></div> function draw() { for(i in d) { rect(0,i*10,
 d[i],(i+1)*10);
 }
 } d3.js p5.js draw in draw rect by rect
  42. But….. Performance?

  43. p5.js

  44. 2D webGL renderer with canvas fallback

  45. D3.js Pixi.js

  46. 快 易 強 難 慢 弱 ? d3.js p5.js pixi.js

  47. PathGL

  48. PathGL

  49. PathGL

  50. 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
  51. D3 + Canvas ? D3 + NodeJS ? D3 +

    ReactJS ? D3 + WebWorker ?
  52. TO BE CONTINUE …

  53. Let’s Talk about Responsive

  54. None
  55. Large in Size Low Quality

  56. Small in Size High Quality

  57. w (x1,y1) <svg width=“w” height=“h” viewBox=“x1 y1 x2 y1”> h

    (x2,y2)
  58. (x1,y1) (x2,y2) w h

  59. preserveAspectRatio xMin xMid xMax yMin yMid yMax

  60. preserveAspectRatio=“xMidYMid” xMin xMid xMax yMin yMid yMax

  61. None
  62. None
  63. None
  64. http://www.nytimes.com/interactive/2015/06/17/world/middleeast/map-isis-attacks-around-the-world.html?smid=tw-nytimes&_r=1

  65. None
  66. None
  67. None
  68. (x1,y1) (x2,y2) w h x scale y scale

  69. d3.scale.linear() data 0~10 scale coord 0~w

  70. d3.svg.axis().tick(w/k)

  71. 07/2015, Nadieh @ Visual Cinnamon

  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. http://www.foundi.info/lab/badneighbor/

  79. 總結 • 整體原則與 RWD 相同 • 考慮圖⽂文搭配的閱讀體驗 • 彈性處理圖表本⾝身的尺⼨寸 •

    可以簡化的資料應統⼀一簡化,沒有平台差異 • 不適合簡化的資料,再考慮分裝置處理 • 永遠考慮更簡潔的表現形式
  80. Visualization without Web

  81. 2015.09 shown by Republican to the congress to refund Planned

    Parenthood
  82. proposed actually 2015.09 shown by Republican to the congress to

    refund Planned Parenthood
  83. http://guns.periscopic.com/

  84. ( 2007 Proc. InfoViz )

  85. None
  86. None
  87. None
  88. None
  89. w w <canvas width=“w” height=“h” style=“width:wpx;height:hpx”> h h