We investigate whether the notion of active reading for text might be usefully applied to visualizations. Through a qualitative study we explored whether people apply observable active reading techniques when reading paper-based node-link visualizations. Participants used a range of physical actions while reading, and from these we synthesized an initial set of active reading techniques for visualizations. To learn more about the potential impact such techniques may have on visualization reading, we implemented support for one type of physical action from our observations (making freeform marks) in an interactive node-link visualization. Results from our quantitative study of this implementation show that interactive support for active reading techniques can improve the accuracy of performing low-level visualization tasks. Together, our studies suggest that the active reading space is ripe for research exploration within visualization and can lead to new interactions that make for a more flexible and effective visualization reading experience.

Bibtex

@ARTICLE { Walny2017,
AUTHOR = { Jagoda Walny and Samuel Huron and Charles Perin and Tiffany Wun and Richard Pusch and Sheelagh Carpendale },
JOURNAL = { IEEE Transactions on Visualization and Computer Graphics },
TITLE = { Active Reading of Visualizations },
YEAR = { 2017 },
VOLUME = { PP },
NUMBER = { 99 },
PAGES = { 1-1 },
KEYWORDS = { active reading;active reading of visualizations;information visualization;spectrum of physical engagement },
DOI = { 10.1109/TVCG.2017.2745958 },
ISSN = { 1077-2626 },
MONTH = { },
}

Videos

3 minute video illustrating the study details


30 second video preview





Study 1 - Qualitative study: Videos

The videos below contain the the two phases of the qualitative study. Phase 1 involved answering direct questions about the dataset, while Phase 2 involved solving a problem using the data. Parts of the videos have been blurred to preserve the anonymity of the participants. All videos are shown at 8x speed to allow a fast overview.

Study 1 - Qualitative study: Data and Analysis

Teaser figure: Physical actions observed during reading of visualizations.

To download this figure in PDF version click on it.

Sequence of participant actions

To download this figure in PDF version click on it.

Depth of physical engagement spectrum

To download this figure in PDF version click on it.

Participant demographic information and results of active reading questionnaire

To download this figure in PDF version click on it.

Examples of annotations

To download this figure in hight definition version click on it.

Relating our five goals for active reading of visualizations with Bertin’s three stages of the reading, and Adler’s four levels of active reading of text.

To download this figure in PDF version click on it.

Profiles of participants’ dominant activities

To download this figure in PDF version click on it.

Study 1 - Qualitative: Material for reproduction

Separate elements of the materials for study S1 (qualitative study) are available for download here.

Dataset views


The dataset we used was a social network graph with ten nodes (persons) and four types of links (knows, likes, loves, and dislikes). We gave participants four distinct views of this network, one for each type of link. Each view was available on letter-size paper and on transparencies that could be layered to view several types of link at the same time.
Download PDF.

Setup pictures


We provided participants with a set of materials and tools: blank paper, blank transparencies, tracing paper, water-soluble markers, water and a cloth for erasing marks on transparencies, a regular pen, erasable felt pens, scissors, tape, post-it notes, and paper clips. We covered the table in white paper to make the transparencies easy to see.
Download pictures.

Phase 1: Question


We provided participants sheet containing five questions related to the visualization, and space to write their answers.
Download PDF.

Phase 2: Problem Solving


This second sheet ask the participant how to organize a social evening with all of the people depicted in the social network with “minimal drama” due to incompatible relationships. Once they were done, participants were asked to explain their problem solving strategy.
Download PDF.

Phase 3: Questionnaire & Interview


In phase 3, participants filled out a questionnaire about their active reading habits when the information was on paper, on mobile devices, and on personal computers. This questionnaire formed the basis for a semi-structured interview about the participants’ active reading habits and how these habits related to the strategies they used to read the visualizations.
The semi-structured interview questions included questions such as:
  • Did you use any tools to help you solve the problem?
  • I noticed you used X strategy. Why did you use it? How did it help you?
  • You say your annotation behaviour is different on paper and on computers. Why do you think that is?
  • You say you (do / don’t) normally highlight, but when you were reading the visualization, you (did / didn’t). Why do you think that is?
  • If you had a magic wand, what would you want to do to solve this task more easily?
Download the questionnaire in PDF.

Demographic questionnaires


At the begining of the study the participant were given a demographic questionnaire.
Download PDF.

Study 2 - Quantitative study: Analysis and Data

Data & Analysis

Participant questionnaire data

Participant demographic information and results of questionnaire about typical active reading habits for text. To download this figure in PDF version click on it.

Error and time visualization

To download this figure in PDF version click on it.

Data

The data file for Study S2 is a csv file where each row is a participant trial, and columns are the following: "pid": the participant uinque id, "order": the order in which the participant performed the experiment (A,B,C, or D), "step": step within the order of the experiment (S0,S1,S2, or S3), "technique": the condition (active or baseline), "task": the task (degree of reach), "size": the number of nodes in the graph (n20, n40 or n80), "trial": the repetition number within the four repetitions for each block (0,1,2, or 3), "pAnswer": the participant answer, "correctAnswer": the correct answer, "startTime": the time at which the trial started, "endTime": the time at which the trial ended, "completionTime": the total completion time of the trial (endTime - startTime), "clicksLink": the number of times a link was selected during the trial, "clicksNode": the number of times a node was selected during the trial, "penDownTime": the total time the pen was touching the screen.
Download the CSV, and the Metadata.

Study 2 - Quantitative study: Material for reproduction

For S2, we include additional implementation details for the freeform annotation overlay and a full description of the constraints used to create the sample graphs for the study; this is done in the interest of replicability.
A printable version is available in PDF format.

Graph Dataset Constraints


Graph Dataset Constraints In this section we describe the constraints we used to generate the graph dataset that all participants used during S2. In order to reduce the number of factors in the experiment and to limit the total study time, we set the density of graphs to be an independent variable in the experiment.
  • All graphs maintained a density of approximately 1.5, staying within a range of 1.4 – 1.6. Density was computed by dividing the number of links by the number of nodes.
  • We ensured that at least 85% of nodes appeared within a connected subgraph so that the density measure was consistent across graphs.
For the DEGREE task, we added the following constraints: The maximum degree was kept consistent within each size of graph. N20 graphs had a maximum degree of between 3 and 6; of size 40, between 4 and 7; and of size 80, between 5 and 10. This choice was made to balance out the ease of performing the tasks with the ability to generate suitable graphs.
  • The number of nodes with the maximum degree (i.e. the correct answer for each task) was kept within 5 - 10% of the graph size.
  • For the REACH task, we added the following constraints:
  • The degree of the originating node was between 3 and 5.
  • The number of links distributed among the nodes directly connected to the originating node was between 5 and 10 for N20; 10 and 20 for N40; and 20 and 40 for N80.
  • The number of repeated nodes was between 10 - 20% of the graph size.
  • At least one node could be reached via multiple paths. This was meant to keep tasks consistently challenging.
  • The number of reachable nodes was between 20 - 40% of the total size of the graph.
Individual graphs were generated for each trial, that is, repetition ⇥ N ⇥ TASK. The same set of graphs was used for each CONDITION to keep difficulty consistent, but trials were presented in random order to avoid learning effects.

Implementation Details for Freeform Annotation Overlay


The freeform annotation overlay was implemented in Javascript as an independent SVG group on top of an existing graph visualization created using D31. Sketched lines are represented as standard SVG paths. All sketched paths were logged together with the touch interactions. We provided a panel with basic colour and thickness controls (see Figure 1). Highlight colours were intentionally kept to a small set (yellow, pink, and navy blue) to avoid distracting participants with colour choices. The three colours were semi-transparent, like highlighters, so that the underlying visualization would not be completely occluded by the highlights. There was also an eraser that erased full paths and a button to clear all strokes. This layer is does not communicate with the underlying visualization in any way, and so could be easily transferred to any SVG visualization within the same system configuration. This implementation of the freeform annotation overlay requires pen or mouse input for drawing. It thus works best if the interactions for the underlying visualizations are enabled for touch only and do not accept mouse input. Configuration The implementation is created for the Chrome browser running full-screen in Windows 7 on a Wacom Cintiq 24HDT pen and touch screen. To avoid interference from unexpected interactions, we configured the pen interaction to be as basic as possible: we disabled all special operating system-level and Wacom-provided pen and touch interactions were turned off. This includes disabling long press for right click, flicks for scrolling, and all extra button functionality on the pen. We disabled right-clicking, scrolling, and the back button for the duration of the experiment.

Setup pictures


We provided participants with a set of materials and tools: blank paper, blank transparencies, tracing paper, water-soluble markers, water and a cloth for erasing marks on transparencies, a regular pen, erasable felt pens, scissors, tape, post-it notes, and paper clips. We covered the table in white paper to make the transparencies easy to see.
Download pictures.

Authors


Jagoda Walny
Jagoda completed her PhD with Dr. Sheelagh Carpendale in the Innovis Group (Interactions Lab, Department of Computer Science) at the University of Calgary. Her research centers around how everyday visual thinking methods such as sketching can inform information visualizations. She uses a qualitative approach to explore the characteristics of analog visual thinking tools. This paper is a part of her PhD work.

Samuel Huron
Samuel is an associate professor in Design and Information Technology at Telecom Paris Tech in France. He is both a computer scientist and a designer. His research is mostly focused on the design process of visual representations of data and how design methods apply to research and human computer interaction.

Charles Perin
Charles is a lecturer in the Department of Computer Science at City, University of London, and part of the giCentre research group. He is a computer scientist specializing in information visualization and human computer interaction. He is particularly interested in designing and studying new interactions for visualizations; in understanding how people may make use of and interact with visualizations in their everyday lives; and in sports visualization.

Tiffany Wun
Tiffany completed her Bachelor of Science in Computer Science at the University of Calgary.

Richard Pusch
Richard is a research engineer in the Interactions Lab at the University of Calgary. He is interested in exploring new interfaces and methods for collaboration on large displays, and investigating how people build and interact with data in visualizations.

Sheelagh Carpendale
Sheelagh is a Professor at the University of Calgary where she holds a Canada Research Chair: Information Visualization and an NSERC/iCORE/SMART Industrial Research Chair: Interactive Technologies. She directs the Innovations in Visualization (InnoVis) research group and her research focuses on information visualization, collaborative visualization, and large interactive displays.

Please spread the word if you find this study interesting