JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trig"></div>

CSS

.title{text-align:center}.subTitle{font-size:16px}#finance{position:relative;margin:40px 0;border:1px solid #9cf}#labels{position:absolute;width:800px;z-index:10}#financeTitle{position:absolute;top:-20px}#summaryGraph .flotr-grid-label{margin-top:-16px;background:transparent;text-align:left}.documentation p{font-size:14px;padding-left:20px;padding-right:8px}.documentation ol{font-size:14px}.documentation h3{padding-top:12px}.documentation h4{padding-left:20px;font-size:14px}.documentation p code{font-size:12px}.documentation .snippet{margin-left:20px}label{float:none}input{width:auto}#trig{margin:20px}.trig path,.trig circle,.trig line{stroke:steelblue;stroke-width:2px;fill:none}.trig .axis{stroke:#999}.trig text{fill:#444;font-family:sans-serif;font-size:22}.chart{position:relative;height:524px;padding-top:54px}.fortune p{font-size:14px}.fortune h3{margin-bottom:8px}.fortune ul{font-size:14px;margin-bottom:20px}.controls{position:absolute;top:0;right:0;font-size:12px;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.control,.controls .label{float:left;text-align:center}.controls .label{padding-top:2px}.control{font-size:14px}.control.rank{width:52px}.control.revenue{width:70px}.control.profit{width:52px}.control{cursor:pointer}.control.selected{font-weight:bold}.inflation{position:absolute;top:20px;right:0;font-size:12px;width:200px;text-align:right;padding-right:10px}.inflation label{display:inline-block;width:auto;padding-bottom:2px;cursor:pointer}.inflation input{position:relative;bottom:-2px}.company{font-size:12px;display:none;color:#222;position:absolute;margin-top:54px}.company-arrow{background:url(../home/cesutherland/HSD/images/demos/fortune-arrow.png) top center no-repeat;position:absolute;left:50%;margin-left:-6px;width:13px;height:7px;top:0}.company-content{margin-top:5px;border:2px solid #4863a0;padding:6px 6px 8px 6px;background:#fff;border-radius:5px}.company...

JavaScript

//
// Simulation of path of a robot arm based on two human arm
// segments - the humerous (from shoulder to elbow) and ulna
// from elbow to hand.
//

(function () {

  var
    panRadius   = 1,     // radius of pancake pan
    a           = 1,     // length of "humerous"
    b           = 2.2,   // length of "ulna"
    c           = 2.2;   // distance between shoulders

  var
    ID_TRIG    = '#trig';
    xmin       = -(a + .2),
    xmax       = c + a + .2,
    ymin       = -(a + b + 1),
    ymax       = 0.1,
    xScale     = d3.scale.linear(),
    yScale     = d3.scale.linear(),
    vis        = d3.select(ID_TRIG).append('svg:svg'),
    graph      = vis.append('svg:g'),
    dot        = graph.append('svg:circle'),
    pan        = graph.append('svg:circle'),
    humerous1  = graph.append('svg:line'),
    humerous2  = graph.append('svg:line'),
    ulna1      = graph.append('svg:line'),
    ulna2      = graph.append('svg:line'),
    shoulder1  = graph.append('svg:circle'),        
    shoulder2  = graph.append('svg:circle'),        
    tracepath  = graph.append('svg:path'),
    pathline   = d3.svg.line(),
    rate1      = 1/7,
    rate2      = 1/5,
    theta1     = 0,
    theta2     = 0,
    width      = 450,
    height     = 450,
    tracedata  = [];
    
  var
    X1 = 'x1',
    X2 = 'x2',
    Y1 = 'y1',
    Y2 = 'y2';

      
  xScale
    .domain([xmin, xmax])
    .range([0, width]);

  yScale
    .domain([ymin, ymax])
    .range([0, height]);

  vis
    .attr('class', 'trig')
    .attr('width', width)
    .attr('height', height);

  dot
    .attr('r', 4)
    .style('fill', '#fff');

  tracepath
    .attr("class", "pathline")

  pan
    .attr('r', xScale(panRadius)-xScale(0))
    .attr('cx', xScale(c/2))
    .attr('cy', yScale(-(a+b/2)))
    .attr("class", "pan")
    .style('fill', '#fff');
    
  humerous1
    .attr(X1, xScale(0))
    .attr(Y1, yScale(0));

  humerous2
    .attr(X1, xScale(c))
    .attr(Y1, yScale(0));
  
  shoulder1
    .attr('cx',...