Ruler and compass construction of a pentagon

index.html

<div id="container"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Ruler and compass construction of a pentagon.markdown

Ruler and compass construction of a pentagon

A dynamic visualization made with d3.js

A Pen by Riccardo Scalco on CodePen.

License.

script.js

var width = 960,
    height = 500,
    τ = 2 * Math.PI // http://tauday.com/tau-manifesto
    delta = 1300,
    de = delta * 0.8;

var img = d3.select("#container")
  .append("svg")
  .attr("id", "chart")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform","translate(" + width / 2 + "," + height / 2 + ")")
  .style("fill","#6a6a6a");


//

img.append("circle")
  .attr("id","p1")
  .attr({"r":"10", "cx":"0", "cy":"0", "opacity":"0"});

img.select("#p1").transition().duration(de)
  .attr({"r":"2", "opacity":"1"});

//

// http://bl.ocks.org/mbostock/5100636
var arc1 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(0);

var circle1 = img.append("path")
    .datum({endAngle: 0.000001})
    .attr("d", arc1);

circle1.transition().duration(de * 2).delay(delta * 1)
  .call(arcTween, arc1, 2 * τ);

//

img.append("line")
  .attr("id","l1")
  .attr({"x1":"0", "y1":"-130", "x2":"0", "y2":"-130", "opacity":"1"});

img.select("#l1").transition().duration(de).delay(delta * 3)
  .attr({"y2":"140", "opacity":"1"});

//

img.append("circle")
  .attr("id","p2")
  .attr({"r":"10", "cx":"0", "cy":"-100", "opacity":"0"});

img.select("#p2").transition().duration(de).delay(delta * 4)
  .attr({"r":"2", "opacity":"1"});   

//

var arc2 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(0.64 * τ);

var circle2 = img.append("path")
    .datum({endAngle: 0.6400001 * τ})
    .attr("transform","translate(0,-100)")
    .attr("d", arc2);

circle2.transition().duration(de).delay(delta * 5)
  .call(arcTween, arc2, 0.68 * τ);

//

img.append("circle")
  .attr("id","p3")
  .attr({"r":"10", "cx":"0", "cy":"100", "opacity":"0"});

img.select("#p3").transition().duration(de).delay(delta * 6)
  .attr({"r":"2", "opacity":"1"});

//      

var arc3 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(0.81 * τ);

var circle3 = img.append("path")
    .datum({endAngle: 0.810001 * τ})
    .attr("transform","translate(0,100)")
    .attr("d", arc3);

circle3.transition().duration(de).delay(delta * 7)
  .call(arcTween, arc3, 0.85 * τ);

//

img.append("line")
  .attr("id","l2")
  .attr({"x1":"0", "y1":"-100", "x2":"0", "y2":"-100"});


img.select("#l2").transition().duration(de).delay(delta * 8)
  .attr({"x2": -120 * Math.sqrt(3), "y2":"20"});

//

img.append("line")
  .attr("id","l3")
  .attr({"x1":"0", "y1":"100", "x2":"0", "y2":"100"});

img.select("#l3").transition().duration(de).delay(delta * 9)
  .attr({"x2": -120 * Math.sqrt(3), "y2":"-20"});

//

img.append("line")
  .attr("id","l4")
  .attr({"x1": -110 * Math.sqrt(3), "y1":"0", "x2": -110 * Math.sqrt(3), "y2":"0"});

img.select("#l4").transition().duration(de).delay(delta * 10)
  .attr({"x2": "130"});

//

img.append("circle")
  .attr("id","p4")
  .attr({"r":"10", "cx":"0", "cy":"-100", "opacity":"0"});

img.select("#p4").transition().duration(de).delay(delta * 11)
  .attr({"r":"2", "opacity":"1"});

//

var arc4 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(0.24 * τ);

var circle4 = img.append("path")
    .datum({endAngle: 0.24 * τ})
    .attr("transform","translate(0,-100)")
    .attr("d", arc4);

circle4.transition().duration(de).delay(delta * 12)
  .call(arcTween, arc4, 0.26 * τ);

//

 img.append("circle")
  .attr("id","p5")
  .attr({"r":"10", "cx":"100", "cy":"0", "opacity":"0"});

img.select("#p5").transition().duration(de).delay(delta * 13)
  .attr({"r":"2", "opacity":"1"}); 

//

var arc5 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(-0.01 * τ);

var circle5 = img.append("path")
    .datum({endAngle: -0.01 * τ})
    .attr("transform","translate(100,0)")
    .attr("d", arc5);

circle5.transition().duration(de).delay(delta * 14)
  .call(arcTween, arc5, 0.01 * τ);

//

img.append("line")
  .attr("id","l5")
  .attr({"x1": "-70", "y1":"-100", "x2": "-70", "y2":"-100"});

img.select("#l5").transition().duration(de).delay(delta * 15)
  .attr({"x2":"430"});

//

 img.append("circle")
  .attr("id","p6")
  .attr({"r":"10", "cx":"100", "cy":"-100", "opacity":"0"});

img.select("#p6").transition().duration(de).delay(delta * 16)
  .attr({"r":"2", "opacity":"1"}); 

//

var arc6 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(0.24 * τ);

var circle6 = img.append("path")
    .datum({endAngle: 0.24 * τ})
    .attr("transform","translate(100,-100)")
    .attr("d", arc6);

circle6.transition().duration(de).delay(delta * 17)
  .call(arcTween, arc6, 0.26 * τ);

//

img.append("circle")
  .attr("id","p7")
  .attr({"r":"10", "cx":"200", "cy":"-100", "opacity":"0"});

img.select("#p7").transition().duration(de).delay(delta * 18)
  .attr({"r":"2", "opacity":"1"});   

//

var arc7 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(0.24 * τ);

var circle7 = img.append("path")
    .datum({endAngle: 0.24 * τ})
    .attr("transform","translate(200,-100)")
    .attr("d", arc7);

circle7.transition().duration(de).delay(delta * 19)
  .call(arcTween, arc7, 0.26 * τ);

// 

img.append("circle")
  .attr("id","p8")
  .attr({"r":"10", "cx":"300", "cy":"-100", "opacity":"0"});

img.select("#p8").transition().duration(de).delay(delta * 20)
  .attr({"r":"2", "opacity":"1"});   

//

var arc8 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(0.24 * τ);

var circle8 = img.append("path")
    .datum({endAngle: 0.24 * τ})
    .attr("transform","translate(300,-100)")
    .attr("d", arc8);

circle8.transition().duration(de).delay(delta * 21)
  .call(arcTween, arc8, 0.26 * τ);

// 

img.append("circle")
  .attr("id","p9")
  .attr({"r":"10", "cx":"0", "cy":"100", "opacity":"0"});

img.select("#p9").transition().duration(de).delay(delta * 22)
  .attr({"r":"2", "opacity":"1"});

//

var arc9 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(0.74 * τ);

var circle9 = img.append("path")
    .datum({endAngle: 0.74 * τ})
    .attr("transform","translate(0,100)")
    .attr("d", arc9);

circle9.transition().duration(de).delay(delta * 23)
  .call(arcTween, arc9, 0.76 * τ);

//

 img.append("circle")
  .attr("id","p10")
  .attr({"r":"10", "cx":"-100", "cy":"0", "opacity":"0"});

img.select("#p10").transition().duration(de).delay(delta * 24)
  .attr({"r":"2", "opacity":"1"}); 

//

var arc10 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(0.51 * τ);

var circle10 = img.append("path")
    .datum({endAngle: 0.51 * τ})
    .attr("transform","translate(-100,0)")
    .attr("d", arc10);

circle10.transition().duration(de).delay(delta * 25)
  .call(arcTween, arc10, 0.49 * τ);

//

img.append("line")
  .attr("id","l6")
  .attr({"x1": "0", "y1":"100", "x2": "0", "y2":"100"});

img.select("#l6").transition().duration(de).delay(delta * 26)
  .attr({"x2":"-130"});

//

img.append("line")
  .attr("id","l7")
  .attr({"x1":"400", "y1":"-100", "x2": "400", "y2":"-100"});

img.select("#l7").transition().duration(de).delay(delta * 27)
  .attr({"x2":"-125", "y2":"110"});

//

img.append("line")
  .attr("id","l8")
  .attr({"x1":"0", "y1":"-100", "x2": "0", "y2":"-100"});

img.select("#l8").transition().duration(de).delay(delta * 28)
  .attr({"y2":"82.56645", "x2":"-56.416137"});

//

img.append("line")
  .attr("id","l9")
  .attr({"x1":"0", "y1":"-100", "x2": "0", "y2":"-100"});

img.select("#l9").transition().duration(de).delay(delta * 29)
  .attr({"x2":"97.795447", "y2":"20.881821"});

//

img.append("circle")
  .attr("id","p11")
  .attr({"r":"10", "cx":"80.901699", "cy":"0", "opacity":"0"});

img.select("#p11").transition().duration(de).delay(delta * 30)
  .attr({"r":"2", "opacity":"1"});

//

var arc11 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(-0.05 * τ);

var circle11 = img.append("path")
    .datum({endAngle: -0.05 * τ})
    .attr("transform","translate(80.901699,0)")
    .attr("d", arc11);

circle11.transition().duration(de).delay(delta * 31)
  .call(arcTween, arc11, 0.05 * τ);

//

img.append("line")
  .attr("id","l10")
  .attr({"x1":"80.901699", "y1":"-100", "x2": "80.901699", "y2":"-100"});

img.select("#l10").transition().duration(de).delay(delta * 32)
  .attr({"y2":"90"});  

//

img.append("circle")
  .attr("id","p12")
  .attr({"r":"10", "cx":"-30.845059", "cy":"0", "opacity":"0"});

img.select("#p12").transition().duration(de).delay(delta * 33)
  .attr({"r":"2", "opacity":"1"});

//

var arc12 = d3.svg.arc()
  .innerRadius(99.5)
  .outerRadius(100.5)
  .startAngle(-0.05 * τ);

var circle12 = img.append("path")
    .datum({endAngle: -0.05 * τ})
    .attr("transform","translate(-30.845059,0)")
    .attr("d", arc12);

circle12.transition().duration(de).delay(delta * 34)
  .call(arcTween, arc12, 0.05 * τ);

//

img.append("line")
  .attr("id","l11")
  .attr({"x1":"-30.845059", "y1":"-100", "x2": "-30.845059", "y2":"-100"});

img.select("#l11").transition().duration(de).delay(delta * 35)
  .attr({"y2":"110"});  

//

img.append("line")
  .attr("id","l12")
  .attr({"x1":"-100", "y1":"0", "x2": "-100", "y2":"0", "opacity":"0"});

img.select("#l12").transition().duration(de).delay(delta * 36)
  .attr({"x2":"-30.845", "y2":"95.124", "opacity":"1"});  

//

img.append("line")
  .attr("id","l13")
  .attr({"x1":"-30.845", "y1":"95.124", "x2": "-30.845", "y2":"95.124", "opacity":"0"});

img.select("#l13").transition().duration(de).delay(delta * 37)
  .attr({"x2":"80.902", "y2":"58.779", "opacity":"1"});

//

img.append("line")
  .attr("id","l14")
  .attr({"x1":"80.902", "y1":"58.779", "x2": "80.902", "y2":"58.779", "opacity":"0"});

img.select("#l14").transition().duration(de).delay(delta * 38)
  .attr({"x2":"80.902", "y2":"-58.779", "opacity":"1"}); 

//

img.append("line")
  .attr("id","l15")
  .attr({"x1":"80.902", "y1":"-58.779", "x2": "80.902", "y2":"-58.779", "opacity":"0"});

img.select("#l15").transition().duration(de).delay(delta * 39)
  .attr({"x2":"-30.845", "y2":"-95.124", "opacity":"1"}); 

//

img.append("line")
  .attr("id","l16")
  .attr({"x1":"-30.845", "y1":"-95.124", "x2": "-30.845", "y2":"-95.124", "opacity":"0"});

img.select("#l16").transition().duration(de).delay(delta * 40)
  .attr({"x2":"-100", "y2":"0", "opacity":"1"}); 



// Function  Definitions

function arcTween(transition, arc, newAngle) {
  transition.attrTween("d", function(d) {
    var interpolate = d3.interpolate(d.endAngle, newAngle);
    return function(t) {
      d.endAngle = interpolate(t);
      return arc(d);
    };
  });
};

style.css

line {
  stroke: #6a6a6a;
  stroke-width: 1px;
}

#l12, #l13, #l14, #l15, #l16 {
  stroke: red;
  stroke-width: 3px;
}

body {
  background-color: #eee;
}

#container {
  width:960px;
  margin: auto;
}