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

README.md

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

options.json

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

water.css

svg {
  position: absolute;
}

water.html

<svg></svg>

water.js

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

svg
  .attr('width', width)
  .attr('height', height);
numbers = [120,,54,160,180,240];
svg.selectAll('circle')
  .data(numbers)
  .enter().append('circle')
  .attr('cy', 236)
  .attr('cx', String)
  .attr('r', Math.sqrt);

divs = d3.selectAll("div")
  .data(numbers)
  .enter().text(String)
  .append("div");


divs.exit();
divs.update();
divs.order();
/*
var circles = svg.selectAll("circle");
circles.style("fill",d3.color(String));
*/