Hello, spectral.jsPseudo-blue noise shaderHow fast does walk-on-spheres converge?KDE estimationSpherical Perlin NoiseHull paddingDithered heatmapMean value coordinatesHeatmapPoisson potentialK-means binningImage FFTTransport to a mapSquircle interpolatorDisc TransportAn approximate formula for the chord area inverse problemWalk on SpheresnoFrame contoursHue blurMoving average blurFitting a sigmoidGaussian SmoothingPlateau detectionHello, LOESSLinde–Buzo–Gray stipplingHello, delatinHillshading & supersamplingBlurry contoursSpherical contours iteratorSpherical contours as a gradientGeo Voronoi interpolationModified Shepard’s method II (with geoContour)MapfillSpherical contoursModified Shepard’s methodShepard’s methodSpherical kernel interpolation with nearest neighborsSpherical HeatmapKrigingSpherical KDE Interpolation
interpolateBalanced?
draw(interpolateRound(0, 2)) // unbalanced 😱
draw(interpolateBalanced(0, 2)) // balanced 😇
interpolateBalanced(0, 2)(0.7)
interpolateRound(0, 2)(0.7)
interpolateRound = (a, b) => {
// d3.interpolateRound
return function(t) {
return Math.round(a * (1 - t) + b * t);
};
}
interpolateBalanced = (a, b) => {
// epsilon is needed to have an exact value for t=1
var div = Math.abs(b - a) + epsilon;
return function(t) {
t += (t - 1 / 2) / div;
return Math.round(a * (1 - t) + b * t);
};
}
interpolateBalanced2 = (a, b) => {
// suggested by @jrus
// epsilon is needed to have an exact value for t=1
var sign = Math.sign(b - a);
return interpolateRound(
a - sign * (0.5 - epsilon),
b + sign * (0.5 - epsilon)
);
}
draw(interpolateBalanced(0, -2))
draw(interpolateBalanced(0, 0))
draw(interpolateRound(0, 7))
draw(interpolateBalanced(0, 7))
draw(interpolateBalanced2(0, 7))
draw(interpolateBalanced(7, 0))
draw(interpolateBalanced2(7, 0))
draw(interpolateBalanced(0.1, 2.5))
function draw(interpolate) {
const context = DOM.context2d(width, 30);
for(let i=0; i < width; i++) {
context.fillStyle = color(interpolate(i/(width-1)))
context.fillRect(i,0,2,30);
}
return context.canvas
}
color = d3.scaleOrdinal(d3.schemeCategory10)
d3 = require("d3@5")
import { epsilon } from "@fil/math"
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.
