How to use @nivo/voronoi - 10 common examples

ctx.beginPath()
                    ctx.arc(point.x, point.y, pointSize / 2, 0, 2 * Math.PI)
                    ctx.fill()

                    if (pointBorderWidth > 0) {
                        ctx.strokeStyle = point.borderColor
                        ctx.lineWidth = pointBorderWidth
                        ctx.stroke()
                    }
                })
            }

            if (layer === 'mesh' && debugMesh === true) {
                renderVoronoiToCanvas(ctx, voronoi)
                if (currentPoint) {
                    renderVoronoiCellToCanvas(ctx, voronoi, currentPoint.index)
                }
            }

            if (layer === 'legends') {
                const legendData = series
                    .map(serie => ({
                        id: serie.id,
                        label: serie.id,
                        color: serie.color,
                    }))
                    .reverse()

                legends.forEach(legend => {
                    renderLegendToCanvas(ctx, {
                        ...legend,
                        data: legend.data || legendData,

}

                if (layer === 'nodes') {
                    nodes.forEach(node => {
                        renderNode(ctx, {
                            node,
                            getBorderWidth,
                            getBorderColor,
                        })
                    })
                }

                if (layer === 'mesh' && debugMesh === true) {
                    renderVoronoiToCanvas(ctx, voronoi)
                    if (currentNode) {
                        renderVoronoiCellToCanvas(ctx, voronoi, currentNode.index)
                    }
                }

                if (layer === 'annotations') {
                    renderAnnotationsToCanvas(ctx, {
                        annotations: computedAnnotations,
                        theme,
                    })
                }

                if (typeof layer === 'function') {
                    layer(ctx, {
                        nodes,
                        innerWidth,
                        innerHeight,
                        outerWidth,

height: innerHeight,
                    top: axisTop,
                    right: axisRight,
                    bottom: axisBottom,
                    left: axisLeft,
                    theme,
                })
            } else if (layer === 'nodes') {
                nodes.forEach(node => {
                    renderNode(ctx, node)
                })
            } else if (layer === 'mesh') {
                if (debugMesh === true) {
                    renderVoronoiToCanvas(ctx, voronoi)
                    if (currentNode) {
                        renderVoronoiCellToCanvas(ctx, voronoi, currentNode.index)
                    }
                }
            } else if (layer === 'legends') {
                legends.forEach(legend => {
                    renderLegendToCanvas(ctx, {
                        ...legend,
                        data: legendData,
                        containerWidth: innerWidth,
                        containerHeight: innerHeight,
                        theme,
                    })
                })
            } else if (typeof layer === 'function') {
                layer(ctx, customLayerProps)
            } else {
                throw new Error(`Invalid layer: ${layer}`)

points.forEach(point => {
                    ctx.fillStyle = point.color
                    ctx.beginPath()
                    ctx.arc(point.x, point.y, pointSize / 2, 0, 2 * Math.PI)
                    ctx.fill()

                    if (pointBorderWidth > 0) {
                        ctx.strokeStyle = point.borderColor
                        ctx.lineWidth = pointBorderWidth
                        ctx.stroke()
                    }
                })
            }

            if (layer === 'mesh' && debugMesh === true) {
                renderVoronoiToCanvas(ctx, voronoi)
                if (currentPoint) {
                    renderVoronoiCellToCanvas(ctx, voronoi, currentPoint.index)
                }
            }

            if (layer === 'legends') {
                const legendData = series
                    .map(serie => ({
                        id: serie.id,
                        label: serie.id,
                        color: serie.color,
                    }))
                    .reverse()

                legends.forEach(legend => {
                    renderLegendToCanvas(ctx, {

theme,
                    })
                }

                if (layer === 'nodes') {
                    nodes.forEach(node => {
                        renderNode(ctx, {
                            node,
                            getBorderWidth,
                            getBorderColor,
                        })
                    })
                }

                if (layer === 'mesh' && debugMesh === true) {
                    renderVoronoiToCanvas(ctx, voronoi)
                    if (currentNode) {
                        renderVoronoiCellToCanvas(ctx, voronoi, currentNode.index)
                    }
                }

                if (layer === 'annotations') {
                    renderAnnotationsToCanvas(ctx, {
                        annotations: computedAnnotations,
                        theme,
                    })
                }

                if (typeof layer === 'function') {
                    layer(ctx, {
                        nodes,
                        innerWidth,

yScale,
                    width: innerWidth,
                    height: innerHeight,
                    top: axisTop,
                    right: axisRight,
                    bottom: axisBottom,
                    left: axisLeft,
                    theme,
                })
            } else if (layer === 'nodes') {
                nodes.forEach(node => {
                    renderNode(ctx, node)
                })
            } else if (layer === 'mesh') {
                if (debugMesh === true) {
                    renderVoronoiToCanvas(ctx, voronoi)
                    if (currentNode) {
                        renderVoronoiCellToCanvas(ctx, voronoi, currentNode.index)
                    }
                }
            } else if (layer === 'legends') {
                legends.forEach(legend => {
                    renderLegendToCanvas(ctx, {
                        ...legend,
                        data: legendData,
                        containerWidth: innerWidth,
                        containerHeight: innerHeight,
                        theme,
                    })
                })
            } else if (typeof layer === 'function') {
                layer(ctx, customLayerProps)

},
    {
        key: 'cellLineWidth',
        help: 'Border width for cells.',
        type: 'number',
        required: false,
        defaultValue: defaults.cellLineWidth,
        controlType: 'lineWidth',
        group: 'Cells',
    },
    {
        key: 'cellLineColor',
        help: 'Border color for cells.',
        type: 'string',
        required: false,
        defaultValue: defaults.cellLineColor,
        controlType: 'colorPicker',
        group: 'Cells',
    },
    {
        key: 'enablePoints',
        help: 'Enable/disable points.',
        type: 'boolean',
        required: false,
        defaultValue: defaults.enablePoints,
        controlType: 'switch',
        group: 'Points',
    },
    {
        key: 'pointSize',
        help: 'Size of points.',
        type: 'number',

default: defaults.cellLineWidth,
        controlType: 'range',
        controlGroup: 'Cells',
        controlOptions: {
            unit: 'px',
            min: 0,
            max: 12,
            step: 1,
        },
    },
    {
        key: 'cellLineColor',
        description: 'Border color for cells.',
        type: '{string}',
        required: false,
        default: defaults.cellLineColor,
        controlType: 'colorPicker',
        controlGroup: 'Cells',
    },
    {
        key: 'enablePoints',
        scopes: '*',
        description: 'Enable/disable points.',
        type: '{boolean}',
        required: false,
        default: defaults.enablePoints,
        controlType: 'switch',
        controlGroup: 'Points',
    },
    {
        key: 'pointSize',
        description: 'Size of points (px).',

{
        key: 'enableCells',
        scopes: '*',
        description: 'Enable/disable cells.',
        type: '{boolean}',
        required: false,
        default: defaults.enableCells,
        controlType: 'switch',
        controlGroup: 'Cells',
    },
    {
        key: 'cellLineWidth',
        description: 'Border width for cells (px).',
        type: '{number}',
        required: false,
        default: defaults.cellLineWidth,
        controlType: 'range',
        controlGroup: 'Cells',
        controlOptions: {
            unit: 'px',
            min: 0,
            max: 12,
            step: 1,
        },
    },
    {
        key: 'cellLineColor',
        description: 'Border color for cells.',
        type: '{string}',
        required: false,
        default: defaults.cellLineColor,
        controlType: 'colorPicker',

},
    {
        key: 'enableCells',
        help: 'Enable/disable cells.',
        type: 'boolean',
        required: false,
        defaultValue: defaults.enableCells,
        controlType: 'switch',
        group: 'Cells',
    },
    {
        key: 'cellLineWidth',
        help: 'Border width for cells.',
        type: 'number',
        required: false,
        defaultValue: defaults.cellLineWidth,
        controlType: 'lineWidth',
        group: 'Cells',
    },
    {
        key: 'cellLineColor',
        help: 'Border color for cells.',
        type: 'string',
        required: false,
        defaultValue: defaults.cellLineColor,
        controlType: 'colorPicker',
        group: 'Cells',
    },
    {
        key: 'enablePoints',
        help: 'Enable/disable points.',
        type: 'boolean',