function noisePreview(sample, options = {}) { const { size = 300, lineHeight = size, initialOffset = 0.5, onChange = (v) => {}, asyncPasses = 0, curve: { type: curveType = "linear", points: curvePoints = size, mode = "fill", bandDistance = 0.01, bandSteps = 0, bandShift = 0, colorize = false, opaque = false, colorScale = d3.interpolateSpectral } = {}, invalidation: whenInvalidated = invalidation, contrast = {} } = options; const sampler = scaledSampler(sample, size, contrast); const canvas = heightField(sampler, { width: size, height: size, invalidation: whenInvalidated, asyncPasses }); canvas.style.background = "#000"; const bands = 1 + bandSteps * 2; const opacity = opaque ? 1 : gamma(1 / bands); const scale = d3.scaleSequential([0, bands], colorScale); const color = !colorize ? (i) => `hsla(0,0%,0%,${opacity})` : (i) => { const c = d3.rgb(scale(i)); c.opacity = opacity; return c; }; const fill = mode === "fill" ? color : () => "none"; const stroke = mode === "line" ? color : () => "none"; const curves = Array.from( { length: bands }, (_, i) => svg`` ); const view = html`

${canvas} ${d3.range(-bandSteps, bandSteps + 1).map( (o) => html`

` )}

Purpose-built for displays of data