Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansamblu

505 views

Published on

O viziune de ansamblu referitoare la vizualizarea datelor în contextul Web, inclusiv diverse tehnici + exemple reale. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Design
  • Be the first to comment

CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansamblu

  1. 1. Dr.SabinBuragawww.purl.org/net/busaco Dezvoltarea aplicațiilor Web la nivel de client ◕ vizualizarea datelor o privire de ansamblu
  2. 2. Dr.SabinBuragawww.purl.org/net/busaco “Above all else show the data.” Edward R. Tufte
  3. 3. Dr.SabinBuragawww.purl.org/net/busaco Cum redăm și interacționăm cu datele existente (procesate de software)?
  4. 4. Dr.SabinBuragawww.purl.org/net/busaco caracteristici ale datelor: varietate, volum, dinamicitate adaptare după http://blog.sqlauthority.com data variety data velocity data volume real-time (stream) interval (continuous) batch (atomic) sparse (discrete) unstructured RDBMS semi- struc- tured XML multi- media JSON CSV bi- nary KB MBGB TBEB PBZB YB
  5. 5. Dr.SabinBuragawww.purl.org/net/busaco Realitate volumul mare de date disponibile (în special pe Web)
  6. 6. Dr.SabinBuragawww.purl.org/net/busaco www.worldometers.info
  7. 7. Dr.SabinBuragawww.purl.org/net/busaco Necesități integrarea, simplificarea și monetizarea sistemelor informaționale existente și a volumelor masive de date pe care acestea le dețin de parcurs www.softviscollection.org/intro/a-thousand-words/
  8. 8. Dr.SabinBuragawww.purl.org/net/busaco DIKW (DataInformationKnowledgeWisdom) adaptare după S. Carpenter, 2008 și J. Liebowitz, 2012
  9. 9. Dr.SabinBuragawww.purl.org/net/busaco Ce reprezintă vizualizarea datelor?
  10. 10. Dr.SabinBuragawww.purl.org/net/busaco Data visualization o clasă de tehnici vizând augmentarea cogniției “the use of computer-supported, interactive, visual representations of abstract data in order to amplify cognition” Card, Mackinlay & Shneiderman, 1999
  11. 11. Dr.SabinBuragawww.purl.org/net/busaco Data visualization proces de asociere a informației la factori vizuali “data visualization is expert storytelling” – Murray, 2013
  12. 12. Dr.SabinBuragawww.purl.org/net/busaco Data visualization proces de asociere a informației la factori vizuali “data visualization is expert storytelling” – Murray, 2013 definirea de reguli de interpretare a datelor și exprimarea valorilor lor ca proprietăți vizuale
  13. 13. Dr.SabinBuragawww.purl.org/net/busaco informa- tion design data per- ceptuali- zation data visuali- zation scientific visuali- zation
  14. 14. Dr.SabinBuragawww.purl.org/net/busaco Criterii minimale pe care trebuie să le îndeplinească orice tehnică de vizualizare pragmatică: recurgerea la date (non-vizuale) producerea unei imagini rezultatele oferite să fie lizibile și recognoscibile Robert Kosara, 2008 http://eagereyes.org/criticism/definition-of-visualization
  15. 15. Dr.SabinBuragawww.purl.org/net/busaco Beneficii – adaptare după Card et al. (2009): reducerea căutării informațiilor de interes
  16. 16. Dr.SabinBuragawww.purl.org/net/busaco Beneficii – adaptare după Card et al. (2009): îmbunătățirea detectării tiparelor (patterns)
  17. 17. Dr.SabinBuragawww.purl.org/net/busaco Beneficii – adaptare după Card et al. (2009): codificarea informațiilor în cadrul unui mediu interactiv
  18. 18. Dr.SabinBuragawww.purl.org/net/busaco Beneficii – adaptare după Card et al. (2009): monitorizarea evoluției datelor/cunoștințelor
  19. 19. Dr.SabinBuragawww.purl.org/net/busaco How Music Travels – un experiment de vizualizare animată http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/ discuție
  20. 20. Dr.SabinBuragawww.purl.org/net/busaco Beneficii: realizarea de inferențe (contexte: inteligența artificială, Web semantic) decizii + predicții (context: învățare automată) www.r2d3.us/visual-intro-to-machine-learning-part-1/
  21. 21. Dr.SabinBuragawww.purl.org/net/busaco Beneficii – adaptare după Card et al. (2009): permiterea explorării spațiului valorilor parametrilor de vizualizare și facilitarea operațiilor desfășurate de utilizatori (de la date la informații și cunoștințe)
  22. 22. Dr.SabinBuragawww.purl.org/net/busaco vezi Hans Rolins, “New insights on poverty”, TED 2007 www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty discuție
  23. 23. Dr.SabinBuragawww.purl.org/net/busaco Alte beneficii – adaptare după N. Chibana (2015): reliefarea unor tendințe (trends) plasarea datelor/informațiilor într-un context specific oferirea de perspective asupra unui subiect/domeniu stimularea imaginației utilizatorului exemplificări la http://blog.visme.co/examples-data-visualizations/
  24. 24. Dr.SabinBuragawww.purl.org/net/busaco Origini hărți specifică, într-o manieră abstractă, arii geografice cunoscute + oferă moduri de orientare ulterior, pun la dispoziție informații pentru crearea de strategii în caz de ostilități
  25. 25. Dr.SabinBuragawww.purl.org/net/busaco Imago Mundi – Babilon (secolul V î.e.n.) www.ancient-wisdom.co.uk/cartography.htm imagini oferite de Wikimedia Commons
  26. 26. Dr.SabinBuragawww.purl.org/net/busaco Origini diagrame vezi lucrările lui Euclid în domeniul geometriei utilizate în știință (e.g., de Newton) pentru a înregistra observații, a determina relații, a explica metodologia unor experimente, a clasifica și conceptualiza fenomene
  27. 27. Dr.SabinBuragawww.purl.org/net/busaco data visualization ilustrarea fenomenelor optice – Isaac Newton conform Robin (1992)
  28. 28. Dr.SabinBuragawww.purl.org/net/busaco Origini diagrame abstracte privesc informații non-fizice un exemplu timpuriu: Playfair (1786)
  29. 29. Dr.SabinBuragawww.purl.org/net/busaco Origini design vizual + grafice privind datele  principii de proiectare a vizualizării datelor (infovis) Edward Tufte (1983, 1990, 1997)
  30. 30. Dr.SabinBuragawww.purl.org/net/busaco Origini statistica  analiza exploratorie a datelor (multi-dimensionale) Tukey (1977), Cleveland & McGill (1988)
  31. 31. Dr.SabinBuragawww.purl.org/net/busaco Origini vizualizarea științifică  instrumente software analitice pentru analizarea riguroasă a seturilor de date masive McCormick & DeFanti (1987)
  32. 32. Dr.SabinBuragawww.purl.org/net/busaco Origini grafica computațională + inteligența artificială  proiectarea automată a prezentărilor vizuale ale datelor Mackinlay (1986), Roth & Mattis (1990), Casner (1991)
  33. 33. Dr.SabinBuragawww.purl.org/net/busaco Origini interacțiunea om-calculator  noi interfețe + interacțiuni cu utilizatorul Robertson, Card & Mackinlay (1989), Shneiderman (1992)
  34. 34. Dr.SabinBuragawww.purl.org/net/busaco Data vizualization vs. infographics o tehnică de vizualizare – eventual, generată automat – poate fi aplicată mai multor seturi de date infograficele sunt create – manual – pentru un set particular de date, conform unui scop specific http://eagereyes.org/blog/2010/the-difference-between-infographics-and-visualization
  35. 35. Dr.SabinBuragawww.purl.org/net/busaco data visualization “The nature of the visualization depends on which relationship is dominant.” N. Iliinsky & J. Steele, Designing Data Visualizations, O’Reilly, 2011 Data User De- sig- ner informative visual art persuasive
  36. 36. Dr.SabinBuragawww.purl.org/net/busaco data visualization Data User De- sig- ner informative visual art persuasive data/info viz infographics e.g., generative art vezi și www.slideshare.net/busaco/generative-art-a-gentle-introduction
  37. 37. Dr.SabinBuragawww.purl.org/net/busaco Design privind vizualizările datelor
  38. 38. Dr.SabinBuragawww.purl.org/net/busaco Visualization the mapping of data to visual form that supports human interaction in a workplace for visual sense making
  39. 39. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Stuart Card, “Information Visualization”, Human-Computer Interaction Handbook (2nd Edition), Taylor & Francis, 2008
  40. 40. Dr.SabinBuragawww.purl.org/net/busaco date inițiale, neprelucrate (raw data)  structuri de date: relații + meta-date (data tables)  structuri vizuale: elemente grafice (visual structures)  vizualizări (interactive) percepute de utilizator (views)
  41. 41. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Raw Data (seturi de) date de vizualizat, disponibile în diverse formate – binare/textuale
  42. 42. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Transformations oferă vectori normalizați într-un spațiu n dimensional eventual, pot implica diverse operații de filtrare
  43. 43. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table structuri de date convenabil alese: relații (depinzând de variabilele considerate) și meta-date
  44. 44. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table structuri de date convenabil alese: relații (depinzând de variabilele considerate) și meta-date tabele de obiecte + atributele lor
  45. 45. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table exemplu pentru vizualizări de producții cinematografice obiecte de bază = instanțe ale conceptului „film” atribute (proprietăți) asociate fiecărui obiect – aici, film: titlu, an al apariției, gen, durată, actori,…
  46. 46. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling pot fi considerate meta-date
  47. 47. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table reprezentare funcțională (abstractă) f (input variables) = output variables
  48. 48. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table reprezentare funcțională (abstractă) f (input variables) = output variables Year (FilmID = 540) ≡ 1926
  49. 49. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table variabilele implică o scală de măsurare a valorii lor
  50. 50. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table variabilele implică o scală de măsurare a valorii lor o variabilă nominală N este o mulțime neordonată e.g., titluri de film { Star Wars, Brazil, The Wall,…} pot fi utilizați operatorii de (in)egalitate
  51. 51. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table variabilele implică o scală de măsurare a valorii lor o variabilă ordinală O este un tuplu (mulțime ordonată) e.g., film ratings < G, PG, PG-13, R > pot fi aplicați operatori relaționali – precum „<”
  52. 52. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table variabilele implică o scală de măsurare a valorii lor o variabilă cantitativă Q este un interval numeric e.g., durata filmului [0, 400] pot fi folosiți operatorii aritmetici
  53. 53. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table în funcție de natura vizualizării, se poate recurge la subtipuri de date quantitative spatial – variabile vizând spațiul 2D/3D, folosite pentru vizualizări științifice
  54. 54. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table în funcție de natura vizualizării, se poate recurge la subtipuri de date quantitative geographical – variabile spațiale ce specifică anumite coordonate geografice
  55. 55. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table în funcție de natura vizualizării, se poate recurge la subtipuri de date quantitative similarity – variabile privind similaritatea
  56. 56. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table în funcție de natura vizualizării, se poate recurge la subtipuri de date unstructured scale – variabile având valori speciale, indicând prezența/absența (e.g., error flag)
  57. 57. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling clase de variabile implicate în vizualizarea datelor
  58. 58. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table anumite scale de valori pot fi alterate via transformări
  59. 59. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table anumite scale de valori pot fi alterate via transformări e.g., variabilele cantitative pot avea asociate variabile ordinale durata filmului [0, 400] min. → <SHORT, MEDIUM, LONG> clase de valori
  60. 60. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table anumite scale de valori pot fi alterate via transformări e.g., variabilele nominale pot fi convertite la valori ordinale titluri de filme { Star Wars, Brazil, The Wall } → < The Wall, Star Wars, Brazil > sortare
  61. 61. Dr.SabinBuragawww.purl.org/net/busaco
  62. 62. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Mappings crearea unor abstracțiuni analitice în scopul vizualizării de la coordonate spațiale la suprafețe ale unui „peisaj” informațional 2D/3D
  63. 63. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures utilizarea unui vocabular de elemente vizuale: substraturi spațiale + marcaje + proprietăți grafice
  64. 64. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures scop: asocierea sistematică a relațiilor dintre date într-o formă vizuală codificări vizuale (visual encodings)
  65. 65. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures scop: asocierea sistematică a relațiilor dintre date într-o formă vizuală codificări vizuale (visual encodings) eventual, folosind metafore (revezi cursul anterior)
  66. 66. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures spatial substrate marks connection enclosure retinal properties temporal encoding
  67. 67. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures substrat spațial – spatial substrate spațiul liber disponibil (empty space) poate fi considerat ca având o structură metrică tip de scală ↔ axe spațiale
  68. 68. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures substrat spațial – spatial substrate axe spațiale importante U – valori nestructurate nicio axă N – valori nominale regiune având sub-regiuni O – valori ordinale ordinea sub-regiunilor e importantă Q – valori cantitative o regiune are atașată o metrică
  69. 69. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling
  70. 70. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures substrat spațial – spatial substrate axe spațiale lineare ori radiale pot implica orice sisteme de coordonate spațiale folosite e.g., recurgerea la coordonate carteziene
  71. 71. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures substrat spațial – spatial substrate axe spațiale lineare ori radiale exemplificare: utilizarea a 2 axe ortogonale cantitative pentru vizualizarea popularității unui film în timp Year → QX Popularity → QY
  72. 72. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures marcaje – marks entități vizibile ce apar în spațiu: puncte, linii, arii, volume
  73. 73. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures tipuri de marcaje – marks marcajele de tip punct și linie ocupă loc în spațiu și pot avea asociate proprietăți – precum forma
  74. 74. Dr.SabinBuragawww.purl.org/net/busaco discuție
  75. 75. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures conectori & zone – connection & enclosure punctele și liniile pot fi folosite pentru a desemna diverse structuri topologice – e.g., grafuri, arbori – specificând relațiile dintre obiecte
  76. 76. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures conectori & zone – connection & enclosure zonele pot fi utilizate pentru ierarhii, contururi, diagrame Venn
  77. 77. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures proprietăți perceptibile – retinal properties poziție, mărime, orientare, culoare, textură, formă
  78. 78. Dr.SabinBuragawww.purl.org/net/busacopodio.com/site/creative-routines
  79. 79. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures proprietăți perceptibile – retinal properties poziție, mărime, orientare, culoare, textură, formă aspecte de interes: claritate (crispness), rezoluție, transparență, poziționare (arrangement)
  80. 80. Dr.SabinBuragawww.purl.org/net/busaco discuție poziționare 2D aliniată conform unei scale poziționare 2D nealiniată redare conform valorilor (length) acuratețea comparațiilor dintre valorile datelor diversele maniere de vizualizare pot facilita percepțiile utilizatorului (Cleveland & McGill, 1984) citați de Jerzy Wieczorek (2015) http://civilstat.com/2015/10/statistical-graphics-and-visualization-course-materials/
  81. 81. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures proprietăți perceptibile – retinal properties poziție, mărime, orientare, culoare, textură, formă exemplu: culoarea – cod vizual ilustrând genul filmului FilmID (Genre) → P (Color) 230 (Action) → P (Red)
  82. 82. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures codificare temporală – temporal encoding date referitoare la timp ce trebuie vizualizate versus animație – asocierea dintre timp și valoarea unei variabile
  83. 83. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling View Transformations oferă diverse maniere de vizualizare (reprezentări grafice) conform necesităților aplicației / scopului utilizatorului
  84. 84. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Views percepute de utilizatorul final eventual, pot fi ajustate via diverși parametri grafici (poziționare, scalare, decupare, rotire,…)
  85. 85. Dr.SabinBuragawww.purl.org/net/busaco “Information visualization is about the not just creation of visual images, but also the interaction with those images in the service of some problem.” Stuart Card, 2008
  86. 86. Dr.SabinBuragawww.purl.org/net/busaco The Internet Map – vizualizarea interactivă a utilizării unor domenii Internet pe baza datelor oferite de Alexa http://internet-map.net/
  87. 87. Dr.SabinBuragawww.purl.org/net/busaco Expresivitate și efectivitate o manieră de vizualizare este expresivă dacă și numai dacă ea codifică toate relațiile dorite între date și nu sunt considerate alte relații adiționale
  88. 88. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling FilmType (N) → Position (Q) asocierile dintre date și forma vizuală eludează criteriul de expresivitate
  89. 89. Dr.SabinBuragawww.purl.org/net/busaco http://pbfcomics.com/246/ (în loc de) pauză
  90. 90. Dr.SabinBuragawww.purl.org/net/busaco Care sunt procesele implicate în vizualizarea datelor?
  91. 91. Dr.SabinBuragawww.purl.org/net/busaco visualization processes aquire obținerea datelor inițiale („brute”) parse procesarea datelor filter filtrări conform necesităților mine obținerea datelor relevante represent alegerea reprezentărilor vizuale refine rafinarea soluțiilor de vizualizare interact interacțiunea cu utilizatorul conform Ben Fry, 2008
  92. 92. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Aquire obținerea datelor ce trebuie analizate și vizualizate surse deschise de date: https://github.com/caesar0301/awesome-public-datasets http://datahub.io/ https://github.com/jdorfman/awesome-json-datasets
  93. 93. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Parse obținerea unei/unor structuri convenabile privind semnificația datelor eventual, ordonarea lor în categorii de interes
  94. 94. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Filter păstrarea exclusiv a datelor de interes poate implica eliminarea „zgomotului” (noise reduction)
  95. 95. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Mine aplicarea unor metode statistice și/sau vizând data mining pentru a obține tipare ori categorii (clase) de date și/sau a plasa datele într-un context matematic diverse abordări pragmatice sunt descrise în G. Myatt, W. Johnson, Making Sense of Data I, II, and III, Wiley, 2007, 2009, 2011
  96. 96. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Represent alegerea unui (set de) model(e) vizual(e) exemple tipice: recurgerea la chart-uri – bar graph, list, tree,…
  97. 97. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Refine îmbunătățirea suitei de reprezentări vizuale alese e.g., tehnici de optimizare a clarității (percepției)
  98. 98. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Interact includerea unor metode vizând manipularea datelor sau ajustarea modului de vizualizare
  99. 99. Dr.SabinBuragawww.purl.org/net/busaco mash-ups Your Life on Earth (BBC, 2014) www.bbc.com/earth/story/20141016-your-life-on-earth
  100. 100. Dr.SabinBuragawww.purl.org/net/busaco visualization processes uzual, sunt adoptate metodologii iterative de proiectare (Fry, 2008)
  101. 101. Dr.SabinBuragawww.purl.org/net/busaco Am putea clasifica metodele de vizualizare a informațiilor? http://bl.ocks.org/mbostock
  102. 102. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții directe (direct reading) utilizarea unei singure variabile [X]: liste, trasări de puncte (1D scatterplots), pie charts, distribuții, box plots,…
  103. 103. Dr.SabinBuragawww.purl.org/net/busaco a se studia și http://eagereyes.org/techniques/pie-charts
  104. 104. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții directe recurgerea la 2 variabile [XY]: obiecte bidimensionale (histrograme) – valori continue 2D scatterplots – valori discrete …
  105. 105. Dr.SabinBuragawww.purl.org/net/busaco exemplificări variate: www.improving-visualisation.org/visuals
  106. 106. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții directe recurgerea la 3 variabile [XYR]: retinal scatterplots, diagrame Kohonen [(XY)Z]: peisaje informaționale, suprafețe informaționale [XYZ]: trasări de puncte tridimensionale – 3D scatterplots
  107. 107. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy retinal scatterplot – aici: heat map http://secviz.org/content/user-behavior-a-heatmap vizualizarea comportamentului utilizatorului (Y) în funcție de timp (X); culoarea (variabila R) indică intensitatea activității desfășurate
  108. 108. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții directe recurgerea la 4 variabile [XYZR]: 3D retinal scatterplots, topografii 3D
  109. 109. Dr.SabinBuragawww.purl.org/net/busaco o vizualizare 3D a topografiei tectonice (context: seismicitatea din Vrancea) www.topo-europe.eu/3-the-natural-laboratory-concept/3-1-within-the-orogen/3-1-2-implications-for-the-natural-hazards
  110. 110. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții complexe (articulated reading) utilizarea a n variabile [XYRn-2]: 2D retinal scatterplots [XYZRn-1]: 3D retinal scatterplots
  111. 111. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții complexe (articulated reading) pot cauza probleme de interpretare
  112. 112. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy o trasare vizuală a atractivității versus vârstă culoarea indică genul O’Connor & Biewald, 2009
  113. 113. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții complexe arbori (utilizați la indicarea ierarhiilor): node and link trees, enclosure trees, hyperbolic trees, TreeMaps, cone trees
  114. 114. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy asociere arborescentă (treemap) vizând termenii ce apar în contextul informațiilor geografice pentru 6 tipuri de zone T. Segaran & J. Hammerbacher (Eds.), Beautiful Data, O’Reilly, 2009
  115. 115. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții complexe figurări de rețele (grafuri)
  116. 116. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy Flight Patterns – folosirea datelor GPS ale traficului aerian pentru vizualizarea tiparelor și densității zborurilor comerciale (Koblin, 2005) www.aaronkoblin.com/work/flightpatterns/ a se studia și http://graphofthings.org/
  117. 117. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții complexe reprezentarea timpului valori discrete vs. continue e.g., calendar, timeline, momente vs. intervale, alternative
  118. 118. Dr.SabinBuragawww.purl.org/net/busaco studiu de caz http://hereistoday.com/
  119. 119. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy Definitive Daft Punk http://themaninblue.com/writing/perspective/2011/05/12/ studiu de caz
  120. 120. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale compuse compuneri folosind o singură axă [XYn]: matrici de permutare, coordonate paralele
  121. 121. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy o vizualizare paralelă bazată pe o coordonată a datelor oferite de un fișier de jurnalizare a unui firewall context: security visualization – http://secviz.org/
  122. 122. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale compuse compoziție vizuală recurgând la 2 axe [XY]: grafuri
  123. 123. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale compuse compunere recursivă vizualizări 2D în alt spațiu 2D [(XY)XY]: scatterplot matrices, axe ierarhice,…
  124. 124. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy organizarea tuturor perechilor de informații corelate
  125. 125. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale compuse compunere recursivă marcaje folosite în spațiul bidimensional [(XY)R]: stick figures, color icons, shape coding, spirale Keim,…
  126. 126. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy 100 Years with the San Francisco Symphony – Adobe http://thewhyaxis.info/music/
  127. 127. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale compuse compunere recursivă vizualizări 3D în 3D [(XYZ)XYZ]: lumi virtuale în cadrul altor lumi virtuale
  128. 128. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale interactive interogări dinamice – interactive queries vizualizări imagistice – imagery (“magic”) lens privire generală + detaliere – overview + detail brushing and linking extracție și comparare – extraction & comparation explorări via rafinări – attribute explorer (multi-faceted)
  129. 129. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy Poem Viewer – vizualizări imagistice (imagery lens) pentru explorarea datelor poetice http://ovii.oerc.ox.ac.uk/PoemVis/
  130. 130. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy „periajul” datelor (brushing) selectarea datelor de interes – e.g., via click and drag corelarea (linking) – evidențierea eșantioanelor similare prezente în alte vizualizări exemplificări: http://mbostock.github.io/protovis/ex/brush.html
  131. 131. Dr.SabinBuragawww.purl.org/net/busaco Suplimentar, pot fi figurate reprezentări luând în calcul implicarea utilizatorilor metode bazate pe date: filtrare în funcție de context agregare selectivă
  132. 132. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy Gapminder World – http://www.gapminder.org/world/
  133. 133. Dr.SabinBuragawww.purl.org/net/busaco Suplimentar, pot fi figurate reprezentări luând în calcul implicarea utilizatorilor metode bazate pe modul de vizualizare: micro-macro readings, highlighting, distorsionarea perspectivei geometrice, geometrii alternative
  134. 134. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy micro-macro readings prezentarea unor volume mari de date la densități mari scop: obținerea unei priviri de ansamblu (to see the bigger picture) http://larp601.wordpress.com/
  135. 135. Dr.SabinBuragawww.purl.org/net/busaco concluzii Scopuri principale ale vizualizării informațiilor vizualizare exploratorie (exploratory visualization) descoperirea tiparelor, tendințelor ori sub-problemelor în cadrul unei mulțimi de date (dataset)
  136. 136. Dr.SabinBuragawww.purl.org/net/busaco concluzii studiu de caz Web Trend Map (iA, 2007): http://ia.net/know-how/ia-trendmap-2007v2
  137. 137. Dr.SabinBuragawww.purl.org/net/busaco concluzii studiu de caz Food Poisoning Outbreaks (Ruslan Kamolov, 2015) http://www.visualizing.org/visualizations/food-poisoning-outbreaks
  138. 138. Dr.SabinBuragawww.purl.org/net/busaco concluzii Scopuri principale ale vizualizării informațiilor vizualizare explicativă (explanatory visualization) transmiterea unor informații sau a unui punct de vedere „țintind” un utilizator ori o clasă de utilizatori
  139. 139. Dr.SabinBuragawww.purl.org/net/busaco concluzii studiu de caz compararea dimensiunii relative a unor entități via vizualizări interactive (Nikon, 2015): www.nikon.com/about/feelnikon/universcale/
  140. 140. Dr.SabinBuragawww.purl.org/net/busaco concluzii vizualizare animată a producerii cafelei: www.bizbrain.org/coffee/ studiu de caz
  141. 141. Dr.SabinBuragawww.purl.org/net/busaco concluzii Fiecare proiect (soluție) de vizualizare are cerințele sale particulare “If each data set is different, the point of visualization is to expose that fascinating aspect of the data and make it self-evident.” – Stephen Fry
  142. 142. Dr.SabinBuragawww.purl.org/net/busaco concluzii Sfat pragmatic: simplificare – principiul KISS reducerea nivelului de detaliere poate conduce la oferirea mai multor informații de interes a se evita „sindromul” chartjunk Tufte (1983)
  143. 143. Dr.SabinBuragawww.purl.org/net/busaco conclusions chartjunk using a large area and a lot of “ink” (many symbols and lines) to show only 5 hard-to-read numbers exemple concrete: http://junkcharts.typepad.com/
  144. 144. Dr.SabinBuragawww.purl.org/net/busaco concluzii Sfat pragmatic: etichetarea corespunzătoare recurgerea la explicații, legende, convenții vizuale etc.
  145. 145. Dr.SabinBuragawww.purl.org/net/busaco concluzii History of Rock Music www.svds.com/rockandroll/
  146. 146. Dr.SabinBuragawww.purl.org/net/busaco concluzii Sfat pragmatic: cunoașterea audienței selectarea unor maniere specifice de vizualizare a datelor în funcție de (tipurile de) utilizatori exemplu: www.improving-visualisation.org/case-studies/id=7
  147. 147. Dr.SabinBuragawww.purl.org/net/busaco concluzii studiu de caz vizualizări 3D în cadrul navigatorului Web ale anatomiei și fiziologiei corpului uman https://human.biodigital.com/
  148. 148. Dr.SabinBuragawww.purl.org/net/busaco instrumente la nivel de client Biblioteci de vizualizare 2D a datelor D3.js (Data-Driven Documents) – http://d3js.org/ extensii D3.js – https://github.com/wbkd/awesome-d3 Leaflet (mobile-friendly interactive maps) – leafletjs.com/ Raphaël – http://raphaeljs.com/ Recline – http://okfnlabs.org/recline/ Sigma (graph drawing) – http://sigmajs.org/ Vis – http://visjs.org/
  149. 149. Dr.SabinBuragawww.purl.org/net/busaco instrumente la nivel de client Biblioteci de vizualizare 3D a datelor Cesium – http://cesiumjs.org/ PhiloGL – http://www.senchalabs.org/philogl/ Three.js – http://threejs.org/
  150. 150. Dr.SabinBuragawww.purl.org/net/busaco instrumente la nivel de client A se experimenta și… Data Visualization Selected Tools http://selection.datavisualization.ch/ Data Visualization Tools for the Web https://github.com/showcases/data-visualization JSter Visualization Libraries http://jster.net/search?q=visualization
  151. 151. Dr.SabinBuragawww.purl.org/net/busaco resurse de studiat Edward R. Tufte, The Visual Display of Quantitative Information (2nd Edition), Graphics Press, 2001 Edward R. Tufte, Envisioning Information, Graphics Press, 1990 Nathan Yau, Visualize This, Wiley, 2011 pentru exemple + tutoriale, de consultat http://flowingdata.com/ Ben Fry, Visualizing Data, O’Reilly, 2008 Scott Murray, Interactive Data Visualization for the Web, O’Reilly, 2013 – http://chimera.labs.oreilly.com/books/1230000000345
  152. 152. Dr.SabinBuragawww.purl.org/net/busaco resurse de studiat WikiViz (tehnici, instrumente, exemple) – www.wikiviz.org Data + Design – https://infoactive.co/data-design Resurse privind vizualizarea și explorarea datelor: http://tinyurl.com/kr8oxg5 Information is Beautiful – www.informationisbeautiful.net Data Visualization – http://datavisualization.ch/ Visualizing Algorithms – http://bost.ocks.org/mike/algorithms/
  153. 153. Dr.SabinBuragawww.purl.org/net/busaco Propuneți 2 soluții de vizualizare a datelor referitoare la orarul FII http://profs.info.uaic.ro/~orar/ test scris #1 (T1)
  154. 154. Dr.SabinBuragawww.purl.org/net/busaco episodul viitor: (re)găsirea resurselor Web

×