Interactivity in Data Visualization IT 7113 Data Visualization http://idi.kennesaw.edu/it7113/ J.G. Zheng Spring 2023 https://www.edocr.com/v/l0pp3ral/jgzheng/visual-interactivity Overview • What is interactivity, exactly? • What are the three levels of interactivity support and their features in data visualization and dashboard? • Visual Information Seeking Mantra: concepts and applications in interactive data visualizations and dashboards A key feature of data visualization is the interactive exploration and analysis of data and visualizations. Interactivity (in Data Visualization) • Interactivity is the functionality provided by the (visualization) system/application to let users interact with the visualization or the system/application through a user interface. • So, the visualization itself becomes dynamic based on user actions, providing different views of data. • The overall analytical or reporting application can also become interactive and support more user needs. Image from https://www.slideshare.net/tillnagel/nagel-unfolding-thecityworkshops Interactivity in the Visual Exploration and Analytics Process • Interaction is a general feature in computing systems and applications. It is a process that users and systems can “work together”. • Interactivity is an important aspect of data exploration and analysis, as both are interactive processes. – Interactivity can also support other analytics tasks like data preparation, data cleanse, model training, etc. • Visual interactivity focuses on the interactions in various forms of data visualizations (charts, maps, dashboards, etc.) • Interactivity is essential in visual analytics where discoveries are driven by intensive interactions with visualizations. Why Interactive? • Enable multiple perspectives – “Static visuals can offer only pre-composed “views” of data, so multiple static views are needed to present a variety of perspectives on the same information. A fixed image is ideal when alternate views are neither needed nor desired, and required when publishing to a static medium, such as print.” - Quotes from chapter 1 of the book “Interactive Data Visualization for the Web” by Scott Murray. • Reduce complexity – The number of views can grow significantly in many cases because of the multi-dimensionality of the data. Presenting all of them is impossible. Even presenting multiple of them maybe cluttered and crowded. – Interactivity enables a more prioritized and focused view in a limited space. • Ease cognitive load – The number of items and data presented at one time may be too much and overwhelming for a user; interaction features can help user focus. • Enables customization and exploration – Dynamic, interactive visualizations can empower people to explore the data themselves with their own intentions and paths. • Encourage engagement with the data – With animated transitions and well-crafted interfaces, some visualizations can make exploring data feel more like playing a game or telling a story. Interactive visualization can be a great medium for engaging an audience who might not otherwise care about the topic or data at hand. – Make visualizations smart or tell a story: http://www.dataversity.net/fact-fiction-smart-data-visualization- tells-tale/ Three Levels of Interactivity Capabilities • How exactly interactions are designed? We can view interactivity at three levels Level Description Examples Lower level: UI system Interaction is an operational feature provided by the underlying system. These are usually determined by the hardware (and some system software part). Most of these interactions are generic and available to all applications. • Mouse and keyboard actions: click, drag, drop, hover, scrolling, etc. • Touch oriented: tap, swipe, pinch, etc. • Touch gestures • VR controls • Hand gesture Mid-level: sensory enhancement Interaction supports the general purpose of sensory enhancement to ease the cognitive load. These are the most generic and fundamental interaction actions to many types of information use tasks. Most of these are supported by software applications. • Selection and filtering • Highlighting • Zooming • View switching • Toggle Higher level: application/task support Interactivity directly supports a user-centered process toward a goal (such as decision making). They are very task oriented. These are more complex tasks and usually consist of multiple steps and interaction features from the other two levels. • Searching, browsing, navigation • Data exploration • Visual information seeking • Drill down/up • Inquiry or query, parameter setting • Story-telling • Analytical activities: relate, compare, rank, etc. Focus of this module We will cover this particular one item in this module. We do not focus on the lower level of interaction capability in this class. We do not focus on the higher- level interaction capability, as each one could be a special topic. We only study one of them in this module. Students may choose a research project. Mid-level Interaction Types • Many mid-level interaction supports the general purpose of sensory enhancement to ease the cognition load. – These are the most generic and fundamental interaction actions. – Many mid-level interactions are focused on attention shifting. • Major purposes of interaction at this level – Data manipulation/adjustment: affecting data scope and perspectives, as well as metric values and results. – Presentation adjustment: directly affecting the visual effects. • Common mid-level interaction action types used in data visualization: – Selection and filtering – Highlighting – Zooming – View switching (including toggle) Selection • Selection is the action to select choices from a list, or to select objects and elements on a visualization – Selection is usually the first step toward follow-up actions or interactions, such as highlight, filtering, viewing details, etc. • Selection techniques – Point selection • Single point, multi-point selection - http://91- divoc.com/pages/covid-visualization/ • Selection can be done using traditional UI controls (dropdown, checkbox, etc.) or clicking/hovering directly on the visual. – 1D range selection • Price range, date range, etc. - https://finviz.com/bubbles.ashx (sliders on the right side and top) – 2D area selection (selecting an area directly on a chart or map) • Shaped region: rectangular, circle, etc. https://public.tableau.com/app/profile/levy2725/viz/2015-163-and- D-ness/Dashboard1 • Connected lines or polygon: connecting multiple points • Freehand (lasso): zillow.com Example of point selection (animated GIF) https://www.tableau.com/ab out/blog/2020/9/virtual- gartner-bi-bake-analytics- anyone-anywhere-any-data Filtering • Filtering is a way to only include or show items that meet certain conditions, resulting in fewer items usually. – It is similar to selection, and it can be achieved by selection of conditions; but it can also be implemented based on more dynamic criteria. Filtering can affect how things are presented and calculated. – It is similar to zoom-in, but it is applied to data rather than the views. – A slicer is a kind of filters in multi-dimensional analysis • Design techniques – External (outside the visualization) selection/picker controls: radio button, checkbox, slider, selection buttons https://finviz.com/bubbles.ashx – Ad hoc filtering based on user’s direct selection – Condition-based filtering based on attribute value settings – Direct selection on the visual (like Tableau or DataPine -https://www.datapine.com/blog/interactive- dashboard-features/ click to filter) – Visual (chart) filters https://www.theguardian.com/uk/interactive/2011/dec/07/london-riots-twitter Slider control (outside the main visual) to filter items. Highlighting • Highlighting (in interaction) is a temporary visual feedback to user selection by changing visual properties like color, texture, size, etc. It draws user attention toward the highlighted items. • Preattentive attributes and gestalt principles are used to create the grouping and distinction of highlighted elements or areas. – Color contrast, order of data items, association (linkeage) between objects, etc. • Highlighting is commonly activated by – mouse hover (temporary) – specific click, tap, or hold-and-drag (explicit) http://graphics.wsj.com/avengers-team/ Mouse hover changes the column color and texture style. Mouse hover highlights the row and column reference in gray. Zooming • Zooming (in and out) is an interaction technique of shifting focus at different levels (e.g., overview level, details level) of a visualization • Various zooming designs – External (outside the visuals) zooming controls: buttons/sliders https://finviz.com/bubbles.ashx – Mouse scroll on top of the visual: https://finviz.com/map.ashx – Mouse click in the visual https://googletrends.github.io/search-election-election-night/ – Direct “select-to-zoom” on the visualization (Tableau, Datapine) • Design practices: provide more than one zooming techniques. https://finviz.com/map.ashx (mouse scroll and external controls) Click-to-zoom: one click to zoom in and another to zoom out. https://googletrends.github.io/s earch-election-election-night/ View Browsing via Panning/Scrolling • View browsing is the movement of a partial view region (like a zoomed-in area) in the complete visualization. – Often used together with zoom-in. • Usually used for visualizations with a lot of elements that could not show details if presented all at once in one screen. • This kind of interaction allows user to focus on part of the visualization/report at a detailed level. And move to other parts by moving the viewport window (through panning or scrolling). • Example – https://finviz.com/map.ashx (drag to move after zooming in) Click the button to zoom in. Drag the view window (panning) to view other parts of complete map. View Switching • View switching is a broad category of interactivity that features visualization change (overwritten) upon request – The new (updated or alternate) visualizations will replace the current one • View switching can save screen space in dashboard. It can also display visualizations that are not necessary to appear at the same time. This is a common tab design for static view switch: each tab shows a different visualization. Tabs provide view switching and save screen space. View Switch Cases • Switch between table, chart, or map view • Switching between summary view and detail view • View change by aggregation levels (drill down) • Dynamic view change by setting changes, including parameters, metrics, or dimensions, and other properties – https://finviz.com/bubbles.ashx A toggle button to show/hide more rows. Dynamic switching: based on the selection of date aggregation level. https://www.datapine.com/blog/interactive-dashboard-features/ https://www.datapine.com/blog/interactive-dashboard-features/ The clicking one “channel” will bring in the “country” view (extras) Toggle • Toggle is a kind of view switching between only two views • Toggle can be used to show contents when needed, but hide them when not needed • Toggle styles – Overlay - complete view switch – Expand/collapse, using button click – Pop-up, using button click – Tool tip, using mouse hover Overlay • Details or extras are displayed in the same place covering the original view – using various view switching techniques https://www.datapine.com/blog/interactive-dashboard-features/ The clicking one “channel” will bring in the “country” view (extras) In-line Expansion • In-line expansion shows the details right under the chosen item upon request and will fold or hide (collapse) when the action is completed. • The example on the right shows in-line expansion of drill down from the year level to the month level. • Drill down is the process to display lower aggregation level details. • It is usually on demand based on user’s selection. Expansion/collapse button to show/hide lower-level (drill-down) details by inserting details directly beneath the current row. Pop-up • A pop-up is overlaid panel or window over existing user interface without completely moving away from the current task. – Extras and details can be displayed in a pop-up when needed, and they are easily closed when not needed. – Pop-ups are usually activated/closed by explicit actions like clicks (rather than mouse hovering). • Pop-up example – https://www.datapine.com/blog/interactive-dashboard-features/ feature 2 https://www.datapine.com/blog/interactive-dashboard-features/ Tooltip • Tool tip or data tip is the small amount of extra information displayed when user hovers the mouse on a target object. The showing is temporary and will be dismissed once the mouse moves out of the object. – No mouse clicks are required – more efficient exploration. – Loads fast – Only interferes with the display for a short time. – Sometimes tooltips can show more information including another chart https://finviz.com/bubbles.ashx • Tooltip Example – https://finviz.com/map.ashx – http://91-divoc.com/pages/covid-visualization/ – https://public.tableau.com/app/profile/levy2725/viz/2015-163-and-D-ness/Dashboard1 https://www.datapine.com/blog/int eractive-dashboard-features/ This is an example of tool-tip which displays exact numbers only when the mouse moves into a column. This is an example of annotation designed as a tool-tip, using a in-page pop-up. Annotation is the extra explanation or additional information incorporated in the visual. Normally excessive annotations interferes with visual presentations, so using tooltip can hide them until needed. Visual Information Seeking Mantra Visual Information Seeking Mantra is a general design guideline to design interactive information exploration, including interactive dashboard design. There are three steps (views) in the process: 1. The “Overview” UI component only provides high level summary information or a complete view of all data items. Users use overview to identify areas of interests 2. Then “Zoom and Filter” provides the next step of local focused view to examine the area of interests identified. 3. “Details on Demand” provides even more details or additional information, in additional views. 20 References (extended reading): • Shneiderman, B. (1996, September). The eyes have it: A task by data type taxonomy for information visualizations. In Visual Languages, 1996. Proceedings., IEEE Symposium on (pp. 336-343). http://drum.lib.umd.edu/bitstream/1903/5784/1/TR_96-66.pdf • Craft, B., & Cairns, P. (2005, July). Beyond guidelines: what can we learn from the visual information seeking mantra?. In Information Visualisation, 2005. Proceedings. Ninth International Conference on (pp. 110-118). IEEE http://www.cc.gatech.edu/~john.stasko/8001/craft05.pdf Overview Zoom and Filter Details on Demand Overview • The “Overview” UI component only provides high level summary information or a complete view of all data items. – The overview usually contains a large number of data items, and some may be aggregated • Users use overview to – have a general feel of the complete picture – Identify high level patterns – identify areas of interests Further reading: the notion of overview in information visualization http://www.kasperhornbaek.dk/papers/IJHCS2011_Overview.pdf Zoom and Filter • Then “Zoom and Filter” provides the next step of local focused view to examine the area of interests identified. • See the slide on “Zooming” and “Filtering” earlier Advanced Zooming Technique • Multi-level zooming • Dynamic cluster, clustered points – Zillow, redfin – Dynamic cluster map: dynamically cluster higher concentrated locations into clusters • https://www.arcgis.com/apps/Cascade/index.html?ap pid=4eff1f0e80344639b918cbd99b8523ff • https://blog.mapbox.com/clustering-millions-of-points- on-a-map-with-supercluster-272046ec5c97 Counter Example • https://www.trueup.io/layoffs – The visual does not provide a zoom-in feature. It is difficult to see smaller parts. Details on Demand • Details on Demand, or Extras on Demand – shows detailed or additional data and information with a specific user action – https://infovis-wiki.net/wiki/Details_on_demand • Where/how to show extra/details? – View switching techniques (see earlier slides on view switch and toggle) • Overlay or replacement of the current view • Inline expansion • Pop-up/Tooltip: toggle overlay – Side-by-side: same screen different region (side, bottom) – Click-through to a second screen/page for detailed table, charts, report, or another dashboard 25 Side-by-Side Display • An alternative is to display the details in an area to the side (or top/beneath). • This area will always be displayed. – It is useful if the details need to be frequently referred to. – But at the same time, it takes more screen space. https://www.tableau.com/ab out/blog/2020/9/virtual- gartner-bi-bake-analytics- anyone-anywhere-any-data Details are display on top. Click Through • Click-through usually leads to another page/report upon clicks. • It can be used together with pop-up/tool-tip or inline expansion to show even more details. Pop-up first, then click through. In-line expansion, then click through. VISM 2.0 • The claimed 2.0 version enriches the linear model of the original VISM. • One important addition is the “relate” task that provides additional interactivity to enable multi-views or view-switch at/across all three levels, especially at details levels. • Example – https://www.productchart.com/smartphones/ Extended reading: https://www.iiis.org/CDs2016/CD 2016Spring/papers/ZA490ND.pdf view switching here Details in an overlay pop-up Details in another comparison view More details in another page Details comparison page VISM Case Study https://finviz.com/bubbles.ashx Overview: big picture with all stocks. Zoom and Filter: 3 filters are applied: sector, income range, and sales range. The view is zoomed in with only 5 companies left. Details on Demand: • Hovering (tooltip) “CVX” and more details will be displayed in a floating panel. • Double-clicking will offer click-through to a better expanded view of a stock on another page. More settings and filters on the side More VISM Cases and Examples • The mantra has been used intensively in many visual application designs • Use cases – https://www.recordedfuture.com/information-seeking- mantra/ – http://www.b-eye-network.com/view/2674 • Examples – https://finviz.com/bubbles.ashx – https://www.productchart.com/smartphones/ – https://www.nytimes.com/elections/2016/results/presiden t – https://public.tableau.com/app/profile/levy2725/viz/2015- 163-and-D-ness/Dashboard1 Case study and Exercise • Apply VISM and improve the following chart https://www.trueup.io/layoffs Designing Interactivity • Start from the goals and objectives of overall visualization, and see how to support them through interactions • Defines the issues and problems and see how to address them through interactivity features – Interactions particularly address the complexity and crowdedness issues. • Understand the capability of software application and devices, and design the interaction accordingly – Lower-level device features – Tool capabilities and complexity • Common concerns – How much interactivity do we need? – Present multi-views at the same time or use view switch? Key Readings • Interactive Dashboards: http://www.datapine.com/blog/interactive- dashboard-features/ • Shneiderman, B. (1996). The eyes have it: A task by data type taxonomy for information visualizations. http://drum.lib.umd.edu/bitstream/1903/5784/ 1/TR_96-66.pdf Additional Good Resources • Publications – Interactive Dynamics for Visual Analysis https://queue.acm.org/detail.cfm?id=2146416 – Yi et al. (2007) Toward a Deeper Understanding of the Role of Interaction in Information Visualization, http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.94.7908&rep=rep 1&type=pdf • More VISM – Craft, B., & Cairns, P. (2005, July). Beyond guidelines: what can we learn from the visual information seeking mantra?. In Information Visualisation, 2005. Proceedings. Ninth International Conference on (pp. 110-118). IEEE http://www.cc.gatech.edu/~john.stasko/8001/craft05.pdf – A Review of Overview+Detail, Zooming, and Focus+Context Interfaces https://www.cc.gatech.edu/~stasko/7450/Papers/cockburn-surveys08.pdf – The notion of overview in information visualization http://www.kasperhornbaek.dk/papers/IJHCS2011_Overview.pdf