Bryan Nehl edited this page May 24, 2016 · 13 revisions

Welcome to the tributary wiki!

Project Homepage

Tributary is an experimental environment for rapidly prototyping visualization code. The environment provides several libraries useful for this kind of coding, as well as a simple interface for live code editing.


The are several Plugins which make different assumptions about the code you write in tributary.

Getting Started

You can create a new tributary at:

What does it do?

Tributary helps you to write code in the browser, and see the results immediately! Whenever you type anything into the code editor, Tributary will re-evaluate the code.

You can do more than just write code with Tributary, you can also play with it! Try clicking on any number in the code editor, and you will get a slider that pops up. This slider lets you quickly change that number and see what happens immediately. Are you using hex codes like "#ff0000" in your code? If so, just click on one and use the color picker that pops up!

Saving + Sharing

In Tributary saving and sharing are pretty much the same thing, just click the fork button and you're URL will update to a unique address for your live code. Behind the scenes tributary saves the code in your editor to a github gist. If you want the gists to be saved under your github account, be sure to login with the button at the top right of the page.


Tributary makes some assumptions about what you want to do with your code. The main assumption in tributary is that you want to generate visuals with SVG. Tributary provides you with an existing svg element, which can be accessed like so:

var svg = d3.select("svg");

Every time the code is re-evaluated (by editing it, or resizing the window) the svg element is emptied prior to the code being run. The svg element only gets emptied if the code does not encounter an error

Useful built-ins

You always have access to the tributary object within the scope of your code, this object has some useful functions and attributes:

tributary.sw //current width of the svg element (always fills the window)
tributary.sh //current height of the svg element (always fills the window)


Want to add your own views? Fork me and get started!