happy birthday tributary

_.md

[ Launch: happy birthday tributary ] 5175070 by enjalot

config.json

{"description":"happy birthday tributary","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"trib.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"content.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/G0RSxIf.png"}

content.html

<div id="content">
  
  <section id="intro">
<p>
Ideas flow from a creator’s mind into their medium. Far too often those
ideas never materialize because of the friction they face in the gateway to
reality. 
<!-- below fold -->
</p>
<p class="fold">
In early 2012, EJ and I watched Bret Victor’s Inventing on Principle talk, and
were awakened to the possibility of making tools that bridge the gap between
mind and materializing. When we came upon Gabriel Florit’s initial
implementation of his water project (what is now livecoding.io) we realized we
could be working on this. Thus Tributary was born.  
</p>
</section>

<header id="learn">Learn</header>
<section id="learn-start">
<p>EJ and I were working together to create data visualizations with d3.js. D3
ties together many modern web standards, which is both powerful and hard to
learn. 
<!-- below fold -->
</p>
<p class="fold">
We wanted a way to explore all of these new standards and try out their myriad
features. Furthermore, EJ had stronger experience as a visual designer and I
had stronger experience as a programmer so we were learning different areas of
this brave new world. 
</p>
</section>


<header id="work">Work</header>
<section id="work-start">
<p>
Designers and programmers often speak different languages, and while they are
trying to build the same thing they are primarily concerned with solving
different aspects of the same problem. 
<!-- below fold -->
</p>
<p class="fold">
In order to stay on the same page EJ and I wanted a way to incrementally build
on each other’s work. While we worked together, ideas and possibilities were in
no short supply, the trick was enabling each other to implement them. We wanted
a fast way to pass a single piece back and forth until it reflected what we
wanted to see.
</p>
</section>

<section class='card' id="learn-michael">
<a class="twitter" href="http://twitter.com/poezn">@poezn</a> 
has been using Tributary to teach students of his 
<a href="http://blogs.ischool.berkeley.edu/i247s13/">Information Visualization course</a>
 at UC Berkeley principles of data visualization
<a href="http://tributary.io/inlet/5054889">http://tributary.io/inlet/5054889
<img src="img/content/learn-michael.png"></a>
</section>

<section class='card' id="work-halftone">
Datavis Design studio <a href="http://halftone.co">Halftone</a>
(<a class="twitter" href="http://twitter.com/hlftn">@hlftn</a>)
has been using Tributary to prototype client projects, including their <a href="http://halftone.co/projects/self-immolations/">latest piece</a>
<a href="http://tributary.io/inlet/974ae3faa37c8c771965">http://tributary.io/inlet/974ae3faa37c8c771965
<img src="img/content/work-halftone.png"></a>
</section>


<section class='card' id="learn-zeffii">
<a class="twitter" href="http://twitter.com/zeffii">@zeffii</a> 
has been using Tributary to complete his 
<a href="https://www.coursera.org/course/musicproduction">coursera</a> homework! 
<a href="http://tributary.io/inlet/5100062">http://tributary.io/inlet/5100062
<img src="img/content/learn-zeffii.png"></a>
</section>

<section class='card' id="work-nils">
<a class="twitter" href="http://twitter.com/bausofthenauf">@bausofthenauf</a> 
has been using Tributary to figure out auto-scaling text at work
<a href="http://tributary.io/inlet/3197265/">http://tributary.io/inlet/3197265
<img src="img/content/work-nils.png"></a>
</section>

<section class='card' id="learn-d3">
<a class="twitter" href="http://twitter.com/d3visualization">@d3visualization</a>,
<a class="twitter" href="http://twitter.com/tmcw">@tmcw</a>, 
<a class="twitter" href="http://twitter.com/syntagmatic">@syntagmatic</a> 
use tributary on the <a href="https://groups.google.com/forum/?fromgroups#!forum/d3-js">d3 mailing</a> 
list and irc channel (#d3.js on irc.freenode.net) to help people understand d3 concepts.<br>
<a class="twitter" href="http://twitter.com/enjalot">@enjalot</a>
uses tributary to live code d3 tutorial videos
<a href="http://enjalot.github.com/dot-enter">dot enter</a>
<a href="http://enjalot.github.com/dot-append">dot append
<img src="img/content/learn-d3.png"></a>
</section>

<section class='card' id="work-enjalot">
<a class="twitter" href="http://twitter.com/enjalot">@enjalot</a> 
uses Tributary to do collaborative code interviews with potential employees.
The immediate feedback allows focus to remain on exploring data and concepts
rather than syntax.<br>
He also uses it to prototype visualizations and app components for <a href="http://lever.co">Lever</a>
<a href="http://tributary.io/inlet/3791303/">http://tributary.io/inlet/3791303
<img src="img/content/work-enjalot.png"></a>
</section>

<section class='card' id="play-geom">
We had a friendly competition on twitter to re-implement 
<a href="http://geometrydaily.tumblr.com/">geometry daily</a> with d3:<br>
<a class="twitter" href="http://twitter.com/zeffii">@zeffii</a> <a href="http://tributary.io/inlet/5073832">http://tributary.io/inlet/5073832</a><br>
<a class="twitter" href="http://twitter.com/seliopou">@seliopou</a> <a href="http://tributary.io/inlet/4981624">http://tributary.io/inlet/4981624</a><br>
<a class="twitter" href="http://twitter.com/tmcw">@tmcw</a> <a href="http://bl.ocks.org/tmcw/4949603">http://bl.ocks.org/tmcw/4949603</a><br>
<a class="twitter" href="http://twitter.com/enjalot">@enjalot</a> <a href="http://tributary.io/inlet/4998357">http://tributary.io/inlet/4998357</a><br>
<a class="twitter" href="http://twitter.com/zeffii">@zeffii</a> ended up 
<a href="http://tributary.io/inlet/5020279">winning
<img src="img/content/play-geom.png"></a>
</section>

<section class='card' id="play-vj">
<a class="twitter" href="http://twitter.com/ptvan">@ptvan</a>, 
<a class="twitter" href="http://twitter.com/bausofthenauf">@baufothenauf</a> and
<a class="twitter" href="http://twitter.com/enjalot">@enjalot</a> 
spent a long night prototyping visuals for a VJ set by our friend <a href="http://twitter.com/srhnhm">@srhnhm</a><br>
<a href="http://tributary.io/inlet/5174963">http://tributary.io/inlet/5174963
<img src="img/content/play-vj.png"></a>
</section>

<section class='card' id="play-illusions">
<a class="twitter" href="http://twitter.com/enjalot">@enjalot</a> 
has used Tributary to recreate<br>
<a href="http://newhive.com/enjalot/moreillusions">optical illusions
<img src="img/content/play-illusions.png"></a>
</section>

  
</div>

inlet.js

//

style.css

#display {
  overflow: scroll;
}

#content {
  position: relative;
  width: 800px;
  margin: 0 auto;
  z-index: 100;
}

header {
  font-size: 41px;
  font-weight: bold;
  display: none;
}
section {
  float: left;
  background-color: rgba(255, 255, 255, 0.5);
  width: 343px;
  margin-left: 10px;
}
.card img {
  width: 343px;
  height: 100px;
}

.fold {
  display: none;
}

#bg {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
}

path {
  fill: none;
  stroke: #3A529C;
  stroke-width: 20px;
  stroke-opacity: 1;
}

trib.html

<div id="bg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%"
	 height="118%" viewBox="0 90 800 1400">
<g id="Layer_1">
	<g>
		<path  d="M410.591,86.636c0,0,0,61.497,0,101.995s-17.427,78.379-92.423,81.378
			c-16.542,0.662-71.068-13.882-71.068,76.114"/>
		<path  d="M410.591,88.418c0,0,0,61.497,0,101.995s17.427,78.379,92.423,81.378
			c16.542,0.662,71.068-13.882,71.068,76.114"/>
	</g>
	<g>
		<path  d="M574.082,347.548c0,0,0,44.57,0,73.921c0,29.351-12.631,56.806-66.984,58.979
			c-11.988,0.479-51.508-10.061-51.508,55.164"/>
		<path  d="M574.082,348.84c0,0,0,44.57,0,73.921s12.63,56.806,66.984,58.979
			c11.988,0.479,51.507-10.061,51.507,55.164"/>
	</g>
	<g>
		<path  d="M529.082,795.488"/>
		<path  d="M692.573,536.001c0,0,0,61.497,0,101.995"/>
		<path  d="M692.573,537.783c0,0,0,61.497,0,101.995"/>
	</g>
	<g>
		<path  d="M83.608,603.789c0,0,0,61.497,0,101.995"/>
		<path  d="M83.608,605.571c0,0,0,61.497,0,101.995s17.427,78.379,92.423,81.378
			c16.542,0.662,71.068-13.882,71.068,76.113"/>
	</g>
	<g>
		<path  d="M247.1,864.058c0,0,0,61.496,0,101.994"/>
		<path  d="M247.1,865.84c0,0,0,61.497,0,101.995s17.427,78.379,92.423,81.378
			c16.542,0.661,71.068-13.882,71.068,76.114v215.246v161.992"/>
	</g>
	<g>
		<path  d="M574.082,934.123c0,0,0,61.496,0,101.994s-17.427,78.379-92.424,81.379
			c-16.541,0.662-71.068-13.882-71.068,76.113"/>
		<path  d="M574.082,935.905c0,0,0,61.497,0,101.995"/>
	</g>
	<g>
		<path  d="M455.591,535.109c0,0,0,61.497,0,101.995"/>
		<path  d="M455.591,536.892c0,0,0,61.497,0,101.995"/>
	</g>
	<g>
		<path  d="M247.1,344.302c0,0,0,61.497,0,101.995s-17.427,78.379-92.423,81.378
			c-16.542,0.662-71.068-13.882-71.068,76.114"/>
		<path  d="M247.1,346.084c0,0,0,61.497,0,101.995s17.427,78.379,92.423,81.378
			c16.542,0.662,71.068-13.882,71.068,76.114v78.438v51.306"/>
	</g>
	<g>
		<path  d="M410.591,676.418c0,0,0,61.497,0,101.995s17.427,78.379,92.423,81.378
			c16.542,0.661,71.068-13.882,71.068,76.114"/>
		<path  d="M410.591,674.636c0,0,0,61.497,0,101.995s-17.427,78.378-92.423,81.378
			c-16.542,0.662-71.068-13.882-71.068,76.113"/>
	</g>
	<g>
		<path  d="M573.979,825.299c0,0,0-44.327,0-73.519c0-29.191-12.592-56.496-66.778-58.658
			c-11.95-0.477-51.347,10.006-51.347-54.862"/>
		<path  d="M692.102,636.974c0,64.87-39.396,54.387-51.346,54.863c-54.187,2.162-66.777,29.467-66.777,58.659
			c0,29.19,0,73.518,0,73.518l-1.485,87.594"/>
	</g>
</g>
</svg>
</div>