Supporting Visualization Prototyping In D3

Collaborators: Alisha Varma, Anu Faboro, Mahreen Haider, Favour Nerrise, Bissaka Kenah, John P. Dickerson, and Leilani Battle

D3 is arguably the most popular tool for implementing web based visualizations. Yet D3 has a steep learning curve that may hinder its adoption and continued use. To simplify the process of programming D3 visualizations, we must first understand the space of implementation practices that D3 users engage in. We perform a qualitative analysis of 2500 D3 visualizations and their corresponding implementations. find that 5 visualization types account for 80% of D3 visualizations found in our corpus. While implementation styles vary slightly across designs, the underlying code structure for all visualization types remains the same; presenting an opportunity for code reuse. Using our corpus of D3 examples, we synthesize reusable code templates for eight popular D3 visualization types and share them in our open source repository.

We leverage the structural similarities revealed by our templates to design resilient support features for prototyping D3 visualizations: recommendations to suggest complementary interactions for a user's D3 program; and code augmentation to implement recommended interactions with a single click, even when users deviate from pre-defined templates. We demonstrate the utility of these features in Mirny (pictured above), a design-focused prototyping environment for D3. In a user study with 20 D3 users, we find that these automated features enable participants to prototype their design ideas with significantly fewer programming iterations. We also characterize key modification strategies used by participants to customize D3 templates.

---

Publications

User-Driven Support for Visualization Prototyping in D3

Streamlining Visualization Authoring in D3 Through User-Driven Templates