Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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가 이러한 맥락 위에서 왜 중요한 지를 다룬다.

nacyot

November 13, 2015
Tweet

More Decks by nacyot

Other Decks in Programming

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