Published
Edited
Oct 7, 2019
1 fork
12 stars
bilinearInterpolator = func => (x, y) => {
// "func" is a function that takes 2 integer arguments and returns some value
const x1 = Math.floor(x);
const x2 = Math.ceil(x);
const y1 = Math.floor(y);
const y2 = Math.ceil(y);
if ((x1 === x2) && (y1 === y2)) return func(x1, y1);
if (x1 === x2) {
return (func(x1, y1) * (y2 - y) + func(x1, y2) * (y - y1)) / (y2 - y1);
}
if (y1 === y2) {
return (func(x1, y1) * (x2 - x) + func(x2, y1) * (x - x1)) / (x2 - x1);
}
// else: x1 != x2 and y1 != y2
return (
func(x1, y1) * (x2 - x) * (y2 - y) +
func(x2, y1) * (x - x1) * (y2 - y) +
func(x1, y2) * (x2 - x) * (y - y1) +
func(x2, y2) * (x - x1) * (y - y1)
)
/ ((x2 - x1) * (y2 - y1));
}
sampleFunc = (x, y) => {
if ((x === 0) && (y === 0)) return 0;
if ((x === 0) && (y === 1)) return 1;
if ((x === 1) && (y === 0)) return 1;
if ((x === 1) && (y === 1)) return 0.5;
}
interpolation = {
const interpolate = bilinearInterpolator(sampleFunc)
const n = 100;
return d3.range(0, 1, 1/n).map(y => (
d3.range(0, 1, 1/n).map(x => {
return interpolate(x, y);
})
));
}
imshow(interpolation.reverse(), 2, d3.interpolateTurbo)
tile = {
const dem = await fetchTile({z: 13, x: 7262, y: 3232});
return dem.slice(10, 20).map(row => row.slice(20, 30));
}
interpolatedTile = {
const n = 40;
return d3.range(0, 9, 1/n).map(y => (
d3.range(0, 9, 1/n).map(x => {
const interpolate = bilinearInterpolator((i, j) => tile[j][i])
return interpolate(x, y);
})
));
}
imshow(interpolatedTile, 1, d3.interpolateTurbo)
nearestTile = {
const nearestInterpolator = func => (x, y) => func(Math.round(x), Math.round(y));
const n = 50;
return d3.range(0, 9, 1/n).map(y => (
d3.range(0, 9, 1/n).map(x => {
const interpolate = nearestInterpolator((i, j) => tile[j][i], x, y);
return interpolate(x, y);
})
));
}
imshow(nearestTile, 1, d3.interpolateTurbo)
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.
