All aboard! Prepare yourself for a voyage through parameter space as we embark on project Tributary!

Tributary is a web interface for live and responsive visual coding. It includes a code editor and provides some popular javascript libraries for visual programming. The core concept of tributary comes from the inspirational Bret Victor video and the implementation is derived from Gabriel Florit’s water project.

Tributary as a project is aimed at being a learning tool and a playground for visual programming. It has already been useful to me as a rapid prototyping tool for data visualization, and I also enjoy using it to come up with unexpected visual effects and optical illusions. I hope that it can also serve as a great learning tool for those who are new to interactive visual programming in javascript as well.

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.

I’d like to thank EJ Fox and Kai Chang for their help with this project. If you have a difficult data visualization problem I can’t think of two better people to ask for help!