Unroll a square

by chrisfrisina

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
<div id="e">E</div>
<div id="f">F</div>
<div id="g">G</div>

CSS

.circle {
    stroke:red;
    stroke-width:5;
    fill:white;
    opacity: .5;
}
.line {
    stroke:violet;
    stroke-width: 10;
    fill:None
}

JavaScript

var numberOfPoints = 361;
var radius = 50;
var margin = {top: 20, left: 100};
var lineLength = 2 * radius * Math.PI;
var cx = 257.08;
var cy = 70;
var dur = 1000;
var circleData1 = $.map(Array(numberOfPoints), function (d, i) {
    var imag = margin.left + lineLength / 2 + radius * Math.sin(2 * i * Math.PI / (numberOfPoints - 1))
    var real = margin.top + radius - radius * Math.cos(2 * i * Math.PI / (numberOfPoints - 1))
    return { x: imag, y: real}
})


//var circleData2 = [{x:257, y:20},{x:307, y:20},{x:257, y:120},{x:207, y:70},{x:257, y:20}];
var circleData2 = [{x:257, y:20},{x:335, y:20},{x:385, y:70},{x:335, y:120},{x:285, y:70}];
var circleData3 = [{x:257, y:20},{x:335, y:20},{x:414, y:20},{x:464, y:70},{x:414, y:120}];
var circleData4 = [{x:257, y:20},{x:335, y:20},{x:414, y:20},{x:492, y:20},{x:542, y:70}];
var circleData5 = [{x:257, y:20},{x:335, y:20},{x:414, y:20},{x:492, y:20},{x:571, y:20}];

var lineData = $.map(Array(numberOfPoints), function (d, i) {
    var y = margin.top;
    var x = margin.left + i * lineLength / (numberOfPoints - 1)
    return {x: x, y: y}
});
var purpleLineData = $.map(Array(numberOfPoints), function (d, i) {
    var y = 0;
    var x = margin.left + i * lineLength / (numberOfPoints - 1)
    return {x: x, y: y}
});
for(i=0; i<circleData1.length; i++){
    console.log(i + ": " + circleData1[i].x + " , " + circleData1[i].y)
}
console.log("LINE");
for(i=0; i<purpleLineData.length; i++){
    console.log(i + ": " + purpleLineData[i].x + " , " + purpleLineData[i].y)
}
//This is the accessor function we talked about above
var pathFunction = d3.svg.line()
    .x(function (d) {return d.x;})
    .y(function (d) {return d.y;})
    .interpolate("basis"); // bundle | basis | linear | cardinal is also an option

//The SVG Container
var svgContainer = d3.select("body").append("svg")
    .attr("width", 700)
    .attr("height", 400);

//The Circle SVG Path we draw
var circle = svgContainer.append("g")
    .append("path")
   ...