JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://rawgit.com/gregross/javascript-voronoi/master/javascript/Voronoi.js"></script>
<div id="voronoiDiv">
    <!-- voronoi goes here... -->
</div>

<input type="button" value="add random point" onclick="addRandomPoint();" />

JavaScript

var data;
var voronoi;

function isIE() {
    return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
}

function setUp() {
    var numPoints = 100;
    var tooltipStrings = [];
    data = new google.visualization.DataTable();

    data.addColumn('number', 'Age');
    data.addColumn('number', 'Weight');
    data.addRows(numPoints);

    for (var i = 0; i < numPoints; i++) {
        var randomX = Math.floor(Math.random() * (numPoints + 1));
        var randomY = Math.floor(Math.random() * (numPoints + 1));

        data.setValue(i, 0, randomX);
        data.setValue(i, 1, randomY);

        tooltipStrings[i] = "x = " + randomX + ", y = " + randomY;
    }

    voronoi = new greg.ross.visualisation.Voronoi(document.getElementById("voronoiDiv"));

    // Don't fill polygons in IE. It's too slow.
    var fillPly = !isIE();

    var colours = ['#A7D30C', '#019F62', 'rgba(1,159,98,0)'];
    voronoi.draw(data, {
        xPos: 50,
        yPos: 0,
        width: 400,
        height: 400,
        colourGradient: colours,
        fillPolygons: fillPly,
        tooltips: tooltipStrings
    });
}

function addRandomPoint() {
    var numPoints = data.getNumberOfRows() + 1;
    var p = new greg.ross.visualisation.Vertex(Math.random() * (numPoints + 1), Math.random() * (numPoints + 1), 1);

    voronoi.addNewPoint(p);
}

google.load("visualization", "1");
google.setOnLoadCallback(setUp);