Jonathan Harper

EECS Department, University of California, Berkeley

Technical Report No. UCB/EECS-2015-207

November 1, 2015

http://www2.eecs.berkeley.edu/Pubs/TechRpts/2015/EECS-2015-207.pdf

The D3 JavaScript library has become a ubiquitous tool for developing visualizations on the Web. Yet, once a D3 visualization is published online its visual style is difficult to change. We present a pair of tools for deconstructing and restyling existing D3 visualizations. Our deconstruction tool analyzes a D3 visualization to extract the data, the marks and the mappings between them. Our restyling tool lets users modify the visual attributes of the marks as well as the mappings from the data to these attributes. Together our tools allow users to easily modify D3 visualizations without examining the underlying code and we show how they can be used to deconstruct and restyle a variety of D3 visualizations.

Advisors: Maneesh Agrawala

---

BibTeX citation:

@mastersthesis{Harper:EECS-2015-207,
    Author= {Harper, Jonathan},
    Editor= {Agrawala, Maneesh},
    Title= {Deconstructing and Restyling D3 Visualizations},
    School= {EECS Department, University of California, Berkeley},
    Year= {2015},
    Month= {Nov},
    Url= {http://www2.eecs.berkeley.edu/Pubs/TechRpts/2015/EECS-2015-207.html},
    Number= {UCB/EECS-2015-207},
    Abstract= {The D3 JavaScript library has become a ubiquitous tool for developing visualizations on the Web. Yet, once a D3 visualization is published online its visual style is difficult to change. We present a pair of tools for deconstructing and restyling existing D3 visualizations. Our deconstruction tool analyzes a D3 visualization to extract the data, the marks and the mappings between them. Our restyling tool lets users modify the visual attributes of the marks as well as the mappings from the data to these attributes. Together our tools allow users to easily modify D3 visualizations without examining the underlying code and we show how they can be used to deconstruct and restyle a variety of D3 visualizations.},
}

EndNote citation:

%0 Thesis
%A Harper, Jonathan 
%E Agrawala, Maneesh 
%T Deconstructing and Restyling D3 Visualizations
%I EECS Department, University of California, Berkeley
%D 2015
%8 November 1
%@ UCB/EECS-2015-207
%U http://www2.eecs.berkeley.edu/Pubs/TechRpts/2015/EECS-2015-207.html
%F Harper:EECS-2015-207