created by http://livecoding.io/3411676

README.md

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

options.json

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

water.css

#curved path {
    fill: none;
    stroke: #000; }

#straight path {
    fill: none;
    stroke: #DDD; }

water.html

<svg width="800" height="800">
  <g id="transformer">
    <g id="straight"></g>
    <g id="curved"></g>
  </g>
</svg>

water.js

var svg = d3.select("#transformer");
var curved = svg.select("#curved");
var straight = svg.select("#straight");

var thickness = 30;

svg.attr('transform','translate(100,100)')

var drawCurvedLine = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("basis")
    .tension(0.5);

var drawStraightLine = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("linear")
    .tension(0);

var l1 = [{x: 200 , y: 0},
          {x: 400, y: 200}, 
          {x: 200, y: 400}, 
          {x: 00 , y: 200},
          {x: 200 , y: 0}];

var l2 = [{x: 70, y: 52.5}, {x: 200, y: 250}, {x: 70, y: 447.5}];

straight.append("path").attr("d", drawStraightLine(l1));
curved.append("path").attr("d", drawCurvedLine(l1));



color = d3.scale.category10();

svg.append('g').selectAll("circle")
    .data(l1).enter()
  .append("svg:circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", thickness/2 - thickness/8)
    .style("fill", function(d, i) { return color(i % 4); });


curved.append('circle').attr('r',200).attr('cx',200).attr('cy',200)
  .attr('fill','none')
  .attr('stroke','#ddd')

curved.selectAll('circle')
  .attr('stroke-width',thickness)
  .attr('stroke-linecap','round')
  .attr('stroke-dasharray',200+','+2000)
  .attr('stroke-dashoffset',10)

water.json

{ }