What is DataDrawer?
DataDrawer is a prototype for dynamic drawings. The term dynamic drawing comes from this talk by Bret Victor. The idea is to provide a tool that mixes the flexibility and directness of a drawing tool, e.g., Adobe Illustrator, with the repeatability of a programming language, e.g., D3 js.
Why was this built?
The primary purpose is to explore the ideas around more direct programming interfaces for infographics. We waited around a bit to see if a tool would come out that implemented the ideas we were so fired up from Bret's talk and eventually built it when nothing surfaced. We also put some effort into making it as light weight as possible with regards to sharing and forking drawings and a model like JS Bin seemed the best to us.
How do I use it?
Admittedly, the UX has a lot of rough edges and is at too early of a stage for us to even know what the best use cases are to optimize around, but we were already having a lot of fun playing with it and thought maybe some of you would too, so we shipped it anyway :). To help get you get started we started making some videos that will just cover basic functionality.
Sourcecode
Oh yeah, one other reason we built this was to explore what types of architectures could best support building a tool like this. We actually scrapped the very first attempt at this tool because the code got complicated pretty fast. The basic idea of this tool is simple enough, but getting a lot of the details right and the edge cases required some thought and elbow grease to make sure the code didn't come out a complete non-performant mess. The current architecture takes advantage of React and Immutable to address these goals. So if the tool isn't fun enough for you we are providing the source code too so you can have some more fun swimming in that!
Contributors
Code credits: Anthony Sherbondy (@tonysherbondy), Nhan Nguyen (@nhan), Zack Reynolds (@reynoldz), and Ethan Sherbondy (@sherbondy).
Inspiration and UX guide: Bret Victor's talk on Dynamic Drawing and also the additional notes.