Skip to content
zeffii edited this page Dec 18, 2012 · 8 revisions

Tributary is the starting point for exploring your visualization code.

##Getting Started You can create a new tributary at:
http://enjalot.com/tributary

##What does it do? Tributary allows you to write javascript 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.

##Assumptions
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)
tributary.trace = true; //turns on the logging of error messages (off by default because every key-stroke can set off an error)

//datGUI (only supports numbers for now)
trib.x = 5; //adds x to the datGUI window
trib_options.x = { min: 0, max: 10 }; //sets the options for the datGUI slider

Tributary also has built-in convenience methods for accessing json, csv, and tsv. Create a new tab and name it according to the filetype you want to access, for example; your_file.json, then fill the tab with your data. In your main inlet.js access the file using:

var data = tributary.your_file;  // note: no extention needed for reading
console.log(data) // to inspect

##Available Libraries
d3.js
d3 plugins
jquery
underscore
backbone
coffeescript

###Libraries used Inlet
CodeMirror
ColorPicker
datGUI

##List of Examples basics: http://enjalot.com/tributary/2958196/
rgb: http://enjalot.com/tributary/2958199/
sinwaves: http://enjalot.com/tributary/2958568/
color spaces: http://enjalot.com/tributary/3108149/
tubes: http://enjalot.com/tributary/2958148/
icons: http://enjalot.com/tributary/2958637/
toggle button: http://enjalot.com/tributary/3202575/

Clone this wiki locally