MathJax and d3

<!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 https://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>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_SVG to https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/mathjax.js?config=tex-mml-am_svg

https://d3js.org/d3.v3.js

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_SVG