created by livecoding - http://livecoding.io/3412267

options.json

{"libraries":["d3"]}

water.html

<h1>Hello! This is a graphic! Try:</h1>
<ul>
  <li>adding another circle</li>
  <li>making all the circles the same radius</li>
  <li>coloring all the circles red</li>
  <li>coloring all the circles olive green</li>
</ul>
<svg></svg>

water.js

var width = $('svg').width();
var height = $('svg').height();
var svg = d3.select('svg');

svg
  .attr('width', width)
  .attr('height', height);

svg.selectAll('circle')
  .data([64, 128, 256])
  .enter().append('circle')
  .attr('cy', 128)
  .attr('cx', String)
  .attr('r', Math.sqrt);