I think there is a shortcut to direct manipulation by "inverting" grammar of graphics.

What is "the grammar of graphics"? What do you mean by that? For me, a graphic is a drawing. I can create it with code, but I usually create it with something a little more… pen-like (digital or analog). I suspect you're referring to "graphic generated by code[+data]".

Sorry, yeah, curse-of-knowledge. "the grammar of graphics" is the foundation of various plotting libraries (e.g. ggplot). This technique. To decompose a technical drawing into a few orthogonal pieces, most importantly to this work is a "scale". A scale maps data space to pixel space. Its a great abstraction, as it supports categorical and non-linear projections (e.g. a world map). To draw dots on a map you just define a scale that maps lat-long to a spherical coordinate system embedded on a plane (the plane literally being the computer screen), although your library probably already does it. This is a fairly entrenched abstraction at this point in data viz. Scales are 1st class in Plot, vega-lite or ggplot My contribution is you can take the inverse of scales as they are quire well founded mathematically. The inverse is pixel space to data space, then, mouse movement in pixel space can be translated to movement in data space. And thats defines quite a large number of interactive diagrams. So with this procedure take any visualization library, figure out how to inverse the scales it supports, and now you get create new interactive widgets by customizing how the control surfaces are represented visually. Since those first two I have managed to create slider arrays and a graph editor. My code is about 40 LoC, all the heavy lifting is done by the visualization library, those 40 LoC are powering all the different flavours of UI editors.

Pretty interesting. Is the code publicly available by any chance?

yes its been promoted from devlog to show-your-work! https://futureofcoding.slack.com/archives/CCL5VVBAN/p1736887140630119 link to implementation there