D3 Inspector

Summary:
This is an interface (and editor) for D3 visualizations that provides additional features to explain the code. This project was made as a way to explore interfaces that are augmented to help users understand their code. I decided there were three views into this process that would be helpful: the editor,  the visualization itself and the explanation or intermediary panel.

Editor
The left panel is an editor that users can paste their D3 code into. The editor changes based on user interaction with the editor and the visualization panel. For example, if you mouse over a d3 library function the middle panel provides more details on this function and its use.

Explanation
The middle panel starts out with a description of the data array that is driving the features of the visualization. Additional annotations appear as the user mouses over different functions in the editor panel.

Visualization
The visualization panel displays the results of the code in the editor (left panel) but with additional features. For example, if you mouse over the svg container (the “background”) the code that appended this will be highlighted in the editor. In the circle packing example, when you mouse over a circle element the code that is responsible for appending circles is highlighted.

Video:
Vimeo Link