Some curves

by superboggly

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<html>
  <body>
    <svg/>
  </body>
</html>

JavaScript

var data = [{x:200, y:200}, {x:200, y:10},
           {x:400, y:10},
           {x:400, y:200},
           {x:400, y:400},
           {x:200, y:400},
           {x:10, y:400},
           {x:10, y:200},
           {x:10, y:10},
           {x:50, y:120},
           {x:70, y:180},
           {x:170, y:20}];

var paths = [{source: data[0], target: data[1]},
            {source: data[0], target: data[2]},
            {source: data[0], target: data[3]},
            {source: data[0], target: data[4]},
            {source: data[0], target: data[5]},
            {source: data[0], target: data[6]},
            {source: data[0], target: data[7]},
            {source: data[0], target: data[8]},
            {source: data[0], target: data[9]},
            {source: data[0], target: data[10]},
            {source: data[0], target: data[11]}];

//var data = d3.range(10).map(function(i) {
//  return {x: i / 9, y: (Math.sin(i * 2) + 1) / 2};
//});

var w = 900,
    h = 900;
/*
linear - piecewise linear segments, as in a polyline.
linear-closed - close the linear segments to form a polygon.
step-before - alternate between vertical and horizontal segments, as in a step function.
step-after - alternate between horizontal and vertical segments, as in a step function.
basis - a B-spline, with control point duplication on the ends.
basis-open - an open B-spline; may not intersect the start or end.
basis-closed - a closed B-spline, as in a loop.
bundle - equivalent to basis, except the tension parameter is used to straighten the spline.
cardinal - a Cardinal spline, with control point duplication on the ends.
cardinal-open - an open Cardinal spline; may not intersect the start or end, but will intersect other control points.
cardinal-closed - a closed Cardinal spline, as in a loop.
monotone - cubic interpolation that preserves monotonicity in y.
*/

var bezierLines = function(d,i) {
    return "M" + d.source.x + "," + d.source.y 
    + " C" + d.source.x + "," + (+d.source.y - 90)
    + "...