Electrical Engineering
      and Computer Sciences

Electrical Engineering and Computer Sciences

COLLEGE OF ENGINEERING

UC Berkeley

Techniques for Modifying and Augmenting Existing Charts for Improved Usability

Nicholas Kong

EECS Department
University of California, Berkeley
Technical Report No. UCB/EECS-2013-212
December 16, 2013

http://www.eecs.berkeley.edu/Pubs/TechRpts/2013/EECS-2013-212.pdf

Charts abound in printed media and on the web. They have become a primary means to communicate quantitative information. Furthermore, the rise of visualization authoring packages, such as D3, mean creating visualizations is easier than ever before. However, the problem of creating effective, usable visualizations remains challenging. Many existing charts are poorly designed or do not adequately support viewers with certain goals. In this dissertation, we discuss a number of techniques to improve the usability of existing charts, based on prior research on the cognitive and perceptual processes that viewers complete when reading charts. We first present algorithms for extracting the marks and data from existing bar charts. These algorithms successfully extract marks from 79% of bar charts and 62% of pie charts, and from these charts they successfully extract the data from 71% of bar charts and 64% of pie charts. We then present a redesign application that uses this data to produce alternate, perceptually effective visualizations of the same data. Next, we introduce the concept of graphical overlays -- visual elements layered on charts that directly support the viewer's cognitive and perceptual processes. We present a taxonomy of five types of overlays, each of which support different goals a viewer might have. We then present a system that uses extracted marks and data to apply each of these overlays to existing charts. We also show how the system can produce underlays and introduce interactivity to charts. Finally, charts are usually embedded in a document, such as a news article or academic paper, and exist in conjunction with the text to present information. To help readers better understand the relation between the text and the chart, we present a crowdsourcing pipeline to extract the references between them. Specifically, we give crowd workers paragraph-chart pairs and ask them to select text phrases as well as the corresponding visual marks in the chart. We then ask other workers to vote on the correctness of these references. Finally, we apply automated clustering and merging techniques to unify the references generated by multiple workers into a single set. We close by presenting an interactive document viewing application that uses the extracted references; readers can select phrases in the text and the system highlights the related marks in the chart.

Advisor: Maneesh Agrawala


BibTeX citation:

@phdthesis{Kong:EECS-2013-212,
    Author = {Kong, Nicholas},
    Title = {Techniques for Modifying and Augmenting Existing Charts for Improved Usability},
    School = {EECS Department, University of California, Berkeley},
    Year = {2013},
    Month = {Dec},
    URL = {http://www.eecs.berkeley.edu/Pubs/TechRpts/2013/EECS-2013-212.html},
    Number = {UCB/EECS-2013-212},
    Abstract = {Charts abound in printed media and on the web. They have become a primary means to communicate quantitative information. Furthermore, the rise of visualization authoring packages, such as D3, mean creating visualizations is easier than ever before. However, the problem of creating effective, usable visualizations remains challenging. Many existing charts are poorly designed or do not adequately support viewers with certain goals.

In this dissertation, we discuss a number of techniques to improve the usability of existing charts, based on prior research on the cognitive and perceptual processes that viewers complete when reading charts. We first present algorithms for extracting the marks and data from existing bar charts. These algorithms successfully extract marks from 79% of bar charts and 62% of pie charts, and from these charts they successfully extract the data from 71% of bar charts and 64% of pie charts. We then present a redesign application that uses this data to produce alternate, perceptually effective visualizations of the same data.

Next, we introduce the concept of graphical overlays -- visual elements layered on charts that directly support the viewer's cognitive and perceptual processes. We present a taxonomy of five types of overlays, each of which support different goals a viewer might have. We then present a system that uses extracted marks and data to apply each of these overlays to existing charts. We also show how the system can produce underlays and introduce interactivity to charts.

Finally, charts are usually embedded in a document, such as a news article or academic paper, and exist in conjunction with the text to present information. To help readers better understand the relation between the text and the chart, we present a crowdsourcing pipeline to extract the references between them. Specifically, we give crowd workers paragraph-chart pairs and ask them to select text phrases as well as the corresponding visual marks in the chart. We then ask other workers to vote on the correctness of these references. Finally, we apply automated clustering and merging techniques to unify the references generated by multiple workers into a single set. We close by presenting an interactive document viewing application that uses the extracted references; readers can select phrases in the text and the system highlights the related marks in the chart.}
}

EndNote citation:

%0 Thesis
%A Kong, Nicholas
%T Techniques for Modifying and Augmenting Existing Charts for Improved Usability
%I EECS Department, University of California, Berkeley
%D 2013
%8 December 16
%@ UCB/EECS-2013-212
%U http://www.eecs.berkeley.edu/Pubs/TechRpts/2013/EECS-2013-212.html
%F Kong:EECS-2013-212