Pretty trig function animation

Pretty not really functional thing using trig function polar coordinate graph with d3 and some css animations.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background:black}

svg {
      background: black;
    }

.graphline {
      stroke-dasharray: 101;
      animation: dash 5s linear forwards;
    }

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}
  </style>
</head>

<body>

var margin = {
      top: 25,
      left:25
    }

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append('g')
      .attr('transform', 'translate(25,25)')

var scaleWidth = (width - 50)

var scale = d3.scaleLinear()
    								.domain([-1,1])
    								.range([0, scaleWidth ])

var yscale = d3.scaleLinear()
    								.domain([1,-1])
    								.range([scaleWidth, 0 ])

var horAxis = d3.axisBottom(scale);

var posxtrans =  (width-50)/2.0 ;
  //  console.log(posxtrans)

svg.append("g")
    	.call(horAxis)
    	.attr("class", "horizonaxis")
    	.attr("transform", "translate(" + 0 + "," + posxtrans + ")"  )

var vertAxis = d3.axisLeft(scale);

svg.append("g")
    	.call(vertAxis)
    	.attr("class", "vertaxis")
    	.attr("transform", "translate(" + posxtrans+ "," + 0 + ")"  )

var angles = [
      { rad: 0, label: "0"} ,
      { rad: Math.PI/6.0, label: "pi/6" } ,
      {rad: (Math.PI/4.0), label: "pi/4"} ,
      {rad: (Math.PI/3.0), label:"pi/3" },
      { rad: (Math.PI/2.0), label:"pi/2" },
      { rad: (4*Math.PI)/6, label:"2pi/3"},
      { rad: (3*Math.PI)/4,  label:"3pi/4"},
      { rad: (5*Math.PI)/6, label:"5pi/6"},
      { rad: Math.PI, label:"pi" },
      { rad: (7*Math.PI)/6, label:"7pi/6"},
      { rad: (5*Math.PI)/4, label:"5pi/4"},
      { rad: (8*Math.PI)/6, label:"4pi/3"},
      { rad: (9*Math.PI)/6, label:"3pi/2"},
          { rad: (7*Math.PI)/4, label:"7pi/4"},

{ rad: (10*Math.PI)/6, label:"5pi/3"},
          { rad: (11*Math.PI)/6, label:"11pi/6"},
          { rad: (12*Math.PI)/6, label:"2pi"},

];

var anglepoints = [];

for ( i of anglepoints){
      console.log(i)
      anglepoints.push(makeAngles(i.rad))
    }

var dotsG = svg.append('g').attr('class', 'dotsGroup')
    				//	.attr('transform', 'translate(' + 0 + "," + 0 + ')');

yscale = d3.scaleLinear()
  								.domain([1,-1])
  								.range([0, scaleWidth ])

dotsG.selectAll('.dots')
    	.data(angles)
    	.enter()
    	.append('circle')
    	.attr('class', 'dots')
    	.attr('r', 1)
    	.attr('cx', function(d,i){
        return scale(makeAngles(d.rad)[0])
      })
    	.attr('cy', function(d,i){
      //  console.log(d, i)
      //  console.log(scale(makeAngles(d.rad)[0]))
      //  console.log(scale(makeAngles(d.rad)[1]))

return yscale(makeAngles(d.rad)[1])
      })
      .attr('radi', function(d, i){
        return d.rad
      })
      .attr('id', function(d,i){
//  console.log(this);
        return 'dot' + i
      })

dotsG.selectAll('.majorAngles')
      	.data(angles)
      	.enter()
      	.append('text')
      	.attr('class', 'majorAngles')
        .attr('transform', function(d,i){
            var xtran = scale(makeAngles(d.rad)[0])
            var ytran = yscale(makeAngles(d.rad)[1])
            return  "translate("+ xtran +"," + ytran +")"
      })
      .text(function(d){
        console.log('addin text to', d)
        return d.label
      })

function makeAngles(ang){
      var xang = Math.cos(ang);
      var yang = Math.sin(ang);
    //  console.log('xangle is', xang)
      // because 2 NaN s are not equal for whatever reason
      if(xang !== xang ){
        console.log('x is not a number', xang)
        xang = 0;
      }

if( (yang !== yang)){

yang = 0;

}

return [xang, yang];

}

// going to try to graph sin theta

var sinlineg = svg.append('g').attr('class', 'sinlinegroup')

var sinpoints = [];

for ( o = 0; o < 1000; o++){

var theta = (2 * Math.PI / 1000) * o;

// function i'm graphing
  var radius = Math.pow(Math.cos(theta * 12 ), 1);

if(radius !== radius){
    radius = 0;
  }
  var xy = findcoor(theta, radius);
  sinpoints.push({ theta: theta, radius: radius, xy: xy })

}

console.log(sinpoints)

var line = d3.line()
            .x(function(d){
        //      console.log('trying to make x with', d)
              return scale(d.xy[0])
            })
            .y(function(d){
              return yscale(d.xy[1])
            })
            .curve(d3.curveCatmullRom.alpha(0.5));        //    .curve(d3.curveBundle.beta(0.5));

var liner = sinlineg
  .append('path')
  .attr('d', line(sinpoints))
  .attr('stroke', 'purple')
  .attr('width', 3)
  .attr('fill',  'none')//'orange')
  .attr('class', 'graphline')

var totalLength = liner.node().getTotalLength();

console.log(totalLength)

liner.attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(6000)
    .attr("stroke-dashoffset", .5)
    .attr('id', function(d,i){
      console.log('hope i m in the animating', d);
      return 'hooey'
    });

function findcoor(theta, radius){

var xpo = radius * Math.cos(theta);
  var ypo = radius * Math.sin(theta);

if( xpo !== xpo){
    xpo = 0;
  }
  if ( ypo !== ypo ){
    ypo = 0;
  }

//  console.log(xpo)

return [xpo, ypo]

}

</script>
</body>

https://d3js.org/d3.v4.min.js