"Diagrammar: Simply Make Interactive Diagrams" by Pontus Granström (Strange Loop 2022)
Ғылым және технология
Diagrams are crucial for communication and learning in STEM fields. Creating them involves repeated patterns, consistent components, exact positioning, and, ideally, user interaction. A programming language has right the tools to do all of the above, but much of its power is only available to career programmers, gated behind the complexity of things like SVG, CSS, JS, and handling user input.
Diagrammar is a tool for creating interactive diagrams, that aims to be much simpler, while retaining the power of a full programming language (Elm). It was designed for making online STEM courses at Brilliant, and we make full use of this power: parametric reusable diagrams, authors sharing toolkits and styles, precise positioning -- and any diagram can be interactive!
In this talk, I will give you a quick tour of Diagrammar and its primitives, share ideas for designing simple, learnable tools, and tell you what we've learned from authors creating thousands of diagrams across dozens of courses.
Pontus Granström
Namna, Brilliant
@pnutus
I direct and design interactive courses and tools for STEM at Brilliant. I previously studied music composition and physics, taught university math, and worked on tools and visual effects at Ubisoft. I love learning and teaching, I still dabble in music, and I have a deep interest in thoughtful and unique game design.
------- Sponsored by: -------
Stream is the # 1 Chat API for custom messaging apps. Activate your free 30-day trial to explore Stream Chat. gstrm.io/tsl
Пікірлер: 29
Really wish this was Open Source as it would be game-changing to allow everyone to both learn STEM and Elm! 🙏
This is such a great showcase for `Elm`! Couldn't imagine building this _reliably_ in any other programming language. Functional + Strongly Typed with _excellent_ compiler error guidance. Truly Brilliant! 😍
Very nice to discover Elm as the building block for this interesting tool.
Fantastic looking tool, and wonderfully presented! I can only hope this is open-sourced 🤞 Also, am I the only one who goes into conniptions seeing code formatted like your examples 😱😂
Very impressive!! I can't wait to try this out!
is Diagrammar open-source?
@mskiptr
Жыл бұрын
Seems like it's only internal for now: Nitter: pnutus/status/1575851068889583618
@swagatochatterjee7104
Жыл бұрын
It seems no. It would be very cool if it were.
@Favmir
Жыл бұрын
I think they only do business with corporations.
@sofia.eris.bauhaus
Жыл бұрын
it doesn't look like it is. what a waste 😕.
7:44 this whole thing looks like SideFX Houdini Scripting, CSS Flexbox / Grid and ReactJS JSX syntax had a child. Would really like to know what the exploration process was to get from imperativ click UI for diagrams to deciding to use Elm etc. Very impressive result!
The list of basic building blocks seems very similar to those used for openscad, which tries to do similar visualizations, but in 3d. I wonder if the developer has had inspiration from their approach, or if both projects could benefit from studying the differences that exist between their interfaces?
@RobertLugg
Жыл бұрын
It's not clear what the development interface is for this tool. OpenSCAD has a great immediate rendering. I also like their "Modifier Characters" which simplify debugging. I had assumed that booleans operations were a requirement, but they didn't showcase any for Diagrammer. It would be nice to implement in both languages.
Pontus, Thank you for introducing us to Diagrammar. It is available as FOSS or can it be downloaded for personal use? I am aware Brilliant have a GitHub account but there is no repo for Diagrammar.
This look very nice. Is this tool available outside of Brilliant?
Brilliant talk!
now this is epic
@frechjo
Жыл бұрын
it was brilliant.
Is this worth watching if you don't then get to go off and run it?
@swagatochatterjee7104
Жыл бұрын
I think this gives us an insight into how the tool works. Nothing more. I checked Haskell diagrams too. It is a tad bit more complicated than this. Lastly, they showed us only the primitives. They certainly have a way more complicated arsenal of libraries which helps them create all sorts of diagrams.
@KingJellyfishII
Жыл бұрын
I thought the same. It's such a shame that a useful tool is not released to the public in one way or another.
@GordieGii
Жыл бұрын
Is it worth watching TED if you don't then go off to Africa and dig wells?
This is a Brilliant library
The comparison shouldn't be with svg or p5, but with something like pgf/tikz. Does anyone write SVG by hand?
this is just awesome......the other open-source tool with very similar ability i knew of was by 3Blue1Brown.......superb talk.
I wonder what it would be like with descriptive image generators like Dall-e for more freedom of primitives
♥
Bret Victor talk from 2013 - kzread.info/dash/bejne/l5pmzNKjhKioZbg.html 🤔🤯
"Aesthetically challenged" has to be my main takeaway from this talk.