All aboard! Prepare yourself for a voyage through parameter space as we embark on project Tributary!
Now for some technical details!
Tributary uses d3.js and SVG to provide graphics rendering capabilities. All tributary really does is provide an svg element. When the code in the editor is changed, the svg element is emptied and the code is evaluated. The assumption here is that the code will draw something in the svg element. The editor has been modified so that whenever you click on a number or a color string an interactive slider or color picker will pop up. Moving the slider will modify the number and redraw (by re-executing the code for each number change) automatically, allowing you to quickly see how a certain value affects your visualization.
Besides d3, tributary code snippets have access to Underscore.js and Backbone.js as well as jQuery. The code editor is powered by CodeMirror, with the color picker powered by Color Picker and the sliders powered by jQuery UI.
This project excites me everyday, mostly because it makes coding a much more interactive experience which also makes it much easier to code with other people. Because you get instant visual feedback it’s also possible to code live in front of other people in a way that wasn’t exciting before. As a teaching tool your words come alive as you type out the code and as a rapid prototyping tool you can iterate quickly with a domain expert as they suggest changes or ask interesting questions.