May 19, 2022 Analyse Case Studies ▪ Analysis of existing systems provides foundation for considering all the possibilities when designing new systems ▪ use analysis framework introduced earlier - what, why and how? - four levels of validation ▪ data/task abstraction - types of data abstraction - derived data - … ▪ visual encoding/interaction idioms - encoding design choices - faceting between multiple views - …
May 19, 2022 Scagnostics SPLOM … ▪ Use nine measurements that categorise the point distribution of scatterplots ▪ monotonic, stringy, skinny, convex, striated, sparse, clumpy, skewed and outlying ▪ Show measurements in a new scagnostics SPLOM ▪ scatterplot of scatterplots ▪ each point in the scagnostics SPLOM represents an entire scatterplot of the original SPLOM
May 19, 2022 Scagnostics SPLOM … ▪ Linked highlighting between views ▪ Selection of point triggers popup view with full scatterplot Scagnostics SPLOM What(Data) Table. What(Derived) Nine quantitative attributes per scatterplot (pairwise combination of original attributes). Why(Tasks) Identify, compare, and summarise; distributions and correlation. How(Encode) Scatterplot, scatterplot matrix. How (Manipulate) Select. How (Facet) Juxtaposed small-multiple views coordinated with linked highlighting, popup detail view. Scale Original attributes: dozens.
May 19, 2022 Hierarchical Clustering Explorer (HCE) ▪ Systematic exploration of multidimensional table ▪ Originally designed for genomics domain ▪ multidimensional table with two key attributes (genes and experimental conditions) and a quantitative value attribute (activity of gene under experimental condition) ▪ derived data is a cluster hierarchy of items based on a similarity measure between items ▪ scalability target: 100-20'000 gene attributes and 2-80 experimental condition attributes ▪ Scalability through combination of visual encoding and interaction idioms
May 19, 2022 Hierarchical Clustering Explorer (HCE) … Hierarchical Clustering Explorer (HCE) What(Derived) Hierarchical clustering of table rows and columns (for cluster heatmap); quantitative derived attributes for each attribute and pairwise attribute combination; quantitative derived attribute for each ranking criterion and original attribute combination. Why(Tasks) Find correlation between attributes; find clusters, gaps, outliers, trends within items. How(Encode) Cluster heatmap, scatterplots, histograms. How(Reduce) Dynamic filtering; dynamic aggregation. How (Manipulate) Navigate with pan/scroll. How (Facet) Multiform with linked highlighting and shared spatial position; overview-detail with selection in overview populating detail view Scale Genes (key attribute): 20'000. Conditions (key attribute): 80. Gene activity in condition (quantitative value attribute): 20'000 × 80 = 1'600'000.
May 19, 2022 PivotGraph ▪ PivotGraph idiom encodes a network derived from the original network by aggregating groups of nodes and links into a roll-up ▪ grouping based on categorical attribute values on the nodes (up to two attributes)
May 19, 2022 PivotGraph … ▪ PivotGraph idiom is highly scalable ▪ summarises arbitrarily large number of nodes and links of the original network ▪ Visual complexity of the derived network depends on the number of attribute levels for the two roll-up attributes ▪ PivotGraph complements standard encoding idioms for networks (e.g. node-link and matrix views) ▪ might be used as a linked multiform view ▪ Well suited for comparison across attributes at the aggregate level ▪ but not good to understand topological network features
May 19, 2022 PivotGraph … PivotGraph What(Data) Network. What(Derived) Derived network of aggregate nodes and links by roll-up into two chosen attributes. Why(Task) Cross-attribute comparison of node groups. How(Encode) Nodes linked with connection marks, size. How (Manipulate) Change: animated transitions. How (Reduce) Aggregation, filtering. Scale Nodes/links in original network: unlimited. Rollup attributes: 2. Levels per roll-up attribute: several, up to one dozen.
May 19, 2022 InterRing ▪ Visual encoding and interaction idioms for tree exploration ▪ space-filling radial layout for encoding the hierarchy ▪ multifocus focus+context distortion approach for interaction ▪ structure-based colouring (redundant) - useful if shared colour coding used to coordinate with other views original hierarchy selected blue region enlarged selected tan region enlarged
May 19, 2022 InterRing … ▪ Works well in combination with other views ▪ hierarchy view supports selection, navigation and roll-up/drill- down operations ▪ supports direct editing of the hierarchy InterRing What(Data) Tree. Why(Task) Selection, rollup/drilldown, hierarchy editing. How(Encode) Radial, space-filling layout. Colour by tree structure. How(Facet) Linked colouring and highlighting. How (Reduce) Embed: distort; multiple foci. Scale Nodes: hundreds if labelled, thousands if dense. Levels in tree: dozens.
May 19, 2022 Course Summary 1. Introduction ▪ classical information visualisations - London cholera map, Rose diagram, March on Moscow, … ▪ what-why-how question ▪ vis design - search space metaphor 2. Human Perception and Colour Theory ▪ model of perceptual processing ▪ visible light and anatomy of the human eye ▪ brightness and contrast ▪ various guidelines ▪ colour spaces ▪ illusions
May 19, 2022 Course Summary … 6. Data Processing and Visualisation Toolkits ▪ R, D3.js and Python ▪ various other solutions and toolkits 7. Design Guidelines and Principles ▪ no unjustified 3D (and 2D) ▪ eyes beat memory ▪ resolution over immersion ▪ overview first, zoom and filter, details on demand ▪ responsiveness is required ▪ get it right in black and white ▪ function first, form next
May 19, 2022 Course Summary … 11.Dashboards ▪ what is a dashboard? ▪ 13 common mistakes in dashboard design - exceeding the boundaries of a single screen, supplying inadequate context for the data, displaying excessive detail or precision, … ▪ strategies for effective dashboard design - condensing information with summaries and exceptions - maximising the data-ink-ratio - designing dashboards for usability/UX 12.Case Studies and Course Review ▪ Scagnostics SPLOM, Hierarchical Clustering Explorer, PivotGraph, InterRing ▪ what-why-how?
May 19, 2022 Exam ▪ Exams take place on June 27/28, 2022 ▪ Oral exam in English (20 mins slot) ▪ covers content of lectures and exercises ▪ counts 60% for the overall grade ▪ 5 mins questions about the assignment ▪ 15 mins questions about the course content (no preparation time) ▪ Overall grade = oral exam (60%) + assignment (40%) ▪ assignment is composed out of two grades - overall grade for project where students have some flexibility in distributing the grades (±2 points) (70%) - your contribution/knowledge to the project as checked in oral exam (30%) ▪ note that the grade for the oral exam as well as for the assign- ment have to be 8/20 or higher in order to pass the exam!
May 19, 2022 Exam … ▪ Submission of the assignment and video via Canvas ▪ deadline: May 29, 23:59 (CET) ▪ The exam will cover all the content presented in the lectures as well as any additional information from the exercise sessions ▪ includes the videos shown in some of the lectures ▪ Make sure that you understand the basic concepts ▪ however, we might ask questions at any level of detail to evaluate your knowledge ▪ Make sure that you can report about any aspects of the assignment
May 19, 2022 Are You Interested in a Thesis? ▪ Various possibilities for BA, MA and PhD theses ▪ Data Physicalisation - extensible dynamic data physicalisation platform and framework ▪ Innovative Mixed Reality Interfaces - augmented concept maps, museum guides, … ▪ Personal Information Management (PIM) ▪ Hybrid Positioning and Implicit Human-Computer Interaction ▪ Smart Environments and Cross-Domain Internet of Things (IoT) ▪ Next Generation Presentation Solutions (e.g. MindXpres) ▪ Technology-enhanced Learning ▪ End-User Development and Human-AI Interaction ▪ ... ▪ Do you have your own ideas? Come along to discuss them ... - https://beatsigner.com/flyers/ThesesOverview.pdf
May 19, 2022 Prof. Dr. Beat Signer Cross-MediaTechnology, Interac- tive Paper, Data Physicalisation Dr. Audrey Sanctorum User-defined XDI and IoT Inter- action, Human-AI Interaction CISA Human-Machine & Human-Information Interaction Information Systems & Management Information Visualisation & Navigation WEB & INFORMATION SYSTEMS ENGINEERING CROSS-MEDIA INFORMATION SPACES AND ARCHITECTURES (CISA) Maxim Van de Wynckel Hybrid Positioning, Implicit Human-Computer Interaction Xuyao Zhang Extensible Platform for Dynamic Data Physicalisation
May 19, 2022 WEB & INFORMATION SYSTEMS ENGINEERING CISA Human-Machine & Human-Information Interaction Information Systems & Management Information Visualisation & Navigation CROSS-MEDIA INFORMATION SPACES AND ARCHITECTURES (CISA) Ekene Attoh IoT Middleware, Context-aware Computing, Implicit HCI Isaac Valadez Knowledge Physicalisation and Augmentation, Tangible UIs Yoshi Malaise Technology-enhanced Learning, Content-driven Presentations Migdeily Cantera End-User Development, Mixed Reality IoT UIs, Intelligibility
May 19, 2022 WEB & INFORMATION SYSTEMS ENGINEERING CISA Human-Machine & Human-Information Interaction Information Systems & Management Information Visualisation & Navigation CROSS-MEDIA INFORMATION SPACES AND ARCHITECTURES (CISA) Arun Sojan Framework for Dynamic Data Physicalisation Piet Van Der Paelt Julia-based Framework for Simulation and Optimisation Dr. Reinout Roels MindXpres: Extensible Content- driven Presentation Tool Evan Cole Technology-enhanced Learning, Study Lenses
May 19, 2022 Final Project Presentations ▪ Each team will have 20 minutes to present their work ▪ dataset ▪ preprocessing ▪ visualisation and demo ▪ evaluation
May 19, 2022 References ▪ Visualization Analysis & Design, Tamara Munzner, Taylor & Francis Inc, (Har/Psc edition), May, November 2014, ISBN-13: 978-1466508910
signer
chibataku
kojiyamamura222
libshare
dicodingevent
hadley
matleenalaakso
tibbelit
reuven
furuhashilab
yukinobaba
oripsolob
shirayanagiryuji
lemiorhan
chrislema
destraynor
sferik
jnunemaker
jasonvnalue
shpigford
holman
michaelherold
eileencodes
paulrobertlloyd
