observablehq
Data-Binding Inspector/Viewer/Debugger
disclaimer - i realize this is a humungous undertaking, and observable is maybe not even the right platform for this - but I wanted to document it anyways.
Embracing Observable as a learning tool for D3. One mental hurdle among folks who are new to D3 is grasping the concept that arrays of individual datum are being tied to specific elements of an SVG. A common workflow to help understand this is to open up the inspector and see how, when i have N data records, I just also created N DOM elements. This gets the job done but I think still leaves something to be desired. What's the actual data that's being "bound" here? Which feature is being tied to my x position? How did it get there? What other features/columns are available. I feel that this level of visibility would probably help folks who are new/learning have a better understanding of what's going on under the hood.
a solution I think could work
The genesis of the idea comes form the Vue devtools Chrome extension I've been working with.
https://github.com/vuejs/vue-devtools
In some ways <insert wild hand waving here> there are patterns in JS frameworks like vue that are similar to those in D3, the idea of binding data to DOM (or SVG) elements. Vue (and I assume Angular/React do too) has this great devtools extension that allows me to open up my inspector and then see not only the DOM, but all the data that Vue has routed to this element and how those values affect the DOM. IT ALSO ALLOWS ME TO EDIT THE DATA, just as you might with a css parameter, editing your padding from the inspector until it looks "just right", you can do the same with the data.
Back to Embracing Observable as a learning tool for D3. So far what I've described is just a browser extension. What does this have to do with Observable? Well. I don't know exactly. I imagine, rather than the inspector, Observable could implement some sort of "cell by cell inspector" or something. TBH I'm not sure exactly what it would look like, but I think the structure that comes with Observable notebooks would allow for a more meaningful and tailored "Inspector" experience than the stock browser inspector.
Additional context The whole idea for this feature is really only a good idea if it solves a problem that exists (duh!). And while I can say it would help me as I'm debugging some of my work, I don't know how universally it would be useful. Also my hypothesis in the opening about new D3 learners, is little more than a guess. So I think there'd definitely need to be some user-research done here to refine this.
I once made an element inspector notebook which also previews bound data (the __data__ property of the element used by D3): https://observablehq.com/@tophtucker/element-inspector
