mpmckenna8/.block

## .block
license: gpl-3.0
border: yes
scrolling: yes
height: 600

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

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

## sin4xshare.png

      
    Raw
  

              sin4xshare.png
	<!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>