created by http://livecoding.io

README.md

View this code at http://livecoding.io/4612667

options.json

{
    "libraries": [
        "d3"
    ],
    "mode": "javascript",
    "layout": "fullscreen mode (horizontal)",
    "resolution": "reset"
}

water.css

#chart div {
  background-color: black;
  width: 50px;
  height: 10px;
  margin:5px
}

#chart div.bar {
  background-color:red;
}

svg rect {
 fill: steelblue;
 stroke: black;
 stroke-width: 1px
}

water.html

<div id="chart"></div>
<svg></svg>

water.js

var data = [ 4, 8, 15, 16, 23, 42 ];

//d3.select("#chart").selectAll("div")
//	.data(data)
//	.enter()
//	.append("div")
//	.attr("class", "bar")
//  .style("width", function(d) { 
//       return d + "px"
//  });


/*
var svg = d3.select('svg').append('svg:g')

svg.selectAll("rect")
     .data(data)
   .enter().append("rect")
	 .attr({
       "x": function() { return 20 },
       "y": function(d,i) { return (i*26)+100 },
       "width": function(d) { return d*10 },
       "height": function() {return 20 }
     })





//  .on('mousemove',mouse)
/* uncomment below to make the mouse do things on hover */
/*
function mouse() {
  // the next line gets the mouse position with d3, and logs it into
  // an array with two elements: mousePosition[0] and mousePosition[1]
  var mousePosition = d3.svg.mouse(this);    

  d3.select(this)
    .attr('x',mousePosition[0]-20)
    .attr('y',mousePosition[1]-10)
}

*/