chart = {
const pixelScale = 1.5;
const svg = d3.create("svg")
.attr("width", pixelScale * shape.x)
.attr("height", pixelScale * shape.y);
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("stroke-opacity", "0.5")
.selectAll("path")
.data(scaleContour(contours, pixelScale))
.join("path")
.attr("fill", d => color(d.value))
.attr("d", d3.geoPath());
return svg.node();
}
// Fetch dem data as 256 x 256 array
dem = fetchTile({z: 13, x: 7262, y: 3232})
imshow(dem, 1, d3.interpolateViridis)
// Shape of dem data
shape = ({x: dem[0].length, y: dem.length})
// Flatten 2D array
flatDem = [].concat.apply([], dem)
// min/max elevation
elevRange = d3.extent(flatDem)
// Thresholds for contour
thresh = d3.range(Math.round(elevRange[0]/interval)*interval, elevRange[1], interval)
// Dem data -> Contours
contours = d3.contours()
.size([shape.x, shape.y])
.thresholds(thresh)
(flatDem)
// Color scale with elevation normalization
color = d => d3.interpolateViridis((d-elevRange[0])/(elevRange[1]-elevRange[0]))
// Scale function for cooridinates in contour
// (Without scaling, coordinates corresponds to index)
function scaleContour(contours, scale) {
return contours.map(({type, value, coordinates}) => (
{type, value, coordinates: coordinates.map(rings => (
rings.map(points => (
points.map(([x, y]) => ([
x*scale, y*scale
]))
))
))}
));
}
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.
