정보시각화란 무엇인가 - 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
2. ؘ੉ఠӒ۔ 2015. 11. 10. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 2
3. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 3
4. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 4
5. Programmer blog.nacyot.com ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 5
6. I ❤ Infoviz ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 6
7. First Impact ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 7
8. ਤః ೦ݾٜ р੄ োѾ ҙ҅ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 8
9. WikiWiki • c2.com - Graph Viz • moinmoin • moniwiki ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 9
10. ݅ചо ૑ب(2007) ࢸޙઑࢎ ӝ߈ э੉ ঱әػ ݅ചо Graphviz HTML - ೞ੉ಌ݂௼ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 10
11. what is Information Visualization ? ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 11
12. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 12
13. Positioning ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 13
14. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 14
15. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 15
16. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 16
17. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 17
18. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 18
19. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 19
20. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 20
21. Intersection ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 21
22. ా҅೟੉ݶࢲ, ٣੗ੋ੉ݶࢲ, ೐۽Ӓې߁ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 22
23. Ҋਬ੄ ৔ష਷ য٣ী... ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 23
24. ׮ܰѱ ਤ஖૙ӝ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 24
25. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 25
26. Intersection ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 26
27. ా҅೟੉ݶࢲ, ٣੗ੋ੉ݶࢲ, ೐۽Ӓې߁ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 27
28. Visualization itself ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 28
29. য়ט੄ ੉ঠӝ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 29
30. Definition ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 30
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
32. ੿ࠁदпച ੿ࠁदпചח ࢎۈ੄ ੋ૑ܳ ഛ੢ೡ ࣻ ੓ѱ ೧઱ח ୶࢚ ੸ ؘ੉ఠ੄ (ੋఠ۩౭࠳ೠ) दп੸ ಴അী ؀ೠ োҳ੉׮. ੉ ٸ ୶࢚੸ ؘ੉ఠח ࣻ஖੸ੋ ؘ੉ఠ৬ ఫझ౟ա ૑ܻ ੿ࠁ৬ э਷ ࠺ࣻ஖੸ ؘ੉ఠܳ ݽف ನೣೠ׮. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 32
33. ੿ࠁदпച ੿ࠁदпചח ࢎۈ੄ ੋ૑ܳ ഛ੢ೡ ࣻ ੓ѱ ೧઱ח ୶࢚ ੸ ؘ੉ఠ੄ (ੋఠ۩౭࠳ೠ) दп੸ ಴അী ؀ೠ োҳ੉׮. ੉ ٸ ୶࢚੸ ؘ੉ఠח ࣻ஖੸ੋ ؘ੉ఠ৬ ఫझ౟ա ૑ܻ ੿ࠁ৬ э਷ ࠺ࣻ஖੸ ؘ੉ఠܳ ݽف ನೣೠ׮. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 33
34. ੿ࠁदпച दп੸ ಴അ ୶࢚੸ ؘ੉ఠ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 34
35. दп੸ ಴അ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 35
36. ഥച ؊ ੊ࣼೞҊ ੌ߈੸ੋ Ѫ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 36
37. ഥച৬ दпച੄ ର੉ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 37
38. ୶࢚੸ ؘ੉ఠ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 38
39. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 39
40. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 40
41. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 41
42. ৈ੹൤ Ү૘೤ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 42
43. ੿Үೞѱ ҃҅૙ӝ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 43
44. ഥച ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 44
45. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 45
46. Ӓی٘ ੗౟ ࢻ੄ ੌਃੌ য়റ Un dimanche après-midi à l'Île de la Grande Jatte ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 46
47. 207 * 308cm ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 47
48. 1884-1886 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 48
49. Pointilism ޖࣻ൤ ݆਷ ੼ٜ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 49
50. ഥച੄ ࠄ૕ verb. Ӓܻ׮ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 50
51. ੿ࠁदпച ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 51
52. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 52
53. Exports & Imports to and from all NORTH-AMERICA William Playfair ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 53
54. ୭ୡ੄ ా҅੸ Ӓې೐ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 54
55. ݃஖ ഥച୊ۢ ࠁ੐ दп੸ ಴അ੉ۄח ౠ૚ਸ ҕਬೞӝ ٸޙ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 55
56. 
     ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 56
57. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 57
58. Ceci n'est pas une peinture ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 58
59. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 59
60. ഥച ੿ޛ, ೂ҃, ੋޛ, ࢚࢚, ... ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 60
61. ৵ ୶࢚੸ ؘ੉ఠ݅ ౠ߹ೠо? ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 61
62. ా҅੸ Ӓې೐੄ ੗زࢿ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 62
63. ా҅੸ Ӓې೐ ߈٘द ؘ੉ఠܳ ಴അ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 63
64. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 64
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
66. ా҅੸ Ӓې೐੄ ੗زࢿ ਋ܻח ӝ੷੄ ؘ੉ఠܳ ߸҃दఃѢա ؘ੉ఠܳ ੿ഛೞҊ ੸੺ೞѱ ಴അ೧ঠೠ׮ח ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೞ ૑ ঋח ೠ, ੼ٜ੄ ਤ஖ա ё୓੄ ࢝(੉۞ೠ ਃٜࣗ਷ ؘ ੉ఠܳ ಴അೞח ࣘࢿٜ੉ۄח о੿ೞী)ٜਸ ߄Ե ࣻ হ ׮. ٮۄࢲ Ӓې೗ दझమ੄ ೨ब਷ झಖ(specification)ী ੓׮. — The Grammar of Graphics 6p ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 66
67. ా҅੸ Ӓې೐ܳ ߸ചदఃח ߑߨ 1. ӝ੷੄ ؘ੉ఠܳ ߸҃ 2. ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೠ׮ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 67
68. ӝ੷੄ ؘ੉ఠ ߸҃ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 68
69. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 69
70. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 70
71. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 71
72. ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೠ׮ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 72
73. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 73
74. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 74
75. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 75
76. Ӓې೐ח ؘ੉ఠী ؀೧ࢲ ੗ز੸ਵ۽ Ӓ۰૓׮ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 76
77. Junk Chart ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 77
78. Ӓې೐ח ؘ੉ఠী ؀೧ࢲ ੗ز੸ਵ۽ Ӓ۰૓׮ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 78
79. ׮ܰѱ ಴അೞݶ ޖ঺ب (૒੽) Ӓܻ૑ ঋח׮ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 79
80. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 80
81. ੿ࠁदпച੄ ౠ૚ दп੸ ಴അ ୶࢚੸ ؘ੉ఠ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 81
82. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 82
83. ই૒ ੉ঠӝೞ૑ ঋ਷ Ѫ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 83
84. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 84
85. HOW ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 85
86. ؘ੉ఠח যڌѱ Ӓې೐о غחо? ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 86
87. Ӓې೐ח ੗োߊࢤ੸੉૑ ঋ׮ 1800֙؀ী ୊਺ਵ۽ ߊݺ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 87
88. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 88
89. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 89
90. ׮द The Grammar of Graphics ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 90
91. ా҅੸ Ӓې೐੄ ੗زࢿ ਋ܻח ӝ੷੄ ؘ੉ఠܳ ߸҃दఃѢա ؘ੉ఠܳ ੿ഛೞҊ ੸੺ೞѱ ಴അ೧ঠೠ׮ח ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೞ ૑ ঋח ೠ, ੼ٜ੄ ਤ஖ա ё୓੄ ࢝(੉۞ೠ ਃٜࣗ਷ ؘ ੉ఠܳ ಴അೞח ࣘࢿٜ੉ۄח о੿ೞী)ٜਸ ߄Ե ࣻ হ ׮. ٮۄࢲ Ӓې೗ दझమ੄ ೨ब਷ झಖ(specification)ী ੓׮. — The Grammar of Graphics 6p ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 91
92. ా҅੸ Ӓې೐੄ ੗زࢿ ਋ܻח ӝ੷੄ ؘ੉ఠܳ ߸҃दఃѢա ؘ੉ఠܳ ੿ഛೞҊ ੸੺ೞѱ ಴അ೧ঠೠ׮ח ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೞ ૑ ঋח ೠ, ੼ٜ੄ ਤ஖ա ё୓੄ ࢝(੉۞ೠ ਃٜࣗ਷ ؘ ੉ఠܳ ಴അೞח ࣘࢿٜ੉ۄח о੿ೞী)ٜਸ ߄Ե ࣻ হ ׮. ٮۄࢲ Ӓې೗ दझమ੄ ೨ब਷ झಖ(specification) ী ੓׮. — The Grammar of Graphics 6p ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 92
93. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 93
94. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 94
95. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 95
96. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 96
97. ࢸݺغ૑ ঋ਷ աݠ૑ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 97
98. ߄۽ ৈӝо ੿ࠁदпച Ҋਬ੄ ৔ష ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 98
99. ৵ दпചח ഥചо ইצо 1. ಴അೞח ؀࢚੉ ׮ܰ׮ 2. ؘ੉ఠী ੄೧ ੗ز੸ਵ۽ Ӓ۰૓׮ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 99
100. ӒܻҊ ೠ о૑ ؊ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 100
101. ؘ੉ఠ + ର౟ ೣࣻ = Ӓې೐ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 101
102. ؘ੉ఠ1 + ର౟ ೣࣻ = Ӓې೐1 ؘ੉ఠ2 + ର౟ ೣࣻ = Ӓې೐2 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 102
103. ؘ੉ఠ1 + ର౟ ೣࣻ = Ӓې೐1 ؘ੉ఠ2 + ର౟ ೣࣻ = Ӓې೐2 ؘ੉ఠ3 + ର౟ ೣࣻ = Ӓې೐3 ؘ੉ఠ4 + ର౟ ೣࣻ = Ӓې೐4 ... ؘ੉ఠx + ର౟ ೣࣻ = Ӓې೐x ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 103
104. ৔Ҵ ؀ ࠘޷ ޖ৉ ࣻ૑ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 104
105. ৔Ҵ ؀ ֢ܰਝ੉ & ؚ݃௼ ࣻ૑ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 105
106. ৔Ҵ ؀ ইੌے٘ ޖ৉ ࣻ૑ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 106
107. ഥചח Ӓ ੗୓۽ ҳ࢚੸ਵ۽ ৮Ѿ दпചח ୶࢚੸੉޲۽ ࠺৮Ѿ੸ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 107
108. ਧܻষ ೒ۨ੉ಕযח ੕ഃ૑Ҋ ର౟ ഋध݅ ࢓ইթ਷ ੉ਬ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 108
109. ୶࢚੸ੋ ޖ঱о ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 109
110. Specification੄ ੿୓ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 110
111. ؘ੉ఠܳ दп੸ ಴അਵ۽ ߸ജೞח ӏ஗ٜ੄ ૘೤ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 111
112. ইө ର౟ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 112
113. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 113
114. Ӓؘ۠, दпച ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 114
115. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 115
116. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 116
117. ޥо ࣘ਷ ӝ࠙ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 117
118. ର౟ ੌ߈੸੉Ҋ ੿ഋചػ ӏ஗ ૘೤ ޷ܻ ٣੗ੋػ ӏ஗૘೤ ೐۽Ӓ۔ীࢲ ઱য૑ח ӏ஗૘೤ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 118
119. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 119
120. Spec, Spec Spec, Spec Spec, Spec Spec, Spec Spec, Spec Spec, Spec ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 120
121. Rules, Rules Rules, Rules Rules, Rules Rules, Rules Rules, Rules Rules, Rules ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 121
122. ର౟ ۄ੉࠳۞ܻ ର౟ ૑ਗ ೐۽Ӓ۔ п ର౟ ఋੑ਷ Ӓې೐ܳ ࢤࢿೞח ೞա੄ ӏ஗૘೤ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 122
123. Ӓې೗ ޙߨ੄ ࣁ҅۽ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 123
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
125. Ӓې೗੄ ޙߨ(1) ޙߨ਷ ঱য੄ ಴അਸ ೂࠗೞѱ ݅ٚ׮. ױয݅ ੓Ҋ ޙߨ ੉ হח ঱যо ੓׮ݶ(૊, ױযо ҍ ޙ੢), য়૒ ױযо ઓ੤ೞח ݅ఀ੄ ই੉٣য݅ਸ ಴അೡ ࣻ ੓ਸ Ѫ੉׮. ޙ ੢ উীࢲ ױযо যڌѱ ҳࢿغח ૑ܳ ӏ੿ೣਵ۽ࢲ, ޙ ߨ਷ ঱য੄ ߧਤܳ ഛ੢ೠ׮. — Leland Wilkinson The Grammar of Graphics 1p ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 125
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
127. Ӓې೗੄ ޙߨ(2) ੉ ଼਷ ੋ૑ೡ ࣻ ੓ח Ӓې೐ա ਋ܻо Ӓې೗੉ۄҊ ࠗ ܰח Ѫਸ ٜ݅ӝ ਤೠ ޙߨ੸ ӏ஗ী ҙೠ ଼੉׮. Ӓې೗ ੄ ޙߨ਷ ਋ܻܳ ઁೠػ ઙܨ੄ ର౟ٜ(ױয)۽ࠗఠ Ѣ੄ ޖೠೠ Ӓې೗ ഋక(ޙ੢)੄ ࣁ҅۽ ؘ۰т Ѫ੉׮. — Leland Wilkinson The Grammar of Graphics 1p ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 127
128. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 128
129. ର౟੄ ೠ҅ ױয੸ ࣁ҅ ݄؀ Ӓې೐, ਗ Ӓې೐, ԃ਷ࢶ Ӓې೐, ־੸ ݄؀Ӓې೐, ۨ੉؊ ର౟, ࢑ನب, ࢚੗ ࣻ৏ Ӓ۔, ಣ೯ Ӓې೐, ൤झ ఠӒ۔, ࢚ನష ೯۳, 3ରਗ ݄؀Ӓې೐, о۽ ݄؀ Ӓې ೐, ৔৉ Ӓې೐, ... ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 129
130. ޙߨ੸ਵ۽ ࠙ࢳೞӝ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 130
131. GPL Graphic Production Language ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 131
132. GPL • The Grammar of Graphics੄ ੉ۿীࢲ ࢎਊ • SPSSী पઁ ੘زೞח ҳഅ੉ ੓਺ • Ӓې೗੄ ޙߨਸ ӝࣿೞӝ ਤೠ Ҋਬ੄ ޙߨ • Ҋࣻળ ࢶ঱੸ ঱য(ਃࣗܳ ૒੽ Ӓܻ૑ ঋ਺) ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 132
133. How to make a pie The Grammar of Graphics 23p ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 133
134. From data to graphic The Grammar of Graphics 24p ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 134
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
136. ੢੼੉ ަөਃ? ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 136
137. ੼ ؀न ఫझ౟ܳ ࢎਊೞҊ र׮ݶ? ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 137
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
139. ޙߨ੄ ର੉ ੼ਵ۽ ಴അೞӝ ELEMENT: point(position(salbegin*salary)) ఫझ౟۽ ಴അೞӝ ELEMENT: point(position(BAORHIGHER*OBESITY), label(StateAbbr), size(0)) ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 139
140. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 140
141. Ѣ੄ ݽٚ ର౟ ೐۽Ӓ۔ীࢲ ࠛоמೠ ੌ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 141
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
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
144. scatter plot ੿੄ী ੼ਵ۽ ಴അೠ׮ח ੄޷о ನೣ ؀ࠗ࠙੄ ର౟ח ੉ ੿੄ী ୽प ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 144
145. ױয੄ ࣁ҅ ޙߨ੄ ࣁ҅ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 145
146. ױ, GPL਷ Ѣ੄ ࢎਊغ૑ ঋ਺ पҳഅ੉ ੓׮Ҋח ೞա, ইޖب ݽܴ അ੤ पઁ۽ ࢎਊоמೠ૑ب ࠛైݺ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 146
147. ggplot2 GoG੄ ਬ࢑ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 147
148. ggplot2੄ gg The Grammar of Graphics ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 148
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
150. ggplot2ীࢲ ࢑ನب Ӓܻӝ (2) ggplot(dataset, aes(x = x, y = y)) + geom_point() ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 150
151. ੼ ؀न ఫझ౟ ࢎਊೞӝ id = seq(1, 100) ggplot(dataset, aes(x = x, y = y)) + geom_text(label=id, size=3) ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 151
152. ggplot2੄ ౠ૚ • ର౟ بҳٜী ࠺೧ ঑ب੸ੋ ಴അ۱ • ઑ೤ਸ ా೧ ݒ਋ ׮নೠ ಴അ оמ • അ੤ Rীࢲ о੢ ݆੉ ࢎਊغח ಁః૑ • GoG੄ о੢ पਊ੸ੋ ҳഅ੉ۄҊ ೡ ࣻ ੓਺ • GoG੄ ৮੹ೠ ҳഅ਷ ইש • ઁডب ݆Ҋ, ة੗੸ੋ ౠࢿٜب ੓਺ • ੜ ࢶ߹ػ ӝࠄ чٜ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 152
153. GPLҗ ggplot2 ࠺Ү A Layered Grammar of Graphics - Hadley Wickham ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 153
154. ggplot2੄ ೠ҅ • ઑ೤ਸ ాೠ ా҅੸ Ӓې೐੄ ߸઱ • ࢎਊоמೠ दп੸ ਃࣗ੄ ઁೠ • ಴അ ੗୓ܳ ߊݺೞӝח য۰਑ • ݒ਋ Ҋࣻળ ঱য੐ • ੘زߑधী ѐੑೞӝо औ૑ ঋ਺ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 154
155. ؊ ੷ࣻળਵ۽ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 155
156. ӒܻҊ Protovis ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 156
157. ױয(ର౟)ܳ ୭؀ೠ ଂѐࠁ੗ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 157
158. ݄؀Ӓې೐ ױয ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 158
159. ݄؀/Ӓې೐ ੄޷ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 159
160. ݄/؀/Ӓ/ې/೐ Ӗ੗ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 160
161. ର౟(ױয)ܳ ڳযࠁӝ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 161
162. ର౟ܳ ଂѐݶ աয়ח Ѫ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 162
163. Rule (1) • GPL / ggplot2 • Data -> ࠶ۑ߅झ -> दп੸ ਃࣗ • Ҋਬ੄ ޙߨਵ۽ ӝࣿ(р੽੸, ࠶ۑ߅झ) • Protovis / D3.js • Data -> दп੸ ਃࣗ • ౠ൤ D3.jsীࢲח ૒੽ SVG ਃٜࣗਸ ׮ܚ • ؘ੉ఠо যڌѱ ݗೝغח ૑ ૒੽ ੿੄(૒੽੸) ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 163
164. Rule (2) • GPL / ggplot2 • ੉ ؘ੉ఠܳ xઝ಴ী ؀਽दெ઻ • ղࠗ੸ਵ۽ ੸੺൤ ୊ܻؽ • Protovis / D3.js • ੉ ؘ੉ఠ۽ࠗఠ ੉ۧѱ ҅࢑ೠ Ѿҗо x ઝ಴ঠ • ೐۽Ӓېݠо ૒੽ ؘ੉ఠ৬ दп੸ ਃࣗܳ ઁয ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 164
165. ex) ݄؀ Ӓې೐ ݄؀ Ӓې೐ܳ ҳࢿೞח ӏ஗ٜ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 165
166. ݄؀Ӓې೐ • ݄؀ח 0ਸ ӝળࢶਵ۽ द੘ೠ׮. • ؘ੉ఠ੄ ௼ӝח ݄؀੄ ֫੉ܳ Ѿ੿ೠ׮ • ݄؀ח ੸੺ೠ ց࠺ܳ о૓׮ • ݽٚ ݄؀੄ ց࠺ח э׮ • ؘ੉ఠ੄ ࣽࢲח ݄؀੄ ਤ஖ܳ Ѿ੿ೠ׮ • Y୷਷ о੢ 0ীࢲ о੢ ௾ ч + @۽ ೠ׮ • ... ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 166
167. ੉ ӏ஗ٜਸ ૒੽ ೐۽Ӓ۔ਵ۽ ੘ࢿ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 167
168. ੄৻۽ য۰਑ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 168
169. ־ҳա ݄؀ Ӓې೐ܳ ੉೧ೞ૑݅ ӏ஗ਸ ঌҊ ੓ח ҃਋ח ٘ޛ׮ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 169
170. ইޖب উ оܰ୛ ઻ਃ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 170
171. ݄؀Ӓې೐ Protovis Specification ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 171
172. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 172
173. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 173
174. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 174
175. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 175
176. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 176
177. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 177
178. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 178
179. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 179
180. λ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 180
181. تয়੄ ࣽр ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 181
182. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 182
183. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 183
184. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 184
185. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 185
186. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 186
187. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 187
188. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 188
189. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 189
190. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 190
191. SVG੄ ࣁ҅۽ Protovis to D3.js ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 191
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
193. Mick Bostock (1) दп੸ ੋ௏٬ী ؀೧ ؊ ࢶ঱੸ੋ ۄ੉࠳۞ܻܳ ݅٘ח ؘ ੓যࢲ ର౟ ਬഋ೟ਸ ೖೠ׮ח ੼ীࢲ The Grammar of Graphics੄ ৔ೱب ߉ও׮. ೞ૑݅ D3ח Ѿҗ੸ਵ۽ ખ ؊ ੷ࣻળਵ۽ ٜ݅য઎ਵݴ ݆੉ ׮ܰ׮. Reddit - Hi! I’m Mike Bostock ... ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 193
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
195. Mick Bostock (2) ଴झ ޷ա٘, ਧܻষ ೒ۨ੉ಕয, ੗௼ ߡ౯੉ ࣚਵ۽ दп ച ੘সਸ ೞݶࢲ ؊ ݆਷ ઁযӂਸ о૑Ҋ ੓঻٠੉, աח ٣੗੉ցٜীѱ ୹۱ী ؀೧ ؊ ݆਷ ઁযӂਸ ઱Ҋ र঻ ׮. Protovisীࢲب ৈ੹൤ ݃௼(mark) ఋੑٜ੄ ઁডٜ ਸ וԑ৳׮. Ӓېࢲ աח DOMҗ SVGܰ ୭؀ೠ ഝਊೡ ࣻ ੓ח ߑߨਸ ਗ೮׮. Reddit - Hi! I’m Mike Bostock ... ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 195
196. ׮द, ݄؀Ӓې೐ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 196
197. from CSE512 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 197
198. ŶƄŦŬƅŦƖŮƅƂƖ ੗ݽ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 198
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
200. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 200
201. D3.js੄ ೠ҅ = SVG੄ ೠ҅ ѢԲ۽ ݈ೞݶ DOMҗ SVGܳ ੜ ঌইঠೣ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 201
202. ׮द, ੿ࠁदпചۆ ޖ঺ੋо? ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 202
203. ӏ஗(૘೤)ਸ ٣੗ੋೞӝ Declarative Language ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 203
204. दпച੄ ࠄ૕ ӏ஗ਸ ٣੗ੋೞח Ѫ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 204
205. ӏ஗ٜਸ ݽਵݶ ӝࢿ੸ੋ ର౟ ӝࢿ੸ੋ ର౟੄ ߸઱ ৮੹൤ ࢜۽਍ ಴അ ߑध ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 205
206. ӏ஗੉ ੿೧૑Ҋ աݶ ٣੗੉ցח Ѿҗޛী ѐੑೡ ࣻ হ׮ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 206
207. दпച ٣੗੉ցۆ? ӏ஗ਸ ੿੄ೞח ࢎۈ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 207
208. D3.jsח ੿ࠁदпചীࢲ ৵ ઺ਃೠо? ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 208
209. D3 ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 209
210. Data Driven Document ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 210
211. Declarative Declarative Declarative ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 211
212. दпച੄ ࠄ૕ী о੢ ੸೤ ੿ࠁदпച Ҋਬ੄ ৔ష ਤীࢲ ӏ஗ਸ ٣੗ੋೞח بҳ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 212
213. ࢎ۹ - ঠन ೐۽ં౟ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 213
214. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 214
215. ಁथ ಣݶ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 215
216. थܫ ҕр ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 216
217. ੹੸ о੉٘ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 217
218. ੼੄ ௼ӝ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 218
219. ഥ੹ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 219
220. ݽٚ ҃ӝ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 220
221. This isn't a scatter plot ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 221
222. ࢜۽਍ ӏ஗ ૘೤ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 222
223. ޖೠ൤ ׮নೠ ؘ੉ఠࣇ ޖೠ൤ ׮নೠ ӏ஗ ૘೤ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 223
224. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 224
225. ޖݺ੄ ࣁ҅ ӏ஗ ૘೤݅੉ ੓ਸ ࡺ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 225
226. mbostock's blocks ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 226
227. eyeo 2013 - For Example ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 227
228. જ਷ दпച ࢎ۹ח ׮द ਬഋച • Treemap • Bubble Chart • Chord Diagram • Sunburst • Calendar View • Choropleth ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 228
229. ૑Ә ਋ܻח য٣ী ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 229
230. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 230
231. ઁ೐ܻ ൤য੄ ࠙ܨ ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 231
232. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 232
233. Tableau ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 233
234. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 234
235. Demo ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 235
236. ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 236
237. Thank you! @nacyo_t ੿ࠁदпച Ҋਬ੄ ৔షਸ ଺ইࢲ © nacyot 2015 237