JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jsxgraph.org/beta/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://jsxgraph.org/beta/jsxgraph.css">
<h1>
Attribute functions get their JSXGraph element as parameters.
</h1>
<div id="jxgbox" class="jxgbox" style="width:600px; height:600px">
</div>

JavaScript

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5],
    axis: true
});

var i, j, step, f,
    list = [];

var c = board.create('slider', [[1, 4.5], [4, 4.5], [1, 1, 5]], {
    size: (self) => (self.Value !== undefined) ? 3 + 2 * self.Value() : 3
});
f = (x, y) => Math.sin(c.Value() * x) * Math.cos(c.Value() * y);

// Display a sort of heat map of f(x, y)
// Negative function values are red, positive values are blue, 
step = 0.5;
for (i = -4; i <= 4; i += step) {
    for (j = -4; j <= 4; j += step) {
        list.push(board.create('point', [i, j], {
            face: '[]',
            withLabel: false,
            highlight: false,
            strokeWidth: 0,
            name: '',
            size: (self) => 2 + 8 * Math.abs(f(self.X(), self.Y())),
            fillColor: (self) => (f(self.X(), self.Y()) >= 0) ? '#0000ff50' : '#ff000050'
        }));
    }
}