https://futureofcoding.org/ logo
Title
j

Jeremy Vuillermet

04/11/2023, 9:17 PM
Hi everyone, here is a recording of a data-first design tool I demoed during last future of code meetup. https://twitter.com/jvuillermet/status/1645862317597380616 Next, I would like to explore how to improve the formula input/editor. I think there is an opportunity for more structured editing while adding playfulness and intermediate value preview. I like those 2 directions so far: • https://www.adacraft.org/ from Nicolas Decoster • direct programming from Jonathan Edwards https://vimeo.com/274771188 Any other idea or reference in that space?
m

Mariano Guerra

04/12/2023, 8:34 AM
you may want to check https://charticulator.com/
j

Jeremy Vuillermet

04/12/2023, 11:54 AM
wow really relevant indeed, thanks! I didn’t know about it this looks like a nice source to see a lot of examples

https://www.youtube.com/watch?v=80vDPtunnj4

. As well as some inspirations for things to try to implement
c

Cameron Yick

04/12/2023, 1:39 PM
Love the pattern of going from data to repeated UI elements, and the Union of formulas with a constraint editor! You may also like: https://www.cs.cmu.edu/~shihpinc/gneiss.html and the demo video from Adobe that is related to the charticulator team, project Lincoln https://blog.adobe.com/en/publish/2018/01/03/peek-behind-sneaks-projectlincoln-super-powered-data-visualization
j

Jeremy Vuillermet

04/12/2023, 5:37 PM
yes Gneiss is really nice and inspired me to have the full json and data browser on the left. In my opinion, the missing part of Gneiss is that the components are the end of the road. In my prototype or something like retool, the visual components also expose their data so we can keep building on top. An interesting and unexpected reinforcing loop I didn’t know about project Lincoln, that’s amazing! thanks a lot. I need to spend more time on the video to better understand how it works
now also trying to understand what happened to the project. Probably some interesting insight https://community.adobe.com/t5/illustrator-discussions/project-lincoln-status/td-p/10529154
c

Cameron Yick

04/12/2023, 6:56 PM
I assume you may have seen it already, but just in case, sketch n sketch and Hazel livelit are structured editors for graphical pilot programming https://ravichugh.github.io/sketch-n-sketch/
In my earlier comment I misspoke, charticulator team is Microsoft. The Adobe research team related to project Lincoln worked on “data illustrator” https://data-illustrator.cs.umd.edu/
For playful / creative applications, Jennifer Jacobs “para” (she has a FoC podcast episode) is also very inspiring https://blog.adobe.com/en/publish/2015/04/23/at-the-intersection-of-art-and-software
m

Mariano Guerra

04/12/2023, 7:39 PM
j

Jeremy Vuillermet

04/13/2023, 5:25 PM
perfect, thanks! that’s some material to study 😛 Anything in the structured editing like the 2 last links of the post that come to mind? Something better than just text to edit formulas
m

Mariano Guerra

04/13/2023, 6:09 PM
Instadeq's formula editor may apply, here's an overview of the tool

https://www.youtube.com/watch?v=4260hoxkaro

here's a more specific one

https://www.youtube.com/watch?v=zyHX25Gb_zg

o

ogadaki

04/16/2023, 5:10 PM
Very interesting demo! I like the discoverabilty, the contraints between visual elements, the way you map arrays on visuals, etc.
The formula editing is also already nice at this stage. But, yes, maybe a more playful way to do it would be nice. But, I'm not sure that adacraft-like (i.e. block programming) would fit? Or maybe a concatenation of blocks that transform the data (or nodes'n wires)? With displaying of intermediate results?
Here is an example of what I've done on a similar use case (widget from a weather API) with a nodes'n wires tool prototype I've done long long time ago. The relevant aspect in it for your use case would be the fact that data flows through "simple" transformation blocks.
p

Peter Saxton

04/19/2023, 12:40 PM
This is very cool.
j

Jeremy Vuillermet

04/25/2023, 8:20 AM
I completely missed that sorry! Very cool indeed. using
in1
local variable is interesting. I didn’t think about it. The vertical flow also seems to help with previewing intermediate values more easily but that probably require quite a lot of space
Maybe I can only steal the color/shape of block programming as a fancy syntax highlighter. The parenthesis can be scary and hard to manage