**Streamlining Visualization Authoring in D3 Through User-Driven Templates** -------------------------------- **Abstract:** D3 is arguably the most popular tool for creating web-based data visualizations. Yet D3 has a steep learning curve that may hinder further 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 present a qualitative analysis of 2500 D3 visualizations and their corresponding implementations. We find that 5 visualization types (bar charts, geomaps, line charts, scatterplots and force directed graphs) 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. Based on our results, we discuss design considerations for leveraging users' implementation patterns to reduce visualization design effort through design templates and auto-generated code recommendations. **Content** ------- Analysis Scripts and Results ---------------------------- Our analysis of D3 examples spans 3 repositories (GitHub, Bl.ocks.org and Observable). This folder contains all the files and scripts used in our analysis. We describe the contents below: **Manually coded files:** These files contain the raw data from our manual classification of visualizations in each repository. - Ground Truths Cpy - Bl.ocks.org.csv - Ground Truths Cpy - GitHub.csv - Ground Truths Cpy - Observable.csv **Analysis Scripts:** All the data was analyzed using python scripts. These scripts include: - InteractionsAnalysis.py: Used to parse and calculate the interactions contained in each visualization for the Bl.ocks.org and Observable corpora - VizAnalysisGithub.py: Used to analyze the visualizations in the github copora - VizAnalysis.py: Used to analyze the visualizations in the Bl.ocks.org and Observable copora **Result files:** These files contain the results of the analysis for the three copora in our data - Results-viz-interactions-data-blocks.xlsx - Results-viz-interactions-data-github.xlsx - Results-viz-interactions-data-observable.xlsx D3 Examples Data ------------ In this OSF, we have included the content of the repositories used in our analysis. We describe these below: **GitHub Repositories:** Our github corpus contains the raw html and JS files for each github repository coded in our analysis. Each of these repositories are stored as folders with their respective content. These can be found in the GitHubRepoData.zip file. **Observable Repositories:** The repositories in our Observable corpus can be found in the Ground Truths Cpy - Observable.csv file under the *"Repo Name"* column. Each Repo Name is a link that can be used to access the Observable notebook in a browser. **Bl.ocks.org Repositories:** The repositories in our Bl.ocks.org corpus can be found in the Ground Truths Cpy - Bl.ocks.org.csv file under the *"Repo Name"* column. Each row in this column contains a unique identifier that can be used to access the Bl.ocks page in the browser. To do this simply: 1. Copy the UI and paste in the browser in this format https://bl.ocks.org/[unique id]/ 2. Replace the '-' in the identifier with a '/' an then hit enter Templates --------- The templates folder contains a zip file with templates for 7 visualization types: - Bar.js - Line.js - Line_date.js - Geomap.js - Force.js - Bubble.js - Pie.js - Scatter.js