Active Reading of Visualizations
Extended Material
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.
Paper (Preprint) · Videos · Bibtex · Authors
·
Study 1: Videos · Data & Analysis · Materials
Study 2: Data & Analysis · Materials
·
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
Study 1 - Qualitative study: Data and Analysis
Teaser figure: Physical actions observed during reading of visualizations.
Participant demographic information and results of active reading questionnaire
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.
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?
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.
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
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.
- 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.
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.