createStackedPlot(plot1, plot2)
Plot.plot({
marginLeft: 100,
padding: 0,
y: {
label: null,
scale: yScale
},
color: {legend: true},
marks: [
Plot.cell(
data,
{
x: "week",
y: "param",
fill: d => {
let colorScale = d3.scaleOrdinal().domain([0, 1, 2]).range(["red", "yellow", "green"]);
return colorScale(d.aval);
},
inset: 0.5,
color: { legend: true },
stroke: 'white',
strokeWidth: 2,
r: 10,
title: d => `Week: ${d.week} \n Param: ${d.param} \n Aval: ${d.aval}`,
}
),
Plot.ruleY(
[0],
{
stroke: 'black',
strokeWidth: 2,
ticks: ''
}
),
Plot.cell(
ce,
{
x: "week",
y: "value",
fill: d => {
let colorScale = d3.scaleOrdinal().domain(["A", "B", "C"]).range(["pink", "orange", "blue"]);
return colorScale(d.name);
},
inset: 0.5,
color: { legend: false },
stroke: 'white',
strokeWidth: 2,
r: 10,
title: d => `Collector Initials: ${d.name}`,
}
),
Plot.cell(
time,
{
x: "week",
y: "value",
fill: d => {
return new Date(d.time).getUTCHours() >= 12 ? 'red' : 'white';
},
inset: 0.5,
stroke: 'lightgrey',
strokeWidth: 2,
r: 10,
title: d => `Time: ${d.time}`
}
)
],
tooltip: {
stroke: 'white'
}
});
function isDate(value) {
return value instanceof Date;
}
plot1 = Plot.plot({
marginLeft: 100,
marginBottom: 0,
padding: 0,
inset: 10,
y: {
label: null,
scale: yScale
},
x: {
ticks: [], // Remove all x-axis ticks
label: null // Remove the x-axis label
},
marks: [
Plot.cell(
data,
{
x: "week",
y: "param",
fill: d => {
let colorScale = d3.scaleOrdinal().domain([0, 1, 2]).range(["red", "yellow", "green"]);
return colorScale(d.aval);
},
inset: 0.5,
color: { legend: true },
stroke: 'white',
strokeWidth: 2,
r: 10,
title: d => `Week: ${d.week} \n Param: ${d.param} \n Aval: ${d.aval}`,
tip: true
}
),
],
tooltip: {
stroke: 'white'
}
});
plot2 = Plot.plot({
marginLeft: 100,
marginTop: 0,
inset: 10,
padding: 0,
y: {
label: null,
scale: yScale
},
marks: [
Plot.frame(),
Plot.cell(
ce,
{
x: "week",
y: "value",
fill: d => {
let colorScale = d3.scaleOrdinal().domain(["A", "B", "C"]).range(["pink", "orange", "blue"]);
return colorScale(d.name);
},
inset: 0.5,
color: { legend: false },
stroke: 'white',
strokeWidth: 2,
r: 10,
title: d => `Collector Initials: ${d.name}`,
tip: true
}
),
Plot.cell(
time,
{
x: "week",
y: "value",
fill: d => {
return new Date(d.time).getUTCHours() >= 12 ? 'red' : 'white';
},
inset: 0.5,
stroke: 'lightgrey',
strokeWidth: 2,
r: 10,
title: d => `Time: ${d.time}`
}
)
]
});
function createStackedPlot(plot1, plot2) {
// Create a parent SVG container to stack the plots
const svgContainer = d3.create('div')
.attr('width', Math.max(plot1.width, plot2.width)) // Set width to the max width of the two plots
.attr('height', plot1.height + plot2.height); // Stack the plots vertically by summing their heights
// Append plot1 to the container
svgContainer.node().appendChild(plot1);
// Append plot2 to the container, offset by the height of plot1
plot2.setAttribute('y', plot1.height); // Offset plot2 by the height of plot1
svgContainer.node().appendChild(plot2);
return svgContainer.node(); // Return the combined SVG
}
data = [
{param: "param1", aval: 0, week: 1},
{param: "param1", aval: 1, week: 2},
{param: "param1", aval: 2, week: 3},
{param: "param2", aval: 2, week: 1},
{param: "param2", aval: 1, week: 2},
{param: "param2", aval: 0, week: 3},
{param: "param3", aval: 0, week: 1},
{param: "param3", aval: 1, week: 2},
{param: "param3", aval: 0, week: 3},
]
ce = [
{name: "A", week: 1, value: "Collector Initials"},
{name: "B", week: 2, value: "Collector Initials"},
{name: "B", week: 3, value: "Collector Initials"},
]
time = [
{time: "2025-02-02T04:04:31.235Z", week: 1, value: "Time Collected"},
{time: "2025-02-02T17:52:31.235Z", week: 2, value: "Time Collected"},
{time: "2025-02-02T17:52:31.235Z", week: 3, value: "Time Collected"},
]
yScale = d3.scaleOrdinal()
.domain(["Collector Initials", "Time Collected", ...new Set(data.map(d => d.param))]) // Categorical domain
.range([0, 300]) // Numeric range (adjust as needed)
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.
