larsenmtl/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

  .axis {
    font: 10px sans-serif;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

</style>

<body>
  <script src="//d3js.org/d3.v3.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_SVG">
  </script>
  <script>
    var margin = {
        top: 50,
        right: 50,
        bottom: 50,
        left: 50
      },
      width = 500 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom,
			radius = Math.min(width,height)/2;

   var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("circle")
    	.attr("r", radius)
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")")
    	.style("stroke","steelblue")
    	.style("stroke-width","2px")
    	.style("fill", "none");

    // from http://stackoverflow.com/a/4652513/16363
    function reduce(numerator,denominator){
      var gcd = function gcd(a,b){
        return b ? gcd(b, a%b) : a;
      };
      gcd = gcd(numerator,denominator);
      return [numerator/gcd, denominator/gcd];
    }

    var labels = [
      {val: Math.PI/4, label: "$\\frac" + "{\\pi}4$"},
      {val: Math.PI/2, label: "$\\frac" + "{\\pi}2$"},
      {val: (3 * Math.PI) / 4, label: "$\\frac" + "{3\\pi}4$"},
      {val: Math.PI, label: "$\\pi$"},
      {val: (5 * Math.PI) / 4, label: "$\\frac" + "{5\\pi}4$"},
      {val: (3 * Math.PI) / 2, label: "$\\frac" + "{3\\pi}2$"},
      {val: (7 * Math.PI) / 4, label: "$\\frac" + "{7\\pi}4$"},
      {val: (2 * Math.PI), label: "${2\\pi}$"},
    ]

    labels.forEach(function(d){
      var angle = d.val,
          fudgeX = (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2)  ? -20 : 5,
          fudgeY = (angle > 0 && angle < Math.PI)  ? -25 : 0,
      		x = radius *  Math.cos(angle),
					y = radius *  Math.sin(angle);

      var posX = (width/2 + x),
          posY = (height/2 - y);

      svg.append("g")
      	.attr("class", "tick")
      	.attr("transform", "translate(" + (posX + fudgeX) + "," + (posY + fudgeY)  + ")")
      	.append("text")
      	.text(
        	function(){
           	return d.label;
          }
      	);

      svg.append("path")
      	.attr("d", "M" + width/2 + "," + height/2 + "L" + (width/2 + x) + "," + (height/2 - y))
      .style("stroke","steelblue")
      .style("stroke-width","2px");
    });


setTimeout(() => {

  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });

  MathJax.Hub.Register.StartupHook("End", function() {
    setTimeout(() => {
          svg.selectAll('.tick').each(function(){
          var self = d3.select(this),
              g = self.select('text>span>svg');
          g.remove();
          self.append(function(){
            return g.node();
          });
        });
      }, 1);
    });

  MathJax.Hub.Queue(["Typeset", MathJax.Hub, svg.node()]);

}, 1);


  </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.axis {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>

	<body>
	<script src="//d3js.org/d3.v3.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_SVG">
	</script>
	<script>
	var margin = {
	top: 50,
	right: 50,
	bottom: 50,
	left: 50
	},
	width = 500 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom,
	radius = Math.min(width,height)/2;

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.append("circle")
	.attr("r", radius)
	.attr("transform", "translate(" + width/2 + "," + height/2 + ")")
	.style("stroke","steelblue")
	.style("stroke-width","2px")
	.style("fill", "none");

	// from http://stackoverflow.com/a/4652513/16363
	function reduce(numerator,denominator){
	var gcd = function gcd(a,b){
	return b ? gcd(b, a%b) : a;
	};
	gcd = gcd(numerator,denominator);
	return [numerator/gcd, denominator/gcd];
	}

	var labels = [
	{val: Math.PI/4, label: "$\\frac" + "{\\pi}4$"},
	{val: Math.PI/2, label: "$\\frac" + "{\\pi}2$"},
	{val: (3 * Math.PI) / 4, label: "$\\frac" + "{3\\pi}4$"},
	{val: Math.PI, label: "$\\pi$"},
	{val: (5 * Math.PI) / 4, label: "$\\frac" + "{5\\pi}4$"},
	{val: (3 * Math.PI) / 2, label: "$\\frac" + "{3\\pi}2$"},
	{val: (7 * Math.PI) / 4, label: "$\\frac" + "{7\\pi}4$"},
	{val: (2 * Math.PI), label: "${2\\pi}$"},
	]

	labels.forEach(function(d){
	var angle = d.val,
	fudgeX = (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2) ? -20 : 5,
	fudgeY = (angle > 0 && angle < Math.PI) ? -25 : 0,
	x = radius * Math.cos(angle),
	y = radius * Math.sin(angle);

	var posX = (width/2 + x),
	posY = (height/2 - y);

	svg.append("g")
	.attr("class", "tick")
	.attr("transform", "translate(" + (posX + fudgeX) + "," + (posY + fudgeY) + ")")
	.append("text")
	.text(
	function(){
	return d.label;
	}
	);

	svg.append("path")
	.attr("d", "M" + width/2 + "," + height/2 + "L" + (width/2 + x) + "," + (height/2 - y))
	.style("stroke","steelblue")
	.style("stroke-width","2px");
	});



	setTimeout(() => {

	MathJax.Hub.Config({
	tex2jax: {
	inlineMath: [ ['$','$'], ["\\(","\\)"] ],
	processEscapes: true
	}
	});

	MathJax.Hub.Register.StartupHook("End", function() {
	setTimeout(() => {
	svg.selectAll('.tick').each(function(){
	var self = d3.select(this),
	g = self.select('text>span>svg');
	g.remove();
	self.append(function(){
	return g.node();
	});
	});
	}, 1);
	});

	MathJax.Hub.Queue(["Typeset", MathJax.Hub, svg.node()]);

	}, 1);


	</script>