d3bugger

a chrome extension inspecting tool for d3!

View the Project on GitHub eyxiao/d3bugger

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!