JSFiddle - React, Tailwind, and code Playground

by mrcactu5

HTML

<h2>Random Walk in Configuration Space</h2>
<div class="left"><h3>Angle</h3>

<div class="bars"></div>

<h3>Circle</h3>

    <div class="circle"></div></div>
<div class="right">
<p> Based from two tutorials:
<ul>
    <li> <a href="http://mbostock.github.com/d3/tutorial/bar-2.html">d3.js Bar Tutorial</a> (Michael Bostock)
        <li><a href="http://www.dashingd3js.com/svg-basic-shapes-and-d3js">Basic SVG Shapes and d3.js</a>
    </ul>
 and a Mathoverflow post:
  <ul>
      <li> <a href="http://mathoverflow.net/questions/14714/what-do-heat-kernels-have-to-do-with-the-riemann-roch-theorem-and-the-gauss-bonne">What do Heat Kernels have to do with the Gauss-Bonnet Theorem...?</a>
        </ul>
 So I made up a story:
    </p>
<blockquote><b>T</b>wo dudes run around a circular track holding a string
and i'm recording the angle of the string with respect to horizontal.</blockquote>        
        
 </div>

CSS

body {font-family: Arial,Helvetica,sans-serif; }

.left {
    background-color: #DDFFDD;
    width: 50%;
    height: 500px;
    float: left;
}
.right {
    background-color: #EEEEEE;
    width: 50%;
    height: 500px;
    float: left;
}

JavaScript

var bead = [0, 2 * Math.PI * Math.random(), 2 * Math.PI * Math.random()];

function next() {
    bead[1] += 0.1 * (-1 + 2 * Math.floor(2 * Math.random()));
    bead[2] += 0.1 * (-1 + 2 * Math.floor(2 * Math.random()));
    return {
        time: ++t,
        value: v = 50 - 50 * 2 * Math.atan((Math.sin(bead[2]) - Math.sin(bead[1])) / (Math.cos(bead[2]) - Math.cos(bead[1]))) / Math.PI
    };
}

var t = 1297110663, // start time 	(seconds since epoch)
    v = 70, // start value 	(subscribers)
    data = d3.range(150).map(next); // starting dataset

// every second: shift data by 1, push value, redraw

setInterval(function () {
    data.shift();
    data.push(next());
    redraw();
}, 100);

var w = 2,
    h = 80;

var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, w]);

var y = d3.scale.linear()
    .domain([0, 100])
    .rangeRound([0, h]);

// create a bar chart

var chart = d3.select(".bars").append("svg")
    .attr("class", "chart")
    .attr("width", w * data.length - 1)
    .attr("height", h);

var lineFunction = d3.svg.line()
    .x(function (d) {
    return x(t - d.time);
})
    .y(function (d) {
    return y(d.value);
})
    .interpolate("linear");

chart.append("line")
    .attr("x1", 0)
    .attr("x2", w * data.length)
    .attr("y1", h / 2 - .5)
    .attr("y2", h / 2 - .5)
    .style("stroke", "#000");

chart.append("path")
    .attr("d", lineFunction(data))
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
    .attr("fill", "none");

var clock = d3.select(".circle").append("svg");

clock.append("circle")
    .attr("cx", 125)
    .attr("cy", 125)
    .attr("r", 100)
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
    .attr("fill", "none");



clock.selectAll("circle").data(bead).enter()
    .append("circle")
    .attr("class", "bead")
    .attr("cx", function (d) {
    return 125 + 100 * Math.cos(d);
})
    .attr("cy", function (d) {
    return 125 + 100 * Math.sin(d);
})
    .attr("r", 8)
    .attr("stroke",...