d3bugger
a chrome extension inspecting tool for d3!
An in-browser inspecting tool for D3.
Abstract
The D3 JavaScript library has become the predominant tool for creating data visualizations using web standards. D3's adherence to the standard document object model (DOM) allows developers to use tools native to modern browsers, such as Chrome DevTools, to inspect and manipulate D3 visualizations. However, there are unique aspects of D3's representation in the DOM that are poorly handled by native tools. With d3bugger, we present a inspection tool that is custom-made for D3's DOM idiosyncrasies. Our inspection tool lets users select individual elements in a D3 visualization and easily view D3-relevant information. This tool is intended as an extension to native development tools, rather than a replacement.
Read the full paper here.
Instructions for Running Locally
Visit our GitHub repo to see instructions on how to install d3bugger in your Google Chrome browser. Availability on the Chrome Web Store coming soon, hopefully!