dem = 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)
Plot.plot({
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({
marks: [
Plot.raster(imhofRelief.values, {
width: imhofRelief.nCols,
height: imhofRelief.nRows,
fill: d3.interpolate("black", "white")
})
]
})
Plot.plot({
color: { interpolate: sequence(terrainClrs), legend: true },
marks: [
Plot.raster(dem.values, {
width: dem.nCols,
height: dem.nRows,
opacity: 0.4 // Try changing this value between 0-1 to see the effect.
}),
Plot.raster(relief.values, {
width: relief.nCols,
height: relief.nRows,
fill: d3.interpolate("black", "white"),
mixBlendMode: "luminosity"
})
]
})
{
return Plot.plot({
color: { interpolate: sequence(terrainClrs) },
marks: [
Plot.raster(dem.values, {
width: dem.nCols,
height: dem.nRows,
opacity: 0.4
}),
Plot.raster(relief.values, {
width: relief.nCols,
height: relief.nRows,
fill: d3.interpolate("black", "white"),
mixBlendMode: "luminosity"
}),
Plot.contour(dem.values, {
width: dem.nCols,
height: dem.nRows,
blur: 2,
thresholds: d3.range(0, 1000, 50),
opacity: 0.05
}),
Plot.contour(dem.values, {
width: dem.nCols,
height: dem.nRows,
blur: 2,
opacity: 0.1,
thresholds: d3.range(0, 1000, 200)
})
]
});
}
bounds = ({
x1: dem.llCorner[0] - dem.cellSize / 2,
y1: dem.llCorner[1] - dem.cellSize / 2,
x2: dem.llCorner[0] + dem.nCols * dem.cellSize + dem.cellSize / 2,
y2: dem.llCorner[1] + dem.nRows * dem.cellSize + dem.cellSize / 2,
width: dem.nCols,
height: dem.nRows
})
projection = ({
type: "reflect-y",
domain: new GeoJSON().points([
[bounds.x1, bounds.y1],
[bounds.x2, bounds.y2]
]).featureCollection
})
terrain = [
Plot.raster(dem.values, { ...bounds, opacity: 0.5 }),
Plot.raster(relief.values, {
...bounds,
fill: d3.interpolate("black", "white"),
mixBlendMode: "multiply"
})
]
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: (d) => 0.2 + Math.log(d.properties.shreve) / 4
}),
Plot.geo(lakes, {
fill: "rgba(202,227,246,0.95)",
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>
function annotations(w) {
const dflt = {
x: "x",
y: "y",
text: "name",
textAnchor: "middle",
lineAnchor: "middle",
fontSize: w / 80,
stroke: "rgba(255,255,255,0.2)"
};
return [
...mapLabels.lakes.map((d) =>
curvedText(d.name, {
path: d.path,
fitToPath: true,
fontFamily: "BellTopoSansItalic",
fill: "rgb(40,120,180)",
stroke: "rgba(255,255,255,0.6)",
strokeWidth: 1,
fontSize: w / 80
})
),
Plot.text(mapLabels.peaks, {
...dflt,
fontFamily: "BellTopoSans",
fill: "rgba(0,0,0,0.7)"
}),
Plot.text(mapLabels.places, {
...dflt,
fontFamily: "BellTopoSansBold",
fontSize: w / 70,
fill: "rgba(0,0,0,0.4)"
})
];
}
{
const w = 640;
return Plot.plot({
width: w,
x: { domain: [bounds.x1, bounds.x2] },
y: { domain: [bounds.y1, bounds.y2] },
projection: projection,
marks: [...waterFeatures, ...annotations(w)]
});
}
{
const w = width;
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: "white", strokeWidth: 2 })
]
});
}
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.
