viewof gl = {
const canvas = DOM.canvas(height, height);
canvas.style.cssText = `margin: 0 -14px;width:${height}px;height:${height}px;`;
canvas.value = canvas.getContext("webgl");
return canvas;
}
url = "https://cyberjapandata.gsi.go.jp/xyz/dem_png/13/7262/3232.png"
// HTMLImageElement of elevation tile image
image = {
const imgUrl = await fetch(url).then(r => r.blob()).then(b => URL.createObjectURL(b));
const im = new Image;
im.src = imgUrl;
return im;
}
// Extract color array from d3
scheme = {
const scheme = d3.schemeSpectral;
return scheme[scheme.length - 1].reverse();
}
// Hex color => Array of RGB in range [0, 1]
rgbColors = scheme.map(hex => {
const color = d3.color(hex);
return [color.r/255, color.g/255, color.b/255]
});
program = Program(gl, vertexShader, fragmentShader)
draw = {
gl.useProgram(program.program);
program.a_vertex.set([[-1, -1], [+1, -1], [+1, +1], [-1, 1]]);
program.u_size.set(Math.max(viewof gl.width, viewof gl.height));
Texture(gl, gl.NEAREST, image, image.width, image.height).bindToUnit(0);
program.u_texture.set(0);
program.u_n.set(rgbColors.length);
program.u_colorScheme.set([].concat.apply([], rgbColors));
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
}
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.
