joy = Plot.plot({
marks: profiles.map((record) => {
const [lineId, arr] = record;
// zeroing out the temperatures for land grid cells
const line = arr.map(d => d.Z > 100 ? 0 : d.Z);
// index is used to spread out the ridge lines
// the values for the index, dx, dy is going to depend on your data
const index = lineId * 20;
// dx is used to offset the ridge lines horizontally
const dx = index / 8;
// dx is used to offset the ridge lines vertically
const dy = -50 + index / 4;
return [
// Plot.areaY(line, {
// dx,
// dy,
// fill: index,
// curve: "basis",
// fillOpacity: 0.3,
// }),
Plot.barY(line, {
x: (d, i) => i,
//y: (d, i) => d,
dx,
dy,
fill: (d) => d,
fillOpacity: 0.3,
// remove spaces between bars
//insetLeft: 0,
//insetRight: 0,
}),
Plot.lineY(line, {
dx,
dy,
strokeWidth: 0.75,
curve: "step",
})
];
}),
x: { axis: null },
y: { axis: null },
marginTop: 50,
marginBottom: 200,
marginRight: 150,
width: 1000,
height: 300,
color: {
scheme: "warm",
type: "diverging",
legend: true,
label: "Sea Surface Temperature Anomaly (°C)"
},
})
// filtering out the temperatures for land grid cells
Plot.lineY(profiles[40][1].filter(d => d.Z < 100), { y: (d) => d.Z}).plot({
height: 180,
x: { axis: null },
y: { label: "Sea Surface Temperature Anomaly (°C)", grid: true }
})
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.
