Full-time postdoctoral researcher | Part-time design enthusiast | Aspiring cat herder.
Public
Edited
Jul 21, 2023
Plot.plot({
width: 400 * 2,
height: (400 / volcano.width) * volcano.height - 20,
padding: 0,
margin: 0,
x: { axis: null, range: [0, 400 * 2] },
y: { axis: null, range: [0, (400 / volcano.width) * volcano.height] },
marks: [
Plot.cell(
d3.cross([0, 1], [0]).map(([a, b]) => ({ a, b })),
{
x: "a",
y: "b",
render: (
index,
{ x, y },
{
x: X,
y: Y,
channels: {
x: { value: a },
y: { value: b }
}
}
) =>
d3
.create("svg:g")
.call((g) =>
g
.selectAll()
.data(index)
.join("g")
.attr("transform", (i) => `translate(${X[i] + 10},${Y[i]})`)
.append((i) =>
subPlot(
data,
a[i],
b[i],
x.bandwidth() - 20,
y.bandwidth() - 20
)
)
)
.on(
"pointerenter pointermove",
(event) => (mutable mouse_pos = d3.pointer(event))
)
.node()
}
)
]
})
import { volcano } from "@observablehq/plot-volcano-raster"
data = [
[{ ...volcano, ...{ scheme: "Magma" } }],
[
{
...volcano,
...{
scheme: "Turbo",
values: volcano.values.map(
(d) => Math.sin((2 * Math.PI * d) / Math.max(...volcano.values)) ** 2
)
}
}
]
]
subPlot = (data, a, b, width, height) =>
Plot.plot({
width,
height,
margin: 0,
color: { scheme: data[a][b].scheme },
marks: [
Plot.raster(data[a][b].values, {
width: data[a][b].width,
height: data[a][b].height
})
],
x: { axis: false },
y: { axis: false }
})
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.
