hp40 = {
let s = await FileAttachment("HP40.asc").text();
s = s.replaceAll("\r", "").split("\n");
s.splice(5, 0, "nodata_value -32766.0");
return s.join("\n");
// .then((d) => loadGrid(d))
}
dem = output_srtmgl1.text().then((d) => loadGrid(d))
dem2 = loadGrid(hp40)
// d3.text("https://gicentre.github.io/data/lakeDistrict/centralDEM.asc")
dem3 = d3
.text("https://gicentre.github.io/data/lakeDistrict/centralDEM.asc")
.then((d) => loadGrid(d))
Plot.plot({
marks: [Plot.raster(dem.values, { width: dem.nCols, height: dem.nRows })]
})
terrainClrs = [
"rgb(141,166,141)",
"rgb(172,194,155)",
"rgb(221,219,167)",
"rgb(254,235,181)",
"rgb(248,212,153)",
"rgb(241,170,109)",
"rgb(227,112,72)"
]
Plot.plot({
color: {
label: "Elevation (m)",
interpolate: sequence(terrainClrs),
legend: true
},
marks: [Plot.raster(dem.values, { width: dem.nCols, height: dem.nRows })]
})
localRelief = calcRelief(dem, 315, 75)
Plot.plot({
width: width / 2,
height: width / 2,
marks: [
Plot.raster(localRelief.values, {
width: localRelief.nCols,
height: localRelief.nRows,
fill: d3.interpolate("#333", "white")
})
]
})
imhofRelief = FileAttachment("centralRelief.jpg")
.image()
.then((d) => getImageData(d))
.then((d) => gRaster(d))
// Plot.plot({
// width,
// height: (16 / 9) * width,
// marks: [
// Plot.raster(localRelief.values, {
// width: localRelief.nCols,
// height: localRelief.nRows,
// fill: d3.interpolate("black", "white")
// })
// ]
// })
Plot.plot({
width: width / 2,
height: width / 2,
color: { interpolate: sequence(terrainClrs), legend: true },
marks: [
Plot.raster(dem.values, {
width: dem.nCols,
height: dem.nRows,
opacity: 0.5 // Try changing this value between 0-1 to see the effect.
}),
Plot.raster(localRelief.values, {
width: localRelief.nCols,
height: localRelief.nRows,
fill: d3.interpolate("black", "white"),
mixBlendMode: "luminosity"
})
]
})
contours = [
// Minor contours
Plot.contour(dem.values, {
...bounds,
blur: 2,
thresholds: d3.range(0, 1000, 50),
opacity: 0.05
}),
// Major contours
Plot.contour(dem.values, {
...bounds,
blur: 2,
opacity: 0.1,
thresholds: d3.range(0, 1000, 200)
})
]
waterFeatures = [
Plot.geo(streams, {
stroke: "steelblue",
strokeWidth: 0.3
}),
Plot.geo(lakes, {
fill: "rgba(202,227,246,0.9)",
stroke: "steelblue",
strokeWidth: 0.5
})
]
Plot.plot({
projection: projection,
marks: waterFeatures
})
<style>
@font-face {
font-family: BellTopoSansBold;
src: url('${await belltoposansBold.url()}');
}
@font-face {
font-family: BellTopoSansItalic;
src: url('${await belltoposansItalic.url()}');
}
@font-face {
font-family: BellTopoSans;
src: url('${await belltoposans.url()}');
}
</style>
labels = ({
water: [
{ name: "Bassenthwaite\nLake", x: 322050, y: 528200, angle: 61 },
{ name: "Derwent\nwater", x: 326100, y: 521040, angle: 0 },
{ name: "Thirlmere", x: 331150, y: 516600, angle: 70 },
{ name: "Ullswater", x: 341720, y: 520000, angle: -22 },
{ name: "Haweswater", x: 348350, y: 514400, angle: -55 },
{ name: "Windermere", x: 338000, y: 501400, angle: 65 },
{ name: "Grasmere", x: 333760, y: 506700, angle: 0 },
{ name: "Rydal\nWater", x: 335700, y: 506200, angle: 0 },
{ name: "Wastwater", x: 316300, y: 505900, angle: -42 },
{ name: "Ennerdale\nWater", x: 311160, y: 514700, angle: 30 },
{ name: "Crummock wtr", x: 315800, y: 518700, angle: 70 },
{ name: "Buttermere", x: 318300, y: 515700, angle: 40 }
],
peaks: [
{ name: "Helvellyn", x: 333500, y: 515000 },
{ name: "Sca Fell", x: 321000, y: 507000 },
{ name: "Skiddaw", x: 325600, y: 528100 }
],
places: [
{ name: "KESWICK", x: 325800, y: 523900 },
{ name: "AMBLESIDE", x: 337200, y: 503600 },
{ name: "POOLEY\nBRIDGE", x: 347360, y: 524880 }
]
})
function annotations(w) {
const dflt = {
x: "x",
y: "y",
text: "name",
textAnchor: "middle",
lineAnchor: "middle",
fontSize: w / 90,
stroke: "rgba(255,255,255,0.2)"
};
return [
Plot.text(labels.water, {
...dflt,
rotate: "angle",
lineHeight: 0.8,
fontFamily: "BellTopoSansItalic",
fill: "rgb(40,120,180)"
}),
Plot.text(labels.peaks, {
...dflt,
fontFamily: "BellTopoSans",
fill: "rgba(0,0,0,0.7)"
}),
Plot.text(labels.places, {
...dflt,
fontFamily: "BellTopoSansBold",
fontSize: w / 70,
fill: "rgba(0,0,0,0.4)"
})
];
}
Plot.plot({
projection: projection,
marks: [...annotations(640)]
})
{
const w = width / 2;
return Plot.plot({
width: w,
height: (w * dem.nRows) / dem.nCols,
color: { interpolate: sequence(terrainClrs) },
projection: projection,
marks: [
...terrain,
...contours,
...waterFeatures,
...annotations(w),
Plot.frame({ stroke: "#1F1F1F", strokeWidth: 2 })
]
});
}
output_srtmgl1 = FileAttachment("output_SRTMGL1.asc")
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.
