created by livecoding - http://livecoding.gabrielflor.it

water.css

svg {
  background: #000000;
}

path {
  stroke: red;
}

water.js

var width = $('svg').width();
var height = $('svg').height();
var svg = d3.select('svg');
var g = svg.append('g');
var line;
//var branches = [];

//var trunk = {
//};

//branches.push(trunk);

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

line = d3.svg.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .interpolate('basis');

g.append('path')
  .attr('d', line([
    {
      'x': 1,
      'y': 1
    },
    {
      'x': 100,
      'y': 100
    }
  ]));

/*svg.selectAll('rect')
  .data(branches)
  .enter().append('rect')
  .attr('x', function(d) { return d.x; })
  .attr('y', function(d) { return d.y; })
  .attr('height', function(d) { return d.height; })
  .attr('width', function(d) { return d.width; })
  .attr('transform', function(d) {
    return 'rotate(' 
      + d.angle + ', ' 
      + d.rotation_x + ', ' 
      + d.rotation_y + ')';
  });
*/