block by 1wheel 6cd8f2c2be0bd0bde0818fc8c0fb895a

delaunay-triangulation

Full Screen

An interactive demonstration of d3-voronoi, showing the Delaunay triangulation.

forked from http://bl.ocks.org/mbostock/4341156

script.js

console.clear()

var ƒ = d3.f
var width = innerWidth
var height = innerHeight

var idToActual = {}
function hId(hEdge){
  if (!hEdge.iFace) return null

  var id = hEdge.iFace.id
  var wrongIds = []
  while (id != idToActual[id]){
    wrongIds.push(id)
    id = idToActual[id]
  }

  wrongIds.forEach(d => idToActual[d] = id)
  
  return idToActual[hEdge.iFace.id] = id
}

var container = d3.select("body").html('').append('div')
var svg = container.append('svg').at({width, height})
var tt = d3.select('body').selectAppend('div.tooltip')

var sites = window.sites || d3.range(100)
var sites = d3.range(200)
    .map(function(d){
      var rv = [Math.random() * width, Math.random() * height]
      rv.black = Math.random() < .5
      return rv;
    })

sites.forEach((d, i) => d.black = i % 2)

var polygons = d3.voronoi(sites)
  .extent([[-1, -1], [width + 1, height + 1]])
  .polygons(sites).filter(d => d)

var hEdges;
if (window.interval) interval.stop()
var interval = d3.interval(d => {
  // interval.stop()
  hEdges   = polygonsToEdges(polygons)
  polygons = edgesToPolygons(hEdges)
  console.log(hEdges.length, polygons.length)
}, 2000)
interval._call()


function polygonsToEdges(polygons){
  svg.selectAll('path')
    .transition().duration(1500)
    .remove()

  var polySel = svg.appendMany(leftSort(polygons), 'path.area')
    .at({
      d: d => 'M' + d.filter(ƒ()).join('L') + 'Z', 
      fill: d => d.data.black ? '#fff' : '#000',
      stroke: d => d.data.black ? '#fff' : '#000',
      opacity: 0
    })
    .transition().delay((d, i) => i/polygons.length*1000).duration(300)
    .at({opacity: 1})

  var hEdges = []
  var coord2hEdge = {}

  idToActual = {}
  polygons.forEach(function(poly, i){
    poly.data.id = d3.format('02')(i)
    idToActual[poly.data.id] = poly.data.id
    poly.ogID = poly.data.id
    poly.data.ogID = poly.data.id

    poly.data.removed = false
    poly.data.hEdges = poly.map(function(d, i){
      return {
        iFace: poly.data,
        origin: d
      }
    })

    poly.data.hEdges.forEach((d, i) => {
      d.next = poly.data.hEdges[mod(i + 1, poly.data.hEdges.length)]
      d.prev = poly.data.hEdges[mod(i - 1, poly.data.hEdges.length)]

      hEdges.push(d)
      coord2hEdge[d.origin + d.next.origin] = d
    })
  })

  hEdges.forEach(function(d, i){
    d.twin = coord2hEdge[d.next.origin + d.origin] || {}
    d.hIdStr = d3.format('03')(i)
    if (d.twin == d.next) throw 'up'
  })

  // remove edges between polygons of the same color
  hEdges.forEach(e => {
    if (!(e.iFace && e.twin && e.twin.iFace && e.iFace.black == e.twin.iFace.black)) return
    if (e.removed) return

    e.twin.iFace.removed = true

    var eId = hId(e)
    var start = next = knitEdge(e)

    knitEdge(e.twin)

    function knitEdge(e){
      var twinId = hId(e.twin)
      e.removed = e.twin.removed = true

      while (twinId == hId(e.next.twin)) {
        e = e.next
        e.removed = e.twin.removed = true
      }
      e.next.prev = e.twin.prev
      e.next.prev.next = e.next

      return e.next
    }

    var prev = {}

    var i = 0
    do {
      idToActual[hId(next)] = eId
      prev = next
      next = next.next
    } while (next != start && i++ < 198)
    if (i == 197) throw 'up'
  })

  hEdges.filter(d => !d.removed).forEach(d => d.faceID = hId(d))

  return hEdges.filter(d => !d.removed)
}



function edgesToPolygons(hEdges){
  hEdges.forEach(d => d.ringAdded = false)
  var byFace = d3.nestBy(hEdges, ƒ('faceID'))
  var allTriangles = []
  _.sortBy(byFace, d => d3.min(d, d => d.origin[0])).forEach((face, faceI) => {
    window.face = face
    facePolygons = []
    face.forEach(d => d.ringAdded = false)
    face.forEach(d => {
      if (d.ringAdded == true) return

      var points = []
      var start = next = d
      do {
        if (points.length > 1000) throw 'up origin'
        next.ringAdded = true
        var isXline = next.prev.origin[0] == next.origin[0] && 
                      next.origin[0] == next.next.origin[0]
        var isYline = next.prev.origin[1] == next.origin[1] && 
                      next.origin[1] == next.next.origin[1]
        if (!isXline && !isYline) points.push(next.origin)
        next = next.next
      } while (next != start && points.length < 900)

      points.isOuter = d3.polygonArea(points) > 0
      facePolygons.push(points)
    })

    var points = facePolygons.filter(d => d.isOuter)[0]

    if (!points){
      svg.appendMany(face, 'path').at({
        d: d => 'M' + d.origin  + 'L' + d.next.origin,
        stroke: 'pink',
        strokeWidth: 1
      })
      console.log(face)

      return
      throw 'up'
    }
    var holes = facePolygons.filter(d => !d.isOuter).map(d => {
      var n = points.length
      points = points.concat(d)
      return n
    })

    var earout = earcut(_.flatten(points), holes)
    var triangles = []
    earout.forEach((d, i) => {
      if (i % 3) return
      triangles.push([
        points[d], 
        points[earout[i + 2]],
        points[earout[i + 1]] 
      ])
    })

    var isBlack = face[0].iFace.black
    svg.appendMany(leftSort(triangles), 'path')
      .at({
        d: d => 'M' + d.join('L') + 'Z',
        stroke: isBlack ? '#000' : '#fff',
        stroke: '#ccc',
        fill: 'none',
        opacity: 0
      })
      .transition().duration(300).delay((d, i) => 1000 + faceI/byFace.length*1000)
      .at({opacity: 1})

    triangles.forEach(d => d.data = {black: isBlack})
    allTriangles = allTriangles.concat(triangles)
  })

  var updatedTriangles = _.shuffle(allTriangles)
    .filter((d, i) => i <= Math.ceil(.1*allTriangles.length))
  updatedTriangles.forEach(d => d.data.black = !d.data.black)

  svg.appendMany(leftSort(updatedTriangles), 'path')
    .at({
      d: d => 'M' + d.join('L') + 'Z',
      fill: d => d.data.black ? '#fff' : '#000',
      stroke: 'none',
      opacity: 0
    })
    .transition('add').delay((d, i) => 2000 + i/updatedTriangles.length*1000)
    .at({opacity: 1})

  return allTriangles
  
}

function mod(n, m){
  return ((n % m) + m) % m
}

function leftSort(array){
  return _.sortBy(array, d => d3.min(d, ƒ(0)))
}

index.html

<!DOCTYPE html>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="style.css">

<body></body>

<script src='d3v4.js'></script>
<script src='earcut.js'></script>
<script src='lodash.js'></script>
<script src='sites.js'></script>
<script src='script.js'></script>

earcut.js

'use strict';

function earcut(data, holeIndices, dim) {

    dim = dim || 2;

    var hasHoles = holeIndices && holeIndices.length,
        outerLen = hasHoles ? holeIndices[0] * dim : data.length,
        outerNode = linkedList(data, 0, outerLen, dim, true),
        triangles = [];

    if (!outerNode) return triangles;

    var minX, minY, maxX, maxY, x, y, size;

    if (hasHoles) outerNode = eliminateHoles(data, holeIndices, outerNode, dim);

    // if the shape is not too simple, we'll use z-order curve hash later; calculate polygon bbox
    if (data.length > 80 * dim) {
        minX = maxX = data[0];
        minY = maxY = data[1];

        for (var i = dim; i < outerLen; i += dim) {
            x = data[i];
            y = data[i + 1];
            if (x < minX) minX = x;
            if (y < minY) minY = y;
            if (x > maxX) maxX = x;
            if (y > maxY) maxY = y;
        }

        // minX, minY and size are later used to transform coords into integers for z-order calculation
        size = Math.max(maxX - minX, maxY - minY);
    }

    earcutLinked(outerNode, triangles, dim, minX, minY, size);

    return triangles;
}

// create a circular doubly linked list from polygon points in the specified winding order
function linkedList(data, start, end, dim, clockwise) {
    var i, last;

    if (clockwise === (signedArea(data, start, end, dim) > 0)) {
        for (i = start; i < end; i += dim) last = insertNode(i, data[i], data[i + 1], last);
    } else {
        for (i = end - dim; i >= start; i -= dim) last = insertNode(i, data[i], data[i + 1], last);
    }

    if (last && equals(last, last.next)) {
        removeNode(last);
        last = last.next;
    }

    return last;
}

// eliminate colinear or duplicate points
function filterPoints(start, end) {
    if (!start) return start;
    if (!end) end = start;

    var p = start,
        again;
    do {
        again = false;

        if (!p.steiner && (equals(p, p.next) || area(p.prev, p, p.next) === 0)) {
            removeNode(p);
            p = end = p.prev;
            if (p === p.next) return null;
            again = true;

        } else {
            p = p.next;
        }
    } while (again || p !== end);

    return end;
}

// main ear slicing loop which triangulates a polygon (given as a linked list)
function earcutLinked(ear, triangles, dim, minX, minY, size, pass) {
    if (!ear) return;

    // interlink polygon nodes in z-order
    if (!pass && size) indexCurve(ear, minX, minY, size);

    var stop = ear,
        prev, next;

    // iterate through ears, slicing them one by one
    while (ear.prev !== ear.next) {
        prev = ear.prev;
        next = ear.next;

        if (size ? isEarHashed(ear, minX, minY, size) : isEar(ear)) {
            // cut off the triangle
            triangles.push(prev.i / dim);
            triangles.push(ear.i / dim);
            triangles.push(next.i / dim);

            removeNode(ear);

            // skipping the next vertice leads to less sliver triangles
            ear = next.next;
            stop = next.next;

            continue;
        }

        ear = next;

        // if we looped through the whole remaining polygon and can't find any more ears
        if (ear === stop) {
            // try filtering points and slicing again
            if (!pass) {
                earcutLinked(filterPoints(ear), triangles, dim, minX, minY, size, 1);

            // if this didn't work, try curing all small self-intersections locally
            } else if (pass === 1) {
                ear = cureLocalIntersections(ear, triangles, dim);
                earcutLinked(ear, triangles, dim, minX, minY, size, 2);

            // as a last resort, try splitting the remaining polygon into two
            } else if (pass === 2) {
                splitEarcut(ear, triangles, dim, minX, minY, size);
            }

            break;
        }
    }
}

// check whether a polygon node forms a valid ear with adjacent nodes
function isEar(ear) {
    var a = ear.prev,
        b = ear,
        c = ear.next;

    if (area(a, b, c) >= 0) return false; // reflex, can't be an ear

    // now make sure we don't have other points inside the potential ear
    var p = ear.next.next;

    while (p !== ear.prev) {
        if (pointInTriangle(a.x, a.y, b.x, b.y, c.x, c.y, p.x, p.y) &&
            area(p.prev, p, p.next) >= 0) return false;
        p = p.next;
    }

    return true;
}

function isEarHashed(ear, minX, minY, size) {
    var a = ear.prev,
        b = ear,
        c = ear.next;

    if (area(a, b, c) >= 0) return false; // reflex, can't be an ear

    // triangle bbox; min & max are calculated like this for speed
    var minTX = a.x < b.x ? (a.x < c.x ? a.x : c.x) : (b.x < c.x ? b.x : c.x),
        minTY = a.y < b.y ? (a.y < c.y ? a.y : c.y) : (b.y < c.y ? b.y : c.y),
        maxTX = a.x > b.x ? (a.x > c.x ? a.x : c.x) : (b.x > c.x ? b.x : c.x),
        maxTY = a.y > b.y ? (a.y > c.y ? a.y : c.y) : (b.y > c.y ? b.y : c.y);

    // z-order range for the current triangle bbox;
    var minZ = zOrder(minTX, minTY, minX, minY, size),
        maxZ = zOrder(maxTX, maxTY, minX, minY, size);

    // first look for points inside the triangle in increasing z-order
    var p = ear.nextZ;

    while (p && p.z <= maxZ) {
        if (p !== ear.prev && p !== ear.next &&
            pointInTriangle(a.x, a.y, b.x, b.y, c.x, c.y, p.x, p.y) &&
            area(p.prev, p, p.next) >= 0) return false;
        p = p.nextZ;
    }

    // then look for points in decreasing z-order
    p = ear.prevZ;

    while (p && p.z >= minZ) {
        if (p !== ear.prev && p !== ear.next &&
            pointInTriangle(a.x, a.y, b.x, b.y, c.x, c.y, p.x, p.y) &&
            area(p.prev, p, p.next) >= 0) return false;
        p = p.prevZ;
    }

    return true;
}

// go through all polygon nodes and cure small local self-intersections
function cureLocalIntersections(start, triangles, dim) {
    var p = start;
    do {
        var a = p.prev,
            b = p.next.next;

        if (!equals(a, b) && intersects(a, p, p.next, b) && locallyInside(a, b) && locallyInside(b, a)) {

            triangles.push(a.i / dim);
            triangles.push(p.i / dim);
            triangles.push(b.i / dim);

            // remove two nodes involved
            removeNode(p);
            removeNode(p.next);

            p = start = b;
        }
        p = p.next;
    } while (p !== start);

    return p;
}

// try splitting polygon into two and triangulate them independently
function splitEarcut(start, triangles, dim, minX, minY, size) {
    // look for a valid diagonal that divides the polygon into two
    var a = start;
    do {
        var b = a.next.next;
        while (b !== a.prev) {
            if (a.i !== b.i && isValidDiagonal(a, b)) {
                // split the polygon in two by the diagonal
                var c = splitPolygon(a, b);

                // filter colinear points around the cuts
                a = filterPoints(a, a.next);
                c = filterPoints(c, c.next);

                // run earcut on each half
                earcutLinked(a, triangles, dim, minX, minY, size);
                earcutLinked(c, triangles, dim, minX, minY, size);
                return;
            }
            b = b.next;
        }
        a = a.next;
    } while (a !== start);
}

// link every hole into the outer loop, producing a single-ring polygon without holes
function eliminateHoles(data, holeIndices, outerNode, dim) {
    var queue = [],
        i, len, start, end, list;

    for (i = 0, len = holeIndices.length; i < len; i++) {
        start = holeIndices[i] * dim;
        end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
        list = linkedList(data, start, end, dim, false);
        if (list === list.next) list.steiner = true;
        queue.push(getLeftmost(list));
    }

    queue.sort(compareX);

    // process holes from left to right
    for (i = 0; i < queue.length; i++) {
        eliminateHole(queue[i], outerNode);
        outerNode = filterPoints(outerNode, outerNode.next);
    }

    return outerNode;
}

function compareX(a, b) {
    return a.x - b.x;
}

// find a bridge between vertices that connects hole with an outer ring and and link it
function eliminateHole(hole, outerNode) {
    outerNode = findHoleBridge(hole, outerNode);
    if (outerNode) {
        var b = splitPolygon(outerNode, hole);
        filterPoints(b, b.next);
    }
}

// David Eberly's algorithm for finding a bridge between hole and outer polygon
function findHoleBridge(hole, outerNode) {
    var p = outerNode,
        hx = hole.x,
        hy = hole.y,
        qx = -Infinity,
        m;

    // find a segment intersected by a ray from the hole's leftmost point to the left;
    // segment's endpoint with lesser x will be potential connection point
    do {
        if (hy <= p.y && hy >= p.next.y && p.next.y !== p.y) {
            var x = p.x + (hy - p.y) * (p.next.x - p.x) / (p.next.y - p.y);
            if (x <= hx && x > qx) {
                qx = x;
                if (x === hx) {
                    if (hy === p.y) return p;
                    if (hy === p.next.y) return p.next;
                }
                m = p.x < p.next.x ? p : p.next;
            }
        }
        p = p.next;
    } while (p !== outerNode);

    if (!m) return null;

    if (hx === qx) return m.prev; // hole touches outer segment; pick lower endpoint

    // look for points inside the triangle of hole point, segment intersection and endpoint;
    // if there are no points found, we have a valid connection;
    // otherwise choose the point of the minimum angle with the ray as connection point

    var stop = m,
        mx = m.x,
        my = m.y,
        tanMin = Infinity,
        tan;

    p = m.next;

    while (p !== stop) {
        if (hx >= p.x && p.x >= mx && hx !== p.x &&
                pointInTriangle(hy < my ? hx : qx, hy, mx, my, hy < my ? qx : hx, hy, p.x, p.y)) {

            tan = Math.abs(hy - p.y) / (hx - p.x); // tangential

            if ((tan < tanMin || (tan === tanMin && p.x > m.x)) && locallyInside(p, hole)) {
                m = p;
                tanMin = tan;
            }
        }

        p = p.next;
    }

    return m;
}

// interlink polygon nodes in z-order
function indexCurve(start, minX, minY, size) {
    var p = start;
    do {
        if (p.z === null) p.z = zOrder(p.x, p.y, minX, minY, size);
        p.prevZ = p.prev;
        p.nextZ = p.next;
        p = p.next;
    } while (p !== start);

    p.prevZ.nextZ = null;
    p.prevZ = null;

    sortLinked(p);
}

// Simon Tatham's linked list merge sort algorithm
// http://www.chiark.greenend.org.uk/~sgtatham/algorithms/listsort.html
function sortLinked(list) {
    var i, p, q, e, tail, numMerges, pSize, qSize,
        inSize = 1;

    do {
        p = list;
        list = null;
        tail = null;
        numMerges = 0;

        while (p) {
            numMerges++;
            q = p;
            pSize = 0;
            for (i = 0; i < inSize; i++) {
                pSize++;
                q = q.nextZ;
                if (!q) break;
            }
            qSize = inSize;

            while (pSize > 0 || (qSize > 0 && q)) {

                if (pSize !== 0 && (qSize === 0 || !q || p.z <= q.z)) {
                    e = p;
                    p = p.nextZ;
                    pSize--;
                } else {
                    e = q;
                    q = q.nextZ;
                    qSize--;
                }

                if (tail) tail.nextZ = e;
                else list = e;

                e.prevZ = tail;
                tail = e;
            }

            p = q;
        }

        tail.nextZ = null;
        inSize *= 2;

    } while (numMerges > 1);

    return list;
}

// z-order of a point given coords and size of the data bounding box
function zOrder(x, y, minX, minY, size) {
    // coords are transformed into non-negative 15-bit integer range
    x = 32767 * (x - minX) / size;
    y = 32767 * (y - minY) / size;

    x = (x | (x << 8)) & 0x00FF00FF;
    x = (x | (x << 4)) & 0x0F0F0F0F;
    x = (x | (x << 2)) & 0x33333333;
    x = (x | (x << 1)) & 0x55555555;

    y = (y | (y << 8)) & 0x00FF00FF;
    y = (y | (y << 4)) & 0x0F0F0F0F;
    y = (y | (y << 2)) & 0x33333333;
    y = (y | (y << 1)) & 0x55555555;

    return x | (y << 1);
}

// find the leftmost node of a polygon ring
function getLeftmost(start) {
    var p = start,
        leftmost = start;
    do {
        if (p.x < leftmost.x) leftmost = p;
        p = p.next;
    } while (p !== start);

    return leftmost;
}

// check if a point lies within a convex triangle
function pointInTriangle(ax, ay, bx, by, cx, cy, px, py) {
    return (cx - px) * (ay - py) - (ax - px) * (cy - py) >= 0 &&
           (ax - px) * (by - py) - (bx - px) * (ay - py) >= 0 &&
           (bx - px) * (cy - py) - (cx - px) * (by - py) >= 0;
}

// check if a diagonal between two polygon nodes is valid (lies in polygon interior)
function isValidDiagonal(a, b) {
    return a.next.i !== b.i && a.prev.i !== b.i && !intersectsPolygon(a, b) &&
           locallyInside(a, b) && locallyInside(b, a) && middleInside(a, b);
}

// signed area of a triangle
function area(p, q, r) {
    return (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y);
}

// check if two points are equal
function equals(p1, p2) {
    return p1.x === p2.x && p1.y === p2.y;
}

// check if two segments intersect
function intersects(p1, q1, p2, q2) {
    if ((equals(p1, q1) && equals(p2, q2)) ||
        (equals(p1, q2) && equals(p2, q1))) return true;
    return area(p1, q1, p2) > 0 !== area(p1, q1, q2) > 0 &&
           area(p2, q2, p1) > 0 !== area(p2, q2, q1) > 0;
}

// check if a polygon diagonal intersects any polygon segments
function intersectsPolygon(a, b) {
    var p = a;
    do {
        if (p.i !== a.i && p.next.i !== a.i && p.i !== b.i && p.next.i !== b.i &&
                intersects(p, p.next, a, b)) return true;
        p = p.next;
    } while (p !== a);

    return false;
}

// check if a polygon diagonal is locally inside the polygon
function locallyInside(a, b) {
    return area(a.prev, a, a.next) < 0 ?
        area(a, b, a.next) >= 0 && area(a, a.prev, b) >= 0 :
        area(a, b, a.prev) < 0 || area(a, a.next, b) < 0;
}

// check if the middle point of a polygon diagonal is inside the polygon
function middleInside(a, b) {
    var p = a,
        inside = false,
        px = (a.x + b.x) / 2,
        py = (a.y + b.y) / 2;
    do {
        if (((p.y > py) !== (p.next.y > py)) && p.next.y !== p.y &&
                (px < (p.next.x - p.x) * (py - p.y) / (p.next.y - p.y) + p.x))
            inside = !inside;
        p = p.next;
    } while (p !== a);

    return inside;
}

// link two polygon vertices with a bridge; if the vertices belong to the same ring, it splits polygon into two;
// if one belongs to the outer ring and another to a hole, it merges it into a single ring
function splitPolygon(a, b) {
    var a2 = new Node(a.i, a.x, a.y),
        b2 = new Node(b.i, b.x, b.y),
        an = a.next,
        bp = b.prev;

    a.next = b;
    b.prev = a;

    a2.next = an;
    an.prev = a2;

    b2.next = a2;
    a2.prev = b2;

    bp.next = b2;
    b2.prev = bp;

    return b2;
}

// create a node and optionally link it with previous one (in a circular doubly linked list)
function insertNode(i, x, y, last) {
    var p = new Node(i, x, y);

    if (!last) {
        p.prev = p;
        p.next = p;

    } else {
        p.next = last.next;
        p.prev = last;
        last.next.prev = p;
        last.next = p;
    }
    return p;
}

function removeNode(p) {
    p.next.prev = p.prev;
    p.prev.next = p.next;

    if (p.prevZ) p.prevZ.nextZ = p.nextZ;
    if (p.nextZ) p.nextZ.prevZ = p.prevZ;
}

function Node(i, x, y) {
    // vertice index in coordinates array
    this.i = i;

    // vertex coordinates
    this.x = x;
    this.y = y;

    // previous and next vertice nodes in a polygon ring
    this.prev = null;
    this.next = null;

    // z-order curve value
    this.z = null;

    // previous and next nodes in z-order
    this.prevZ = null;
    this.nextZ = null;

    // indicates whether this is a steiner point
    this.steiner = false;
}

// return a percentage difference between the polygon area and its triangulation area;
// used to verify correctness of triangulation
earcut.deviation = function (data, holeIndices, dim, triangles) {
    var hasHoles = holeIndices && holeIndices.length;
    var outerLen = hasHoles ? holeIndices[0] * dim : data.length;

    var polygonArea = Math.abs(signedArea(data, 0, outerLen, dim));
    if (hasHoles) {
        for (var i = 0, len = holeIndices.length; i < len; i++) {
            var start = holeIndices[i] * dim;
            var end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
            polygonArea -= Math.abs(signedArea(data, start, end, dim));
        }
    }

    var trianglesArea = 0;
    for (i = 0; i < triangles.length; i += 3) {
        var a = triangles[i] * dim;
        var b = triangles[i + 1] * dim;
        var c = triangles[i + 2] * dim;
        trianglesArea += Math.abs(
            (data[a] - data[c]) * (data[b + 1] - data[a + 1]) -
            (data[a] - data[b]) * (data[c + 1] - data[a + 1]));
    }

    return polygonArea === 0 && trianglesArea === 0 ? 0 :
        Math.abs((trianglesArea - polygonArea) / polygonArea);
};

function signedArea(data, start, end, dim) {
    var sum = 0;
    for (var i = start, j = end - dim; i < end; i += dim) {
        sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]);
        j = i;
    }
    return sum;
}

// turn a polygon in a multi-dimensional array form (e.g. as in GeoJSON) into a form Earcut accepts
earcut.flatten = function (data) {
    var dim = data[0][0].length,
        result = {vertices: [], holes: [], dimensions: dim},
        holeIndex = 0;

    for (var i = 0; i < data.length; i++) {
        for (var j = 0; j < data[i].length; j++) {
            for (var d = 0; d < dim; d++) result.vertices.push(data[i][j][d]);
        }
        if (i > 0) {
            holeIndex += data[i - 1].length;
            result.holes.push(holeIndex);
        }
    }
    return result;
};

sites.js

sites = [
  [
    941.3317294067585,
    448.65618519100684
  ],
  [
    892.9839458395072,
    375.76838652010935
  ],
  [
    307.8286501433181,
    99.66788502514491
  ],
  [
    177.9922170798418,
    115.1764603888804
  ],
  [
    664.1342603621536,
    164.0542630567064
  ],
  [
    488.2523655353732,
    431.56963060082956
  ],
  [
    487.0503317276259,
    108.66735673856981
  ],
  [
    338.09525515932796,
    337.79137385966857
  ],
  [
    734.0531905376492,
    197.22452779457677
  ],
  [
    234.17114291278244,
    484.45519559525695
  ],
  [
    487.0842595108072,
    503.60918079936545
  ],
  [
    651.3210882758128,
    97.53190008363228
  ],
  [
    445.4608745242497,
    431.62642080510574
  ],
  [
    566.7260197096869,
    252.99950199109884
  ],
  [
    889.0461071106849,
    53.16986238000492
  ],
  [
    909.9273267035478,
    139.79079457624417
  ],
  [
    156.63273891168524,
    323.1815666321404
  ],
  [
    150.7503343644512,
    190.40781139186612
  ],
  [
    693.346742820833,
    270.32196363483655
  ],
  [
    1012.6227470098659,
    52.59882290480766
  ],
  [
    687.2115735643617,
    346.2609811115195
  ],
  [
    72.5315714223741,
    395.8256733328166
  ],
  [
    68.37777441113622,
    121.08445070651783
  ],
  [
    926.0427754625282,
    34.82372928619337
  ],
  [
    36.05165284085524,
    112.75099782964239
  ],
  [
    173.31840143536147,
    448.81279129118946
  ],
  [
    109.75867440290222,
    70.03846100097104
  ],
  [
    992.6764020718019,
    323.58725399034546
  ],
  [
    959.9768431111268,
    414.4411455033663
  ],
  [
    541.8794995421401,
    109.61352516122018
  ],
  [
    318.42297146161854,
    478.48537898128063
  ],
  [
    389.93693796499565,
    9.448467411509732
  ],
  [
    876.3947543898953,
    418.51116348021986
  ],
  [
    698.4228866984272,
    431.3350315158431
  ],
  [
    128.52726346505506,
    86.9851640707379
  ],
  [
    462.6844910063146,
    209.32904911074084
  ],
  [
    260.84291900193216,
    374.8475610899719
  ],
  [
    337.55512631393617,
    271.69226340648083
  ],
  [
    376.08566986213305,
    93.10276181055728
  ],
  [
    11.923358567513105,
    125.48188941427337
  ],
  [
    505.0908664244728,
    389.4536585348439
  ],
  [
    916.9407781892289,
    28.596472581065
  ],
  [
    667.5162817083803,
    408.6313745374122
  ],
  [
    165.91917972617262,
    68.12552212888059
  ],
  [
    856.55237510852,
    496.4014854814145
  ],
  [
    359.81386435269224,
    359.94626622738747
  ],
  [
    336.5568647620303,
    264.78395554186903
  ],
  [
    59.479577016560825,
    104.42271150066698
  ],
  [
    966.7836896224348,
    91.50648730035587
  ],
  [
    34.44152338994468,
    81.22991713158545
  ],
  [
    542.2064466964948,
    367.11836221350194
  ],
  [
    350.0766523458076,
    371.1254717278775
  ],
  [
    1014.6225577747564,
    454.20204887770007
  ],
  [
    144.48163857598252,
    212.90239228805973
  ],
  [
    656.0641611546782,
    120.08035819457545
  ],
  [
    566.5149244801476,
    5.116291113951407
  ],
  [
    775.3051404657558,
    348.9773566977467
  ],
  [
    990.6126731897846,
    174.4534981268976
  ],
  [
    28.888469371344172,
    66.36079132971135
  ],
  [
    137.727492989884,
    152.00822079388777
  ],
  [
    39.84349651302887,
    14.543426768364732
  ],
  [
    278.47512719878273,
    235.87962573422985
  ],
  [
    133.83990636178874,
    367.30341607987015
  ],
  [
    706.9222475356516,
    15.609070426231604
  ],
  [
    944.8544992534055,
    147.8512498932624
  ],
  [
    974.7776027982577,
    481.8367671636848
  ],
  [
    302.86021875184997,
    231.9534894583926
  ],
  [
    932.7701965381209,
    464.0597000901326
  ],
  [
    291.7313323422213,
    212.6863841836995
  ],
  [
    453.5836645370937,
    251.91725135774314
  ],
  [
    592.5274516657646,
    62.561824614022825
  ],
  [
    94.7214951403007,
    485.10215952533133
  ],
  [
    711.8824184206333,
    4.4973798608465465
  ],
  [
    858.1881033597485,
    44.28421599249002
  ],
  [
    836.1147954871426,
    239.09104487084457
  ],
  [
    910.4538572761392,
    463.80832977560925
  ],
  [
    924.366755855661,
    110.5571932746813
  ],
  [
    246.41661523228368,
    134.98167908718125
  ],
  [
    98.43213442507431,
    266.762143480432
  ],
  [
    746.0155076903845,
    69.90904921143597
  ],
  [
    1011.4352135720881,
    410.08040789323996
  ],
  [
    869.0294258162953,
    182.94919972847416
  ],
  [
    889.0434734586934,
    4.226157478805497
  ],
  [
    702.7623228056664,
    199.46295227240853
  ],
  [
    261.83525883117454,
    503.2088289937282
  ],
  [
    74.30733347641262,
    451.4970000464625
  ],
  [
    432.1796942189826,
    348.78040511176533
  ],
  [
    608.6852918388213,
    268.8652550151467
  ],
  [
    764.9437463268875,
    20.594485950355423
  ],
  [
    273.0211119709352,
    101.3557059948397
  ],
  [
    678.0555408583327,
    491.50493101634714
  ],
  [
    855.8336238058987,
    24.154013144676842
  ],
  [
    90.02469397170876,
    382.9383625982612
  ],
  [
    701.998629078834,
    312.06573350562803
  ],
  [
    1011.9609193583133,
    251.45697513309577
  ],
  [
    645.2565611823034,
    143.00817731650386
  ],
  [
    901.8876336233193,
    189.6861240451936
  ],
  [
    778.4896032807226,
    260.7393169208636
  ],
  [
    554.9504300086144,
    464.57708527076284
  ],
  [
    429.9206737739155,
    500.82229253868417
  ]
]

style.css

body{
  margin: 0px;
  overflow: hidden;
}


.tooltip {
  top: -1000px;
  position: absolute;
  padding: 10px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid lightgray;
  pointer-events: none;
}
.tooltip-hidden{
  opacity: 0;
  transition: all .3s;
  transition-delay: .1s;
}

@media (max-width: 590px){
  div.tooltip{
    position: fixed;
    bottom: -1px;
    width: calc(100%);
    left: -1px !important;
    right: -1px !important;
    top: auto !important;
    width: auto !important;
  }
}