시각화 디자인 - 회화를 넘어 규칙 디자인으로

시각화 디자인 - 회화를 넘어 규칙 디자인으로
정보시각화 고전 독서 모임 일곱번째 모임(2015. 9. 1.)

http://blog.nacyot.com

정보 시각화는 눈으로 보이는 무언가를 화면이나 종이에 나타낸다는 점에서 얼핏 회화와 비슷해보입니다. 하지만 회화와 정보 시각화에는 결정적인 차이가 있습니다. 화가는 최종 결과물을 직접 그리는 반면에, 시각화 디자이너는 최종 결과물이 아닌, 최종 결과물을 생성하는 규칙을 디자인합니다.

통계적 그래프는 데이터를 표현합니다. 규칙이란 이러한 데이터를 표현하는 방법입니다. 따라서 디자이너라고 할지라도 규칙이 한 번 정의되고 나면 데이터를 표현하는 한에 있어서 시각적 속성을 임의로 변경해서는 안 됩니다.

이 발표에서는 회화와 비교를 통해서 시각화 디자이너의 역할을 좀 더 명시적으로 정의하면, 특히 protovis나 D3.js와 같은 도구들이 이러한 규칙 디자인에 어떻게 접목되는 지 기반 아이디어에 대해서 살펴봅니다.

Transcript

1. दпച ٣੗ੋ ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 1
2. ഥച[ἆẼ] [ഥ:-/ാ:-] ˝ ಣݶ࢚ী ࢝଻৬ ࢶਸ ॄࢲ ৈ۞ о૑ ഋ࢚җ ו՛ ߄ܳ ಴അೞח ઑഋ ৘ࣿ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 2
3. दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 3
4. Ӓی٘ ੗౟ ࢻ੄ ੌਃੌ য়റ Un dimanche après-midi à l'Île de la Grande Jatte दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 4
5. 207х308cm दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 5
6. 1884~1886֙ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 6
7. ഥചח Ѿҗޛਸ ૒੽ Ӓܻח ೯ਤ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 7
8. दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 8
9. ୭ୡ੄ ా҅੸ Ӓې೐ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 9
10. Exports & Imports to and from all NORTH-AMERICA William Playfair दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 10
11. ੉Ѫب ഥച۽ ࠁ੉दաਃ? दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 11
12. Ceci n'est pas une peinture दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 12
13. ৵ दпചח ഥചо ইצо? दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 13
14. ੿ࠁ दпച ੿ࠁܳ दп੸ਵ۽ ಴അೞӝ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 14
15. ഥചۆ Ѿҗޛਸ ૒੽ Ӓܻח ೯ਤ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 15
16. दпച ٣੗ੋ੉ۆ Ѿҗޛ੉ Ӓ۰૑ח ߑधਸ ੿੄ೞח ೯ਤ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 16
17. ੿ࠁо ઱য૑ݶ Ѿҗޛ਷ ੗ز੸ਵ۽ Ӓ۰૓׮ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 17
18. ੿ࠁ৬ ӏ஗੉ ઱য૑ݶ Ѿҗޛ਷ ੗ز੸ਵ۽ Ӓ۰૓׮ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 18
19. ా҅੸ Ӓې೐੄ ੗زࢿ 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 - 19
20. ా҅੸ Ӓې೐੄ ੗زࢿ ਋ܻח ӝ੷੄ ؘ੉ఠܳ ߸҃दఃѢա ؘ੉ఠܳ ੿ഛೞҊ ੸੺ೞѱ ಴അ೧ঠೠ׮ח ా҅੸ Ӓې೗੄ ݾ੸ਸ ߓ߈ೞ ૑ ঋח ೠ, ੼ٜ੄ ਤ஖ա ё୓੄ ࢝(੉۞ೠ ਃٜࣗ਷ ؘ ੉ఠܳ ಴അೞח ࣘࢿٜ੉ۄח о੿ೞী)ٜਸ ߄Ե ࣻ হ ׮. ٮۄࢲ Ӓې೗ दझమ੄ ೨ब਷ झಖ(specification)ী ੓׮. — The Grammar of Graphics 6p दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 20
21. Ӓې೐ח ؘ੉ఠী ؀೧ࢲ ੗ز੸ਵ۽ Ӓ۰૓׮ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 21
22. Demo Numberীࢲ Ӓې೐ Ӓܻӝ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 22
23. What is specification? दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 23
24. Rules Ӓې೐о Ӓ۰૑ח ӏ஗ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 24
25. Rules that bind data with aesthetics दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 25
26. ഥച ҳ࢚੸ੋ ࣁ҅ ೞա੄ ഥച = ೞա੄ ഥച दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 26
27. दпച ୶࢚੸ੋ ࣁ҅ ೞա੄ ӏ஗ + ׮নೠ ؘ੉ఠ = ݆ࣻ਷ Ӓې೐ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 27
28. Demo Numberীࢲ Data ߸҃ೞӝ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 28
29. दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 29
30. пп੄ ର౟ఋੑ਷ Ӓې೐о Ӓ۰૑ח ӏ஗૘೤ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 30
31. Rules, Rules Rules, Rules Rules, Rules Rules, Rules Rules, Rules Rules, Rules दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 31
32. ର౟ ۄ੉࠳۞ܻ п ର౟ ఋੑ਷ Ӓې೐ܳ ࢤࢿೞח ೞա੄ ӏ஗૘೤ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 32
33. ٣੗ੋػ ӏ஗૘೤ ઱য૑ח ӏ஗૘೤ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 33
34. ӏ஗ਸ ٣੗ੋೞӝ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 34
35. Data -> Aesthetics दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 35
36. Input -> Output दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 36
37. λ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 37
38. Protovis दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 38
39. تয়੄ ࣽр दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 39
40. from CSE512 दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 40
41. from CSE512 दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 41
42. from CSE512 दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 42
43. from CSE512 दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 43
44. from CSE512 दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 44
45. from CSE512 दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 45
46. from CSE512 दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 46
47. from CSE512 दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 47
48. from CSE512 दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 48
49. Declarative Language दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 49
50. ӏ஗੉ ੿೧૑Ҋ աݶ ٣੗੉ցח Ѿҗޛী ѐੑೡ ࣻ হ׮ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 50
51. दпച ٣੗੉ցۆ? ӏ஗ਸ ੿੄ೞח ࢎۈ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 51
52. ONLY ೐۽Ӓې߁ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 52
53. بݎо૑ ݃ࣁਃ दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 53
54. D3.js दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 54
55. Data Driven Document दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 55
56. Declarative Declarative Declarative दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 56
57. D3.js Example दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 57
58. Why not Pure Javascript दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 58
59. Thank you! दпച ٣੗ੋ - ഥചܳ ֈয ӏ஗ ٣੗ੋਵ۽ © nacyot 2015 - 59