d3-xray: Visual Data Debugging for D3.js

D3.js is a visual data tool, so it should allow you to browse data visually. To that end, d3-xray is a small bookmarklet which logs the results of the data joins as you mouse over the graphical elements, allowing you to debug interactively, so you don’t have to add extra console.log() calls all over the project code just to inspect the data bound to a specific element.

To use it, drag this link to your browser bookmarks:

d3-xray

Click the bookmarklet when you’re viewing a D3.js project and start mousing over DOM or SVG nodes while watching your browser’s developer console. When you see multiple nodes logged in response to a single mouseover, it’s because they are nested, and you’re mousing over several elements at the same time. To stop logging, reload the page.

d3-xray-demo

Hacker News

(Not to be confused with the dental instrument.)