Save 37% off PRO during our Black Friday Sale! »

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

Afeb8054efb8e03aab4ed7d90a52f11c?s=47 nacyot
November 13, 2015

정보시각화란 무엇인가 - 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가 이러한 맥락 위에서 왜 중요한 지를 다룬다.

Afeb8054efb8e03aab4ed7d90a52f11c?s=128

nacyot

November 13, 2015
Tweet

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