This example demonstrates a dynamic heatmap visualization that maps a function across a two-dimensional grid. The code uses D3.js to create an SVG container, define scales, axes, and draw the heatmap by rendering pixel data onto a Canvas element via a foreignObject. The Canvas `createImageData` API is used to compute and display color values based on the linear mapping function, with opacity halved for transparency. The visualization updates interactively through inputs like sliders and checkboxes, which control the model parameters.