React Voronoi

voronoi.js

import * as React from "react"
import { voronoi } from "@vx/voronoi"

class Voronoi extends React.Component {
  tile = null

  componentDidMount() {
    this.renderPoints()
  }

  renderPoints = () => {
    if (!this.tile) return
    const { data, yScale, xScale } = this.props
    const context = this.tile.getContext("2d")
    const voronoiDiagram = voronoi({
      x: d => xScale(d.x),
      y: d => yScale(d.y),
      width: this.tile.width,
      height: this.tile.height
    })(data)
    const polygons = voronoiDiagram.polygons()
    const constructPath = polygon => `M${polygon.join("L")}Z`
    context.strokeStyle = "#2cdea3"
    context.strokeWidth = 2
    polygons.forEach(polygon => {
      const p = new Path2D(constructPath(polygon))
      context.stroke(p)
      context.fillStyle = "rgba(0, 157, 105, 0.3)"
      context.fill(p)
    })
  }

  render() {
    const { width, height } = this.props
    return (
      <canvas ref={ref => (this.tile = ref)} width={width} height={height} />
    )
  }
}

export default Voronoi