Channels
of-ai
in-sf
in-london
in-ontario
in-seattle
in-socal
in-alberta
of-functional-programming
reading-together
wormholes
of-end-user-programming
random-encounters
in-germany
in-israel
bot-dark-forest
of-music
present-company
of-logic-programming
share-your-work
devlog-together
introduce-yourself
thinking-together
in-boston
in-nyc
of-graphics
announcements
administrivia
two-minute-week
linking-together
Title
j
Jeremy Vuillermet
04/11/2023, 9:17 PMHi 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 AMyou may want to check https://charticulator.com/
c
Cameron Yick
04/12/2023, 1:39 PMLove 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 PMyes 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 PMI 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 PMalso https://cuttle.xyz/
j
Jeremy Vuillermet
04/13/2023, 5:25 PMperfect, 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 PMo
ogadaki
04/16/2023, 5:10 PMVery 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 PMThis is very cool.
j
Jeremy Vuillermet
04/25/2023, 8:20 AMI completely missed that sorry! Very cool indeed. using
in1Maybe I can only steal the color/shape of block programming as a fancy syntax highlighter. The parenthesis can be scary and hard to manage