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

options.json

{"libraries":["d3"]}

water.html

<h1>Hello! This is a graphic! Try:</h1>
<ul>
  <li>placing the circle inside the square</li>
  <li>making the circle touch the square</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([18])
  .enter().append('circle')
  .attr('cy', 296)
  .attr('cx', 300)
  .attr('r', 89);

svg.selectAll('rect')
  .data([200])
  .enter().append('rect')
  .attr('x', String)
  .attr('y', String)
  .attr('width', String)
  .attr('height', String)
  .style('fill', 'none')
  .style('stroke', '#000000');