// Fetch dem data as 256 x 256 array
// Mt. Nabewari, Japan
dem = fetchTile({z: 13, x: 7262, y: 3232})
// Calculate gradient at (x, y) of elevation tile
function gradient(tile, x, y) {
// 0 < x, y < (shape of tile - 1)
const fx = Math.floor(x);
const fy = Math.floor(y);
if ((x-fx) + (y-fy) < 1) {
return {
x: tile[fy][fx+1] - tile[fy][fx],
y: tile[fy+1][fx] - tile[fy][fx]
};
} else {
return {
x: tile[fy+1][fx+1] - tile[fy+1][fx],
y: tile[fy+1][fx+1] - tile[fy][fx+1]
}
}
}
// 2D-array of gradients at each point of elevation tile
grads = d3.range(255).map(x => (
d3.range(255).map(y =>
gradient(dem, y, x)
)
));
imshow(dem, 1, d3.interpolateViridis)
imshow(
grads.map(row => row.map(d => Math.sqrt(d.x**2 + d.y**2))),
1,
d3.interpolateViridis
)
md`### 3.3. Gradient in x-direction
Extract the x-component (east-west) of gradient.
`
imshow(
grads.map(row => row.map(d => d.x)),
1,
d3.interpolateViridis
)
imshow(
grads.map(row => row.map(d => d.y)),
1,
d3.interpolateViridis
)
imshow(
grads.map(row => row.map(d => Math.atan2(d.y, d.x))),
1,
d3.interpolateSinebow
)
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.
