Polar coords by mpmckenna8

index.html

<!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; }
  </style>
</head>

<body>

  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 500;
    var height = 500;

    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} ,
      { rad: Math.PI/6.0 } ,
       {rad: (Math.PI/4.0)} ,
       {rad: (Math.PI/3.0) },
       { rad: (Math.PI/2.0) },
        { rad: (4*Math.PI)/6},
          { rad: (3*Math.PI)/4},
          { rad: (5*Math.PI)/6},
          { rad: Math.PI },

      ];

	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', 5)
    	.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
      })





    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 < 100; o++){
  var theta = (2 * Math.PI / 100) * o;
  var radius = Math.sin(theta * 4);
  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])
            });



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

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]
}

//svg.append(liner)


  </script>
</body>