imshow(data, 0.5, colorScales[color])
function checkerBoard(x, y) {
return Math.abs(Math.abs(Math.floor(x) % 2) - Math.abs(Math.floor(y) % 2));
}
function latticeProximity(x, y, alpha=0.01) {
// alpha: prevent divergence of log - the smaller the sharper
const dx = - Math.log(alpha + Math.abs(x - Math.round(x)));
const dy = - Math.log(alpha + Math.abs(y - Math.round(y)));
// Normalize
const minVal = - 2 * Math.log(alpha + 0.5);
const maxVal = - 2 * Math.log(alpha);
// range of return value: [0, 1]
return (dx + dy - minVal) / (maxVal - minVal);
}
function circleInverter(cx, cy, r) {
return (x, y) => [
cx + r**2 * (x - cx) / ((x - cx)**2 + (y - cy)**2), // inverse x
cy + r**2 * (y - cy) / ((x - cx)**2 + (y - cy)**2) // inverse y
];
}
data = {
const resolution = 800; // # of pixels
const range = 1.2; // drawing range
const invert = circleInverter(0, 0, 1); // inversion by unit circle
const invertedLattice = d3.cross(
d3.range(-range, range, 2*range/resolution),
d3.range(-range, range, 2*range/resolution)
).map(coord => method(...invert(...coord)));
return math.reshape(invertedLattice, [resolution, resolution]);
}
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.
