Public
Edited
Apr 19, 2024
8 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
facet: { data: de_dust2, x: "att_side" },

margin: 0,
axis: null,
x: { domain: [+map_data_de_dust2.StartX, +map_data_de_dust2.EndX] },
y: { domain: [+map_data_de_dust2.StartY, +map_data_de_dust2.EndY] },
width: 2 * width,
fx: { padding: 0 },
height: width,
marks: [
Plot.image([{ url: de_dust2Url }], {
frameAnchor: "middle",
height: width,
width: width,
src: "url"
}),
Plot.frame({ stroke: "white" }),
Plot.dot(de_dust2, {
x: "att_pos_x",
y: "att_pos_y",
fill: "att_side",
fillOpacity: 0.5,
r: 2
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
{
const margin = 40;
const a = Plot.plot({
facet: { data: de_dust2, x: "att_side" },
margin,
width: width * 1.5,
fx: { padding: 0.1 },
marks: [Plot.frame({ stroke: "white" })]
});
const bw = a.scale("fx").bandwidth *0.935;
return Plot.plot({
margin,
width: width*0.7,
height: width*0.7,
grid: true,
color: {legend: true},
x: { domain: [+map_data_de_dust2.StartX, +map_data_de_dust2.EndX] },
y: { domain: [+map_data_de_dust2.StartY, +map_data_de_dust2.EndY] },
marks: [
Plot.image([{ url: de_dust2Url }], {frameAnchor: "middle", height: bw, src: "url"}),
Plot.dot(de_dust2, {x: "att_pos_x", y: "att_pos_y", fill: "att_side", fillOpacity: 0.5, r: 2}),
// Plot.frame({ stroke: "lime" }),
]
});
}
Insert cell
Insert cell
{
const margin = 40;
const a = Plot.plot({
facet: { data: de_dust2, x: "att_side" },
margin,
width: width * 1.5,
fx: { padding: 0.1 },
marks: [Plot.frame({ stroke: "white" })]
});
const bw = a.scale("fx").bandwidth;

return Plot.plot({
facet: { data: de_dust2, x: "att_side" },
margin,
x: { domain: [+map_data_de_dust2.StartX, +map_data_de_dust2.EndX] },
y: { domain: [+map_data_de_dust2.StartY, +map_data_de_dust2.EndY] },
width: width * 1.5,
fx: { padding: 0.1 },
height: bw+(margin*2),
marks: [
Plot.image([{ url: de_dust2Url }], {
frameAnchor: "middle",
height: bw,
width: bw,
src: "url"
}),
Plot.frame({ stroke: "white" }),
Plot.dot(de_dust2, {
x: "att_pos_x",
y: "att_pos_y",
fill: "density",
fillOpacity: 0.5,
r: 2
}),
Plot.density(de_dust2, {x: "att_pos_x", y: "att_pos_y", bandwidth: 1, thresholds: 300, stroke:"density"}),
]
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more