heatmap = function (fun) {
const dimensions = { width: 600, height: 375 },
margin = { top: 30, right: 142.5, bottom: 30, left: 142.5 },
domain = { x: [0, 1], y: [0, 1] },
outputId = null,
scales = createScales(dimensions, margin, domain),
linearFunction = fun;
const svg = createSvg(outputId, dimensions, margin);
svg.call(drawHeatMap, dimensions, margin, scales, linearFunction);
svg.call(drawAxes, dimensions, margin, scales);
return svg.node();
}
{
const dimensions = { width: 600, height: 375 },
margin = { top: 30, right: 142.5, bottom: 30, left: 142.5 },
domain = { x: [0, 1], y: [0, 1] }
return createScales(dimensions, margin, domain).x
}
import { multiInput } from "@marcel112358/form-inputs"
function createScales(dimensions, margin, domain) {
return {
x: d3
.scaleLinear()
.domain(domain.x)
.range([margin.left, dimensions.width - margin.right]),
y: d3
.scaleLinear()
.domain(domain.y)
.range([dimensions.height - margin.bottom, margin.top]),
color: d3
.scaleLinear()
.range(["#ffffff", "#0000ff"])
.domain([0, 25])
};
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
