정보시각화란 무엇인가 - D3.js가 시각화에 있어서 중요한 이유

정보시각화란 무엇인가 - D3.js가 시각화에 있어서 중요한 이유
데이터그램 시각화 기초 Part5 10회차(2015. 11. 13.)

nacyot http://blog.nacyot.com

모임 정보 https://www.facebook.com/events/882080638554575/

이전에 발표했던 "시각화 디자인 - 회화를 넘어 규칙 디자인으로" https://speakerdeck.com/nacyot/sigaghwa-dijain-hoehwareul-neomeo-gyucig-dijaineuro 를 보완한 발표.

정보시각화는 일반적으로 통계학과 디자인, 그리고 프로그래밍 교집합이나 그 사이의 어디 쯤에 있는 것으로 여겨지곤 한다. 이 발표에서는 교집합으로서의 시각화가 아닌, 즉 데이터를 다루는 통계학도 아니며, 시각적 표현을 다루는 디자인도 아니고, 이러한 것들을 구현하는 프로그래밍도 아닌 정보시각화 자체로서의 정보시각화를 이야기한다.

막대 그래프, 산포도와 같은 일반적인 차트로부터 D3.js에 이르기 까지 시각화 고유의 영토를 좀 더 정교하게 경계짓고, D3.js가 이러한 맥락 위에서 왜 중요한 지를 다룬다.

Transcript

1. ੿ࠁदпച
   What is information visualization?
   ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 1
   

   View Slide

2. ؘ੉ఠӒ۔
   2015. 11. 10.
   ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 2
   

   View Slide

3. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 3
   

   View Slide

4. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 4
   

   View Slide

5. Programmer
   blog.nacyot.com
   ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 5
   

   View Slide

6. I ❤ Infoviz
   ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 6
   

   View Slide

7. First Impact
   ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 7
   

   View Slide

8. ਤః ೦ݾٜ р੄ োѾ ҙ҅
   ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 8
   

   View Slide

9. WikiWiki
   • c2.com - Graph Viz
   • moinmoin
   • moniwiki
   ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 9
   

   View Slide

10. ݅ചо ૑ب(2007)
    ࢸޙઑࢎ ӝ߈
    э੉ ঱әػ ݅ചо
    Graphviz
    HTML - ೞ੉ಌ݂௼
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 10
    

    View Slide

11. what is
    Information
    Visualization
    ?
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 11
    

    View Slide

12. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 12
    

    View Slide

13. Positioning
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 13
    

    View Slide

14. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 14
    

    View Slide

15. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 15
    

    View Slide

16. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 16
    

    View Slide

17. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 17
    

    View Slide

18. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 18
    

    View Slide

19. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 19
    

    View Slide

20. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 20
    

    View Slide

21. Intersection
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 21
    

    View Slide

22. ా҅೟੉ݶࢲ,
    ٣੗ੋ੉ݶࢲ,
    ೐۽Ӓې߁
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 22
    

    View Slide

23. Ҋਬ੄ ৔ష਷ য٣ী...
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 23
    

    View Slide

24. ׮ܰѱ ਤ஖૙ӝ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 24
    

    View Slide

25. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 25
    

    View Slide

26. Intersection
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 26
    

    View Slide

27. ా҅೟੉ݶࢲ,
    ٣੗ੋ੉ݶࢲ,
    ೐۽Ӓې߁
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 27
    

    View Slide

28. Visualization
    itself
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 28
    

    View Slide

29. য়ט੄ ੉ঠӝ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 29
    

    View Slide

30. Definition
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 30
    

    View Slide

31. Information Visualization
    Information visualization or information
    visualisation is the study of (interactive) visual
    representations of abstract data to reinforce
    human cognition. The abstract data include both
    numerical and non-numerical data, such as text
    and geographic information
    Wikipedia - Information Visualization
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 31
    

    View Slide

32. ੿ࠁदпച
    ੿ࠁदпചח ࢎۈ੄ ੋ૑ܳ ഛ੢ೡ ࣻ ੓ѱ ೧઱ח ୶࢚
    ੸ ؘ੉ఠ੄ (ੋఠ۩౭࠳ೠ) दп੸ ಴അী ؀ೠ োҳ੉׮.
    ੉ ٸ ୶࢚੸ ؘ੉ఠח ࣻ஖੸ੋ ؘ੉ఠ৬ ఫझ౟ա ૑ܻ
    ੿ࠁ৬ э਷ ࠺ࣻ஖੸ ؘ੉ఠܳ ݽف ನೣೠ׮.
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 32
    

    View Slide

33. ੿ࠁदпച
    ੿ࠁदпചח ࢎۈ੄ ੋ૑ܳ ഛ੢ೡ ࣻ ੓ѱ ೧઱ח ୶࢚
    ੸ ؘ੉ఠ੄ (ੋఠ۩౭࠳ೠ) दп੸ ಴അী ؀ೠ োҳ੉׮.
    ੉ ٸ ୶࢚੸ ؘ੉ఠח ࣻ஖੸ੋ ؘ੉ఠ৬ ఫझ౟ա ૑ܻ
    ੿ࠁ৬ э਷ ࠺ࣻ஖੸ ؘ੉ఠܳ ݽف ನೣೠ׮.
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 33
    

    View Slide

34. ੿ࠁदпച
    दп੸ ಴അ
    ୶࢚੸ ؘ੉ఠ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 34
    

    View Slide

35. दп੸ ಴അ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 35
    

    View Slide

36. ഥച
    ؊ ੊ࣼೞҊ
    ੌ߈੸ੋ Ѫ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 36
    

    View Slide

37. ഥച৬ दпച੄ ର੉
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 37
    

    View Slide

38. ୶࢚੸ ؘ੉ఠ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 38
    

    View Slide

39. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 39
    

    View Slide

40. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 40
    

    View Slide

41. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 41
    

    View Slide

42. ৈ੹൤ Ү૘೤
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 42
    

    View Slide

43. ੿Үೞѱ ҃҅૙ӝ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 43
    

    View Slide

44. ഥച
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 44
    

    View Slide

45. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 45
    

    View Slide

46. Ӓی٘ ੗౟ ࢻ੄ ੌਃੌ য়റ
    Un dimanche après-midi à l'Île de la Grande Jatte
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 46
    

    View Slide

47. 207 * 308cm
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 47
    

    View Slide

48. 1884-1886
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 48
    

    View Slide

49. Pointilism
    ޖࣻ൤ ݆਷ ੼ٜ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 49
    

    View Slide

50. ഥച੄ ࠄ૕
    verb. Ӓܻ׮
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 50
    

    View Slide

51. ੿ࠁदпച
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 51
    

    View Slide

52. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 52
    

    View Slide

53. Exports & Imports
    to and from all NORTH-AMERICA
    William Playfair
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 53
    

    View Slide

54. ୭ୡ੄ ా҅੸ Ӓې೐
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 54
    

    View Slide

55. ݃஖ ഥച୊ۢ ࠁ੐
    दп੸ ಴അ੉ۄח ౠ૚ਸ ҕਬೞӝ ٸޙ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 55
    

    View Slide

56. 
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 56
    

    View Slide

57. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 57
    

    View Slide

58. Ceci n'est pas une peinture
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 58
    

    View Slide

59. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 59
    

    View Slide

60. ഥച
    ੿ޛ, ೂ҃, ੋޛ, ࢚࢚, ...
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 60
    

    View Slide

61. ৵ ୶࢚੸ ؘ੉ఠ݅ ౠ߹ೠо?
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 61
    

    View Slide

62. ా҅੸ Ӓې೐੄ ੗زࢿ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 62
    

    View Slide

63. ా҅੸ Ӓې೐
    ߈٘द ؘ੉ఠܳ ಴അ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 63
    

    View Slide

64. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 64
    

    View Slide

65. ా҅੸ Ӓې೐੄ ੗زࢿ
    We cannot change the location of a point or the
    color of an object (assuming these are data-
    representing attributes) without lying about our
    data and violating the purpose of the statistical
    graphic to represent data accurately and
    appropriately. Consequently, the core of a graphics
    system must rest on specification.
    — The Grammar of Graphics 6p
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 65
    

    View Slide

66. ా҅੸ Ӓې೐੄ ੗زࢿ
    ਋ܻח ӝ੷੄ ؘ੉ఠܳ ߸҃दఃѢա ؘ੉ఠܳ ੿ഛೞҊ
    ੸੺ೞѱ ಴അ೧ঠೠ׮ח ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೞ
    ૑ ঋח ೠ, ੼ٜ੄ ਤ஖ա ё୓੄ ࢝(੉۞ೠ ਃٜࣗ਷ ؘ
    ੉ఠܳ ಴അೞח ࣘࢿٜ੉ۄח о੿ೞী)ٜਸ ߄Ե ࣻ হ
    ׮. ٮۄࢲ Ӓې೗ दझమ੄ ೨ब਷ झಖ(specification)ী
    ੓׮.
    — The Grammar of Graphics 6p
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 66
    

    View Slide

67. ా҅੸ Ӓې೐ܳ ߸ചदఃח ߑߨ
    1. ӝ੷੄ ؘ੉ఠܳ ߸҃
    2. ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೠ׮
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 67
    

    View Slide

68. ӝ੷੄ ؘ੉ఠ ߸҃
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 68
    

    View Slide

69. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 69
    

    View Slide

70. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 70
    

    View Slide

71. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 71
    

    View Slide

72. ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೠ׮
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 72
    

    View Slide

73. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 73
    

    View Slide

74. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 74
    

    View Slide

75. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 75
    

    View Slide

76. Ӓې೐ח ؘ੉ఠী ؀೧ࢲ
    ੗ز੸ਵ۽ Ӓ۰૓׮
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 76
    

    View Slide

77. Junk Chart
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 77
    

    View Slide

78. Ӓې೐ח ؘ੉ఠী ؀೧ࢲ
    ੗ز੸ਵ۽ Ӓ۰૓׮
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 78
    

    View Slide

79. ׮ܰѱ ಴അೞݶ
    ޖ঺ب (૒੽) Ӓܻ૑ ঋח׮
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 79
    

    View Slide

80. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 80
    

    View Slide

81. ੿ࠁदпച੄ ౠ૚
    दп੸ ಴അ
    ୶࢚੸ ؘ੉ఠ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 81
    

    View Slide

82. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 82
    

    View Slide

83. ই૒ ੉ঠӝೞ૑ ঋ਷ Ѫ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 83
    

    View Slide

84. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 84
    

    View Slide

85. HOW
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 85
    

    View Slide

86. ؘ੉ఠח যڌѱ Ӓې೐о غחо?
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 86
    

    View Slide

87. Ӓې೐ח ੗োߊࢤ੸੉૑ ঋ׮
    1800֙؀ী ୊਺ਵ۽ ߊݺ
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 87
    

    View Slide

88. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 88
    

    View Slide

89. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 89
    

    View Slide

90. ׮द The Grammar of Graphics
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 90
    

    View Slide

91. ా҅੸ Ӓې೐੄ ੗زࢿ
    ਋ܻח ӝ੷੄ ؘ੉ఠܳ ߸҃दఃѢա ؘ੉ఠܳ ੿ഛೞҊ
    ੸੺ೞѱ ಴അ೧ঠೠ׮ח ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೞ
    ૑ ঋח ೠ, ੼ٜ੄ ਤ஖ա ё୓੄ ࢝(੉۞ೠ ਃٜࣗ਷ ؘ
    ੉ఠܳ ಴അೞח ࣘࢿٜ੉ۄח о੿ೞী)ٜਸ ߄Ե ࣻ হ
    ׮. ٮۄࢲ Ӓې೗ दझమ੄ ೨ब਷ झಖ(specification)ী
    ੓׮.
    — The Grammar of Graphics 6p
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 91
    

    View Slide

92. ా҅੸ Ӓې೐੄ ੗زࢿ
    ਋ܻח ӝ੷੄ ؘ੉ఠܳ ߸҃दఃѢա ؘ੉ఠܳ ੿ഛೞҊ
    ੸੺ೞѱ ಴അ೧ঠೠ׮ח ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೞ
    ૑ ঋח ೠ, ੼ٜ੄ ਤ஖ա ё୓੄ ࢝(੉۞ೠ ਃٜࣗ਷ ؘ
    ੉ఠܳ ಴അೞח ࣘࢿٜ੉ۄח о੿ೞী)ٜਸ ߄Ե ࣻ হ
    ׮. ٮۄࢲ Ӓې೗ दझమ੄ ೨ब਷ झಖ(specification)
    ী ੓׮.
    — The Grammar of Graphics 6p
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 92
    

    View Slide

93. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 93
    

    View Slide

94. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 94
    

    View Slide

95. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 95
    

    View Slide

96. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 96
    

    View Slide

97. ࢸݺغ૑ ঋ਷ աݠ૑
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 97
    

    View Slide

98. ߄۽ ৈӝо ੿ࠁदпച Ҋਬ੄ ৔ష
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 98
    

    View Slide

99. ৵ दпചח ഥചо ইצо
    1. ಴അೞח ؀࢚੉ ׮ܰ׮
    2. ؘ੉ఠী ੄೧ ੗ز੸ਵ۽ Ӓ۰૓׮
    ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 99
    

    View Slide

100. ӒܻҊ ೠ о૑ ؊
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 100
     

     View Slide

101. ؘ੉ఠ + ର౟ ೣࣻ = Ӓې೐
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 101
     

     View Slide

102. ؘ੉ఠ1 + ର౟ ೣࣻ = Ӓې೐1
     ؘ੉ఠ2 + ର౟ ೣࣻ = Ӓې೐2
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 102
     

     View Slide

103. ؘ੉ఠ1 + ର౟ ೣࣻ = Ӓې೐1
     ؘ੉ఠ2 + ର౟ ೣࣻ = Ӓې೐2
     ؘ੉ఠ3 + ର౟ ೣࣻ = Ӓې೐3
     ؘ੉ఠ4 + ର౟ ೣࣻ = Ӓې೐4
     ...
     ؘ੉ఠx + ର౟ ೣࣻ = Ӓې೐x
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 103
     

     View Slide

104. ৔Ҵ ؀ ࠘޷ ޖ৉ ࣻ૑
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 104
     

     View Slide

105. ৔Ҵ ؀ ֢ܰਝ੉ & ؚ݃௼ ࣻ૑
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 105
     

     View Slide

106. ৔Ҵ ؀ ইੌے٘ ޖ৉ ࣻ૑
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 106
     

     View Slide

107. ഥചח Ӓ ੗୓۽ ҳ࢚੸ਵ۽ ৮Ѿ
     दпചח ୶࢚੸੉޲۽ ࠺৮Ѿ੸
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 107
     

     View Slide

108. ਧܻষ ೒ۨ੉ಕযח ੕ഃ૑Ҋ
     ର౟ ഋध݅ ࢓ইթ਷ ੉ਬ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 108
     

     View Slide

109. ୶࢚੸ੋ ޖ঱о
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 109
     

     View Slide

110. Specification੄ ੿୓
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 110
     

     View Slide

111. ؘ੉ఠܳ दп੸ ಴അਵ۽
     ߸ജೞח ӏ஗ٜ੄ ૘೤
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 111
     

     View Slide

112. ইө ର౟
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 112
     

     View Slide

113. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 113
     

     View Slide

114. Ӓؘ۠, दпച
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 114
     

     View Slide

115. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 115
     

     View Slide

116. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 116
     

     View Slide

117. ޥо ࣘ਷ ӝ࠙
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 117
     

     View Slide

118. ର౟
     ੌ߈੸੉Ҋ ੿ഋചػ ӏ஗ ૘೤
     ޷ܻ ٣੗ੋػ ӏ஗૘೤
     ೐۽Ӓ۔ীࢲ ઱য૑ח ӏ஗૘೤
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 118
     

     View Slide

119. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 119
     

     View Slide

120. Spec, Spec
     Spec, Spec
     Spec, Spec
     Spec, Spec
     Spec, Spec
     Spec, Spec
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 120
     

     View Slide

121. Rules, Rules
     Rules, Rules
     Rules, Rules
     Rules, Rules
     Rules, Rules
     Rules, Rules
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 121
     

     View Slide

122. ର౟ ۄ੉࠳۞ܻ
     ର౟ ૑ਗ ೐۽Ӓ۔
     п ର౟ ఋੑ਷ Ӓې೐ܳ
     ࢤࢿೞח ೞա੄ ӏ஗૘೤
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 122
     

     View Slide

123. Ӓې೗ ޙߨ੄ ࣁ҅۽
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 123
     

     View Slide

124. Ӓې೗੄ ޙߨ(1)
     Grammar makes language expressive. A language
     consisting of words and no grammar (statement =
     word) expresses only as many ideas as there are
     words. By specifying how words are combined in
     statements, a grammar expands a language’s
     scope.
     — Leland Wilkinson
     The Grammar of Graphics 1p
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 124
     

     View Slide

125. Ӓې೗੄ ޙߨ(1)
     ޙߨ਷ ঱য੄ ಴അਸ ೂࠗೞѱ ݅ٚ׮. ױয݅ ੓Ҋ ޙߨ
     ੉ হח ঱যо ੓׮ݶ(૊, ױযо ҍ ޙ੢), য়૒ ױযо
     ઓ੤ೞח ݅ఀ੄ ই੉٣য݅ਸ ಴അೡ ࣻ ੓ਸ Ѫ੉׮. ޙ
     ੢ উীࢲ ױযо যڌѱ ҳࢿغח ૑ܳ ӏ੿ೣਵ۽ࢲ, ޙ
     ߨ਷ ঱য੄ ߧਤܳ ഛ੢ೠ׮.
     — Leland Wilkinson
     The Grammar of Graphics 1p
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 125
     

     View Slide

126. Ӓې೗੄ ޙߨ(2)
     This book is about grammatical rules for creating
     perceivable graphs, or what we call graphics. The
     grammar of graphics takes us beyond a limited set
     of charts (words) to an almost unlimited world of
     graphical forms (statements).
     — Leland Wilkinson
     The Grammar of Graphics 1p
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 126
     

     View Slide

127. Ӓې೗੄ ޙߨ(2)
     ੉ ଼਷ ੋ૑ೡ ࣻ ੓ח Ӓې೐ա ਋ܻо Ӓې೗੉ۄҊ ࠗ
     ܰח Ѫਸ ٜ݅ӝ ਤೠ ޙߨ੸ ӏ஗ী ҙೠ ଼੉׮. Ӓې೗
     ੄ ޙߨ਷ ਋ܻܳ ઁೠػ ઙܨ੄ ର౟ٜ(ױয)۽ࠗఠ Ѣ੄
     ޖೠೠ Ӓې೗ ഋక(ޙ੢)੄ ࣁ҅۽ ؘ۰т Ѫ੉׮.
     — Leland Wilkinson
     The Grammar of Graphics 1p
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 127
     

     View Slide

128. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 128
     

     View Slide

129. ର౟੄ ೠ҅
     ױয੸ ࣁ҅
     ݄؀ Ӓې೐, ਗ Ӓې೐, ԃ਷ࢶ Ӓې೐, ־੸ ݄؀Ӓې೐,
     ۨ੉؊ ର౟, ࢑ನب, ࢚੗ ࣻ৏ Ӓ۔, ಣ೯ Ӓې೐, ൤झ
     ఠӒ۔, ࢚ನష ೯۳, 3ରਗ ݄؀Ӓې೐, о۽ ݄؀ Ӓې
     ೐, ৔৉ Ӓې೐, ...
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 129
     

     View Slide

130. ޙߨ੸ਵ۽ ࠙ࢳೞӝ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 130
     

     View Slide

131. GPL
     Graphic Production Language
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 131
     

     View Slide

132. GPL
     • The Grammar of Graphics੄ ੉ۿীࢲ ࢎਊ
     • SPSSী पઁ ੘زೞח ҳഅ੉ ੓਺
     • Ӓې೗੄ ޙߨਸ ӝࣿೞӝ ਤೠ Ҋਬ੄ ޙߨ
     • Ҋࣻળ ࢶ঱੸ ঱য(ਃࣗܳ ૒੽ Ӓܻ૑ ঋ਺)
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 132
     

     View Slide

133. How to make a pie
     The Grammar of Graphics 23p
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 133
     

     View Slide

134. From data to graphic
     The Grammar of Graphics 24p
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 134
     

     View Slide

135. GPL - scatter plot
     SOURCE: s = userSource(id("Employeedata"))
     DATA: salbegin=col(source(s), name("salbegin"))
     DATA: salary=col(source(s), name("salary"))
     GUIDE: axis(dim(2), label("Current Salary"))
     GUIDE: axis(dim(1), label("Beginning Salary"))
     ELEMENT: point(position(salbegin*salary))
     GPL Reference Guide for IBM
     SPSS Statistics
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 135
     

     View Slide

136. ੢੼੉ ަөਃ?
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 136
     

     View Slide

137. ੼ ؀न ఫझ౟ܳ ࢎਊೞҊ र׮ݶ?
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 137
     

     View Slide

138. GPL - scatter plot?
     SOURCE: s=userSource(id("graphdataset"))
     DATA: BAORHIGHER=col(source(s), name("BAORHIGHER"))
     DATA: OBESITY=col(source(s), name("OBESITY"))
     DATA: StateAbbr=col(source(s), name("StateAbbr"),
     unit.category())
     GUIDE: axis(dim(1), label("% BA or Higher"))
     GUIDE: axis(dim(2), label("% Obese"))
     ELEMENT: point(position(BAORHIGHER*OBESITY),
     label(StateAbbr),
     size(0))
     Andrew Wheeler - Labeling
     tricks in SPSS plots
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 138
     

     View Slide

139. ޙߨ੄ ର੉
     ੼ਵ۽ ಴അೞӝ
     ELEMENT: point(position(salbegin*salary))
     ఫझ౟۽ ಴അೞӝ
     ELEMENT: point(position(BAORHIGHER*OBESITY),
     label(StateAbbr),
     size(0))
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 139
     

     View Slide

140. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 140
     

     View Slide

141. Ѣ੄ ݽٚ ର౟ ೐۽Ӓ۔ীࢲ ࠛоמೠ ੌ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 141
     

     View Slide

142. definition of scatter diagram
     a two-dimensional graph in rectangular
     coordinates consisting of points whose
     coordinates represent values of two variables
     under study
     Merriam-Webster scatter diagram
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 142
     

     View Slide

143. definition of scatter diagram
     a two-dimensional graph in rectangular
     coordinates consisting of points whose
     coordinates represent values of two variables
     under study
     Merriam-Webster scatter diagram
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 143
     

     View Slide

144. scatter plot
     ੿੄ী ੼ਵ۽ ಴അೠ׮ח ੄޷о ನೣ
     ؀ࠗ࠙੄ ର౟ח ੉ ੿੄ী ୽प
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 144
     

     View Slide

145. ױয੄ ࣁ҅
     ޙߨ੄ ࣁ҅
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 145
     

     View Slide

146. ױ, GPL਷ Ѣ੄ ࢎਊغ૑ ঋ਺
     पҳഅ੉ ੓׮Ҋח ೞա, ইޖب ݽܴ
     അ੤ पઁ۽ ࢎਊоמೠ૑ب ࠛైݺ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 146
     

     View Slide

147. ggplot2
     GoG੄ ਬ࢑
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 147
     

     View Slide

148. ggplot2੄ gg
     The Grammar of Graphics
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 148
     

     View Slide

149. ggplot2ীࢲ ࢑ನب Ӓܻӝ (1)
     > dataset = data.frame(x=runif(100)*99, y=runif(100)*99)
     > head(dataset)
     # x y
     # 1 0.6458447 67.28732
     # 2 13.53177 76.61337
     # 3 74.25634 50.06963
     # 4 0.01905423 80.6326
     # 5 31.17823 86.01166
     # 6 75.63284 34.53802
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 149
     

     View Slide

150. ggplot2ীࢲ ࢑ನب Ӓܻӝ (2)
     ggplot(dataset, aes(x = x, y = y)) + geom_point()
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 150
     

     View Slide

151. ੼ ؀न ఫझ౟ ࢎਊೞӝ
     id = seq(1, 100)
     ggplot(dataset, aes(x = x, y = y)) + geom_text(label=id, size=3)
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 151
     

     View Slide

152. ggplot2੄ ౠ૚
     • ର౟ بҳٜী ࠺೧ ঑ب੸ੋ ಴അ۱
     • ઑ೤ਸ ా೧ ݒ਋ ׮নೠ ಴അ оמ
     • അ੤ Rীࢲ о੢ ݆੉ ࢎਊغח ಁః૑
     • GoG੄ о੢ पਊ੸ੋ ҳഅ੉ۄҊ ೡ ࣻ ੓਺
     • GoG੄ ৮੹ೠ ҳഅ਷ ইש
     • ઁডب ݆Ҋ, ة੗੸ੋ ౠࢿٜب ੓਺
     • ੜ ࢶ߹ػ ӝࠄ чٜ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 152
     

     View Slide

153. GPLҗ ggplot2 ࠺Ү
     A Layered Grammar of Graphics - Hadley
     Wickham
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 153
     

     View Slide

154. ggplot2੄ ೠ҅
     • ઑ೤ਸ ాೠ ా҅੸ Ӓې೐੄ ߸઱
     • ࢎਊоמೠ दп੸ ਃࣗ੄ ઁೠ
     • ಴അ ੗୓ܳ ߊݺೞӝח য۰਑
     • ݒ਋ Ҋࣻળ ঱য੐
     • ੘زߑधী ѐੑೞӝо औ૑ ঋ਺
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 154
     

     View Slide

155. ؊ ੷ࣻળਵ۽
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 155
     

     View Slide

156. ӒܻҊ Protovis
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 156
     

     View Slide

157. ױয(ର౟)ܳ ୭؀ೠ ଂѐࠁ੗
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 157
     

     View Slide

158. ݄؀Ӓې೐
     ױয
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 158
     

     View Slide

159. ݄؀/Ӓې೐
     ੄޷
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 159
     

     View Slide

160. ݄/؀/Ӓ/ې/೐
     Ӗ੗
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 160
     

     View Slide

161. ର౟(ױয)ܳ ڳযࠁӝ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 161
     

     View Slide

162. ର౟ܳ ଂѐݶ աয়ח Ѫ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 162
     

     View Slide

163. Rule (1)
     • GPL / ggplot2
     • Data -> ࠶ۑ߅झ -> दп੸ ਃࣗ
     • Ҋਬ੄ ޙߨਵ۽ ӝࣿ(р੽੸, ࠶ۑ߅झ)
     • Protovis / D3.js
     • Data -> दп੸ ਃࣗ
     • ౠ൤ D3.jsীࢲח ૒੽ SVG ਃٜࣗਸ ׮ܚ
     • ؘ੉ఠо যڌѱ ݗೝغח ૑ ૒੽ ੿੄(૒੽੸)
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 163
     

     View Slide

164. Rule (2)
     • GPL / ggplot2
     • ੉ ؘ੉ఠܳ xઝ಴ী ؀਽दெ઻
     • ղࠗ੸ਵ۽ ੸੺൤ ୊ܻؽ
     • Protovis / D3.js
     • ੉ ؘ੉ఠ۽ࠗఠ ੉ۧѱ ҅࢑ೠ Ѿҗо x ઝ಴ঠ
     • ೐۽Ӓېݠо ૒੽ ؘ੉ఠ৬ दп੸ ਃࣗܳ ઁয
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 164
     

     View Slide

165. ex) ݄؀ Ӓې೐
     ݄؀ Ӓې೐ܳ ҳࢿೞח ӏ஗ٜ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 165
     

     View Slide

166. ݄؀Ӓې೐
     • ݄؀ח 0ਸ ӝળࢶਵ۽ द੘ೠ׮.
     • ؘ੉ఠ੄ ௼ӝח ݄؀੄ ֫੉ܳ Ѿ੿ೠ׮
     • ݄؀ח ੸੺ೠ ց࠺ܳ о૓׮
     • ݽٚ ݄؀੄ ց࠺ח э׮
     • ؘ੉ఠ੄ ࣽࢲח ݄؀੄ ਤ஖ܳ Ѿ੿ೠ׮
     • Y୷਷ о੢ 0ীࢲ о੢ ௾ ч + @۽ ೠ׮
     • ...
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 166
     

     View Slide

167. ੉ ӏ஗ٜਸ ૒੽ ೐۽Ӓ۔ਵ۽ ੘ࢿ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 167
     

     View Slide

168. ੄৻۽ য۰਑
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 168
     

     View Slide

169. ־ҳա ݄؀ Ӓې೐ܳ ੉೧ೞ૑݅
     ӏ஗ਸ ঌҊ ੓ח ҃਋ח ٘ޛ׮
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 169
     

     View Slide

170. ইޖب উ оܰ୛ ઻ਃ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 170
     

     View Slide

171. ݄؀Ӓې೐
     Protovis Specification
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 171
     

     View Slide

172. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 172
     

     View Slide

173. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 173
     

     View Slide

174. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 174
     

     View Slide

175. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 175
     

     View Slide

176. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 176
     

     View Slide

177. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 177
     

     View Slide

178. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 178
     

     View Slide

179. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 179
     

     View Slide

180. λ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 180
     

     View Slide

181. تয়੄ ࣽр
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 181
     

     View Slide

182. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 182
     

     View Slide

183. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 183
     

     View Slide

184. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 184
     

     View Slide

185. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 185
     

     View Slide

186. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 186
     

     View Slide

187. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 187
     

     View Slide

188. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 188
     

     View Slide

189. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 189
     

     View Slide

190. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 190
     

     View Slide

191. SVG੄ ࣁ҅۽
     Protovis to D3.js
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 191
     

     View Slide

192. Mick Bostock (1)
     The Grammar of Graphics was also an influence, in
     terms of avoiding chart typologies while trying to
     be more declarative about the visual encoding,
     though certainly D3 ended up being much lower
     level and very different.
     Reddit - Hi! I’m Mike Bostock ...
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 192
     

     View Slide

193. Mick Bostock (1)
     दп੸ ੋ௏٬ী ؀೧ ؊ ࢶ঱੸ੋ ۄ੉࠳۞ܻܳ ݅٘ח
     ؘ ੓যࢲ ର౟ ਬഋ೟ਸ ೖೠ׮ח ੼ীࢲ The Grammar
     of Graphics੄ ৔ೱب ߉ও׮. ೞ૑݅ D3ח Ѿҗ੸ਵ۽
     ખ ؊ ੷ࣻળਵ۽ ٜ݅য઎ਵݴ ݆੉ ׮ܰ׮.
     Reddit - Hi! I’m Mike Bostock ...
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 193
     

     View Slide

194. Mick Bostock (2)
     I wanted something that gave the designer greater
     control over the output—the kind of control that the
     early practitioners like Minard, Playfair and Bertin
     had because they did things by hand. Even within
     Protovis I felt like I was limited by its mark types; I
     wanted something that could use all of the DOM
     and SVG.
     Reddit - Hi! I’m Mike Bostock ...
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 194
     

     View Slide

195. Mick Bostock (2)
     ଴झ ޷ա٘, ਧܻষ ೒ۨ੉ಕয, ੗௼ ߡ౯੉ ࣚਵ۽ दп
     ച ੘সਸ ೞݶࢲ ؊ ݆਷ ઁযӂਸ о૑Ҋ ੓঻٠੉, աח
     ٣੗੉ցٜীѱ ୹۱ী ؀೧ ؊ ݆਷ ઁযӂਸ ઱Ҋ र঻
     ׮. Protovisীࢲب ৈ੹൤ ݃௼(mark) ఋੑٜ੄ ઁডٜ
     ਸ וԑ৳׮. Ӓېࢲ աח DOMҗ SVGܰ ୭؀ೠ ഝਊೡ
     ࣻ ੓ח ߑߨਸ ਗ೮׮.
     Reddit - Hi! I’m Mike Bostock ...
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 195
     

     View Slide

196. ׮द, ݄؀Ӓې೐
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 196
     

     View Slide

197. from CSE512
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 197
     

     View Slide

198. ŶƄŦŬƅŦƖŮƅƂƖ
     ੗ݽ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 198
     

     View Slide

199. Data -> Svg ࣘࢿ
     barGroup.selectAll("rect")
     .data(popData)
     .enter()
     .append("rect")
     .attr("x", 0)
     .attr("y", function(d) {return y(d.age)})
     .attr("width", function(d) {return x(d.value)})
     .attr("height", y.rangeBand());
     Visual Storytelling with D3 6੢ ৘ઁ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 199
     

     View Slide

200. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 200
     

     View Slide

201. D3.js੄ ೠ҅ = SVG੄ ೠ҅
     ѢԲ۽ ݈ೞݶ DOMҗ SVGܳ ੜ ঌইঠೣ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 201
     

     View Slide

202. ׮द, ੿ࠁदпചۆ ޖ঺ੋо?
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 202
     

     View Slide

203. ӏ஗(૘೤)ਸ ٣੗ੋೞӝ
     Declarative Language
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 203
     

     View Slide

204. दпച੄ ࠄ૕
     ӏ஗ਸ ٣੗ੋೞח Ѫ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 204
     

     View Slide

205. ӏ஗ٜਸ ݽਵݶ
     ӝࢿ੸ੋ ର౟
     ӝࢿ੸ੋ ର౟੄ ߸઱
     ৮੹൤ ࢜۽਍ ಴അ ߑध
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 205
     

     View Slide

206. ӏ஗੉ ੿೧૑Ҋ աݶ
     ٣੗੉ցח Ѿҗޛী ѐੑೡ ࣻ হ׮
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 206
     

     View Slide

207. दпച ٣੗੉ցۆ?
     ӏ஗ਸ ੿੄ೞח ࢎۈ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 207
     

     View Slide

208. D3.jsח ੿ࠁदпചীࢲ ৵ ઺ਃೠо?
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 208
     

     View Slide

209. D3
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 209
     

     View Slide

210. Data
     Driven
     Document
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 210
     

     View Slide

211. Declarative
     Declarative
     Declarative
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 211
     

     View Slide

212. दпച੄ ࠄ૕ী о੢ ੸೤
     ੿ࠁदпച Ҋਬ੄ ৔ష ਤীࢲ
     ӏ஗ਸ ٣੗ੋೞח بҳ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 212
     

     View Slide

213. ࢎ۹ - ঠन ೐۽ં౟
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 213
     

     View Slide

214. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 214
     

     View Slide

215. ಁथ ಣݶ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 215
     

     View Slide

216. थܫ ҕр
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 216
     

     View Slide

217. ੹੸ о੉٘
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 217
     

     View Slide

218. ੼੄ ௼ӝ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 218
     

     View Slide

219. ഥ੹
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 219
     

     View Slide

220. ݽٚ ҃ӝ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 220
     

     View Slide

221. This isn't a scatter plot
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 221
     

     View Slide

222. ࢜۽਍ ӏ஗ ૘೤
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 222
     

     View Slide

223. ޖೠ൤ ׮নೠ ؘ੉ఠࣇ
     ޖೠ൤ ׮নೠ ӏ஗ ૘೤
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 223
     

     View Slide

224. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 224
     

     View Slide

225. ޖݺ੄ ࣁ҅
     ӏ஗ ૘೤݅੉ ੓ਸ ࡺ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 225
     

     View Slide

226. mbostock's blocks
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 226
     

     View Slide

227. eyeo 2013 - For Example
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 227
     

     View Slide

228. જ਷ दпച ࢎ۹ח ׮द ਬഋച
     • Treemap
     • Bubble Chart
     • Chord Diagram
     • Sunburst
     • Calendar View
     • Choropleth
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 228
     

     View Slide

229. ૑Ә ਋ܻח য٣ী
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 229
     

     View Slide

230. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 230
     

     View Slide

231. ઁ೐ܻ ൤য੄ ࠙ܨ
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 231
     

     View Slide

232. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 232
     

     View Slide

233. Tableau
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 233
     

     View Slide

234. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 234
     

     View Slide

235. Demo
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 235
     

     View Slide

236. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 236
     

     View Slide

237. Thank you!
     @nacyo_t
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 237
     

     View Slide