elevationMap(elevation_data, image)
function elevationMap(
elevation_data,
image,
opts = {
xSpacing: 0.01568,
ySpacing: 0.01568,
zScaling: 0.06666
}
) {
// In Observable, we really don't want the fullScreenRenderer that nearly all the examples are using
// this version forces it into a container
const fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance(
{
rootContainer: document.createElement("div"),
containerStyle: { width: `${width}px`, height: "600px" }
}
);
const vtkActor = vtk.Rendering.Core.vtkActor,
vtkElevationReader = vtk.IO.Misc.vtkElevationReader,
vtkMapper = vtk.Rendering.Core.vtkMapper,
vtkTexture = vtk.Rendering.Core.vtkTexture;
// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
// ----------------------------------------------------------------------------
// Example code
// ----------------------------------------------------------------------------
const reader = vtkElevationReader.newInstance(opts);
const mapper = vtkMapper.newInstance();
const actor = vtkActor.newInstance();
mapper.setInputConnection(reader.getOutputPort());
actor.setMapper(mapper);
renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();
// Apply Texture
if (image) {
const texture = vtkTexture.newInstance();
texture.setInterpolate(true);
texture.setImage(image);
actor.addTexture(texture);
renderWindow.render();
}
// Download elevation and render when ready
const elevation_url = "data:text/csv;" + d3.csvFormatRows(elevation_data);
reader.setUrl(elevation_url).then(() => {
renderer.resetCamera();
renderWindow.render();
});
return Object.assign(html`${fullScreenRenderer.getContainer()}`, {
value: fullScreenRenderer
});
}
vtk = import("https://cdn.skypack.dev/vtk.js?min").then(() => window.vtk)
__BASE_PATH__ = "https://kitware.github.io/vtk-js"
image = d3.image(`${__BASE_PATH__}/data/elevation/dem.jpg`, {
crossOrigin: "anonymous"
})
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.
