JSFiddle - React, Tailwind, and code Playground

by bendykst

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div id="container"></div>

CSS

#container {
    overflow: hidden;
    margin-top: 40px;
    border: solid #333 1px;
    background-color: #F5F5F5;
    display: inline-block;
}
.radarc {
    fill: black;
    opacity: 0.05;
}
.point {
    opacity: 1;
    fill: black;
}
.guess {
    opacity: 0.6;
    fill: blue;
}
.mower {
    fill: green;
}

JavaScript

(function() {
  "use strict"
  var areaWidth = 700;
  var areaHeight = 500;
  var pointCount = 100; 
  var reseedCount = 10; 
    // The number of random points generated each cycle
    // (as opposed to points generated from existing points.)
  var sensorError = 0.20; 
    // Each distance measurement will have a random
    // amount of error between -sensorError and sensorError
  var minConfidence = 0.001; 
    // Even if a point lies compvarely outside of a band,
    // it will have at least minConfidence
  var creationJitter = 7; 
    // Max distance a new point will be created from
    // its parent point
  var smoothingFactor = 0.05; 
    // Smoothing applied to movement of blue circle
    // Width of high confidence sweet spot in px in the middle
    // of each ping band
  var errorTolerance = 10; 
    // Width of high confidence sweet spot in 
    // px in the middle of each ping band
  var frameRate = 40;
  var sensors = [{x: 100, y: 100},
                   {x: areaWidth, y: areaHeight/2},
                   {x: areaWidth/2, y: areaHeight/2}];
  var radarc = d3.svg
                   .arc()
                   .innerRadius(d => d.actual * (1 - sensorError))
                   .outerRadius(d => d.actual * (1 + sensorError))
                   .startAngle(0)
                   .endAngle(2 * Math.PI);

  function dist(a, b) {
    return Math.sqrt(Math.pow(a.x - b.x, 2) 
                     + Math.pow(a.y - b.y, 2));
  }

  function jitter(v, amt) {
    return v + amt * (1 - 2 * Math.random());
  }

  function ping(mower, sensor) {
    var d = dist(mower, sensor);
    return jitter(d, d * sensorError);
  }

  function confidence(point, ping) {
    var pointDist = dist(point, ping.sensor);
    var pointError = pointDist * sensorError;
    var diff = Math.max(0, Math.abs(pointDist - ping.dist) - errorTolerance);
    return Math.max(minConfidence, (pointError - diff) / pointError);
  }

  function weightedRandomItem(items, weightTotal) {
    var rand =...