前端網頁資料視覺化設計

Transcript

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

2. None
3. None
4. None

5. Nigel  Holmes TIME  Magazine

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

7. $IBSU
   +VOL
   %FCBUF 
   &EXBSE
   5VGUF
   JO
   7%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