switched editor environment to d3 + coffeescript (from protovis)

README.md

@@ -1,8 +1,12 @@
 # water
 
-Live coding sketchpad for <a href="http://mbostock.github.com/protovis/">Protovis</a>. Code modifications are instantly displayed - no need to refresh your browser.
+Live coding sketchpad
+for <a href="http://mbostock.github.com/d3/">d3</a> visualizations
+written in <a href="http://coffeescript.org/">Coffeescript</a>.
+Code modifications are instantly displayed - no need to refresh your browser.
 
-Based on Gabriel Florit's <a href='https://github.com/gabrielflorit/water'>Water</a> live coding sketchpad (**<a href='http://gabrielflor.it/water'>original water</a>**)
+Based on Gabriel Florit's <a href='https://github.com/gabrielflorit/water'>Water</a> live coding
+sketchpad (**<a href='http://gabrielflor.it/water'>original water</a>**)
 
 The beautiful code editor, <a href='http://ace.ajax.org/'>Ace</a>, is an open source project by Ajax.org.
 
@@ -12,4 +16,4 @@ Any static file web server will work - for example,
 
     python -m SimpleHTTPServer 8888
 
-Then hit http://localhost:8888/water.html and start coding!
+Then hit http://localhost:8888/water.html#bars and start coding!

examples/bars.coffee

@@ -0,0 +1,24 @@
+data = [ 15, 46, 45, 38, 59 ];
+
+w = 400
+h = 300
+
+x = d3.scale.linear()
+            .domain([0, d3.max(data)])
+            .range([0, w])
+
+y = d3.scale.ordinal()
+            .domain(d3.range(data.length))
+            .rangeBands([0, h], 0.3)
+
+vis = d3.select("svg")
+bars = vis.selectAll("rect.bar").data(data)
+
+bars.enter()
+    .append("svg:rect")
+    .attr("fill", "#a00")
+    .attr("stroke", "#100")
+    .attr("stroke-width", 1)
+    .attr("width", x)
+    .attr("height", y.rangeBand())
+    .attr("transform", (d,i) => "translate(0," + y(i) + ")")