mpmckenna8/README.md

## README.md

      
    Raw
  

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

  
## 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; background:black}

    svg {
      background: black;
    }


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

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}
  </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, 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>
	<!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>

	<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, 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>