created by http://livecoding.io

README.md

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

options.json

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

water.css

div.bar {
        display: inline-block;
        width: 20px;
        height: 75px;
        background-color: teal;
}

water.html

<svg></svg>

water.js

w = 500;
h = 50;
svg = d3.select('svg');
var dataset = [ 5, 13, 15, 20, 25 ];

var circles = svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

circles
  .attr('cx', function(d, i) {
    return (i * 59) + 25;
  })
  .attr('cy', h/1.3)
  .attr('r', function(d) { return d;})
  .attr('fill', 'yellow')
  .attr('stroke', 'red')
.attr('stroke-width', function(d) { return d/3.9})

water.json

{ }