The first parameter must be the Environment that this
Heatmap will render.
The second parameter specifies options, which can include:
from (string = "white") — The color (name, hex value, or RGB) to draw when a cell contains 0 Agentsto (string = "black") — The color (name, hex value, or RGB) to draw when a cell contains the highest number of Agentsx and y can be either:
"x"/"y" respectively — The name of Agent data to measure along the x/y axis{ buckets: 10, key: 'x' | 'y', min: 0, max: 1 } — Include the number of buckets to divide the range min → max into, along with the name of Agent datawidth (number = 500) — The width, in pixels, of the canvas on which to renderheight (number = 500) — The height, in pixels, of the canvas on which to renderscale (either "relative" or "fixed", defaults to "relative")
"relative" — The maximum number of Agents in any single cell is automatically used as the highest value in the scale. This updates over time based on Agent distribution."fixed" — You supply the number to use as the maximum value (see max below).max (optional, number) — If you use scale = "fixed", then setting a max will cause cells with that number (or higher) of Agents to be drawn using the to color.// plots the correlation between age of agents (on the x-axis)
// vs. their wealth (on the y-axis)
const heatmap = new Heatmap(environment, {
x: 'age',
y: 'wealth'
});
Optionalopts: HeatmapOptionsPoints to the Environment that this
renderer is tied to. This is automatically set when the
renderer is created.
Mount this renderer to a DOM element. Pass either a string representing a CSS selector matching the element or the element itself.
// mounts the renderer to the element with the ID `container`
renderer.mount('#container');
// mounts the renderer to the element itself
const container = document.getElementById('container');
renderer.mount(container);
A
Heatmapcan be used to visualize the distribution ofAgents across two metrics. WhileHistograms are useful for showing the distribution ofAgents along a single metric (or on multiple metrics using the same scale), aHeatmapcan show how two metrics relate to one another — correlation, inverse correlation, in a nonlinear manner, randomly (no correlation), etc.Note above that, although the output appears similar to what a
CanvasRenderermight output, theyaxis is reversed here — low values are at the bottom and high at the top, whereas on aCanvasRendererhigh values are at the bottom and low at the top.Since
0.5.8