Transition between circle and line

by chrisfrisina

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

JavaScript

//The data for our line
var circleData = [ { "x": 150 , "y": 20   },
                 { "x": 165.30, "y": 23.04},
                 { "x": 178.28, "y": 31.71},
                 { "x": 186.95, "y": 44.69},
                 { "x": 190   , "y": 60   },
                 { "x": 186.95, "y": 75.30},
                 { "x": 178.28, "y": 88.28},
                 { "x": 165.30, "y": 96.95},
                 { "x": 150   , "y": 100   },
                 { "x": 134.69, "y": 96.95},
                 { "x": 121.71, "y": 88.28},
                 { "x": 113.04, "y": 75.30},
                 { "x": 110   , "y": 60.00},
                 { "x": 113.04, "y": 44.69},
                 { "x": 121.71, "y": 31.71},
                 { "x": 134.69, "y": 23.04},
                 { "x": 150   , "y": 20   }   ];
//to avoid the closed loop causing ugly loops once it is unraveled, there is another point at the same place as the origin

var lineData = [ { "x": 170   , "y": 100   },
                 { "x": 160   , "y": 100   },
                 { "x": 150   , "y": 100   },
                 { "x": 140   , "y": 100   },
                 { "x": 130   , "y": 100   },
                 { "x": 120   , "y": 100   },
                 { "x": 110   , "y": 100   },
                 { "x": 100   , "y": 100   },
                 { "x": 90    , "y": 100   },
                 { "x": 80    , "y": 100   },
                 { "x": 70    , "y": 100   },
                 { "x": 60    , "y": 100   },
                 { "x": 50    , "y": 100   },
                 { "x": 40    , "y": 100   },
                 { "x": 30    , "y": 100   },
                 { "x": 20    , "y": 100   },
                 { "x": 10    , "y": 100   }   ].reverse();

//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("cardinal");

//The SVG Container
var...