JavaScript Mesh Circle Chart

This example shows visualization of intensity in circle-based mesh chart

Heatmaps can be created in XY Charts:

// Add meshCircle Series to a XY Chart
chartXY.addHeatmapSeries( {
    rows:       verticalResolution,
    columns:    horizontalResolution,
    start:      { x: 0, y: 0 },
    end:        { x: 50, y: 50 },
    pixelate:   false,
    // Make sure we're using the Mesh IntensitySeriesType
    type:       IntensitySeriesTypes.Mesh
})

The Mesh IntensitySeriesType has the same API that is available with the Grid IntensitySeriesType, but in addition it has the invalidateGeometryOnly method:

// Use invalidateGeometryOnly to edit the geometry of the meshSircle and invalidate it.
// This can be done by supplying a Matrix of Points to the method.
meshCircle.invalidateGeometryOnly( vertices )
// Optionally, the geometry can be modified by supplying the method with a callback
// which modifies each point.
meshCircle.invalidateGeometryOnly( (row, column, current) => ({x: row, y: column}) )

// adding values for mesh is done using  invalidateValuesOnly
meshCircle.invalidateValuesOnly( values )

// coloring is done using the Palette
const lut = new LUT({
    steps: [
        { value: 0, color: ColorRGBA(0, 0, 0, 0) }, // transparent at value 0
        { value: 50, color: ColorRGBA(255, 255, 0) }, // yellow at value 50
        { value: 100, color: ColorRGBA(255, 0, 0) } // red at value 100
    ],
    interpolate: true
})
const paletteFill = new PalettedFill({ lut, lookUpProperty: 'x' })