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)
Plot.plot({
marginLeft: 100,
padding: 0,
y: {
label: null,
domain: paramsOrder // Define explicit y-axis order
},
color: { legend: true },
marks: [
// Data cells
Plot.cell(
data2,
{
x: "week",
y: "param",
fill: d => {
if (d.param == "Time Collected") {
return d.aval.getUTCHours() >= 12 ? 'red' : 'white';
} else {
let colorScale = d3.scaleOrdinal().domain(['0', '1', '2', 'A', 'B', 'C']).range(["red", "yellow", "green", 'orange', 'pink', 'purple']);
return colorScale(d.aval);
}
},
inset: 2,
stroke: d => d.param === "Time Collected" && d.aval.getUTCHours() <= 12 ? 'grey' : 'white',
strokeWidth: 2,
r: 10,
title: d => {
if (d.param == "Collector Initials") {
return `Initials: ${d.aval}`
} else if (d.param == "Time Collected") {
return `Time: ${d.aval}`
} else {
return `Value: ${d.aval}`
}
},
tip: true
},
),
Plot.ruleY(["Collector Initials"], {
stroke: 'black',
strokeWidth: 2
}),
],
tooltip: {
stroke: 'white'
}
});
function isDate(value) {
return value instanceof Date;
}
paramsOrder = [
"param1",
"param2",
"param3",
"Collector Initials",
"Time Collected"
];
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},
{aval: "A", week: 1, param: "Collector Initials"},
{aval: "B", week: 2, param: "Collector Initials"},
{aval: "B", week: 3, param: "Collector Initials"},
{aval: new Date("2025-02-02T04:04:31.235Z"), week: 1, param: "Time Collected"},
{aval: new Date("2025-02-02T02:02:31.235Z"), week: 2, param: "Time Collected"},
{aval: new Date("2025-02-02T17:52:31.235Z"), week: 3, param: "Time Collected"},
]
data2 = [
{"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":"0","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},
{"param":"Collector Initials","aval":"A","week":1},
{"param":"Collector Initials","aval":"B","week":2},
{"param":"Collector Initials","aval":"B","week":3},
{"param":"Time Collected","aval": new Date("2025-02-02T04:04:31.235Z"),"week":1},
{"param":"Time Collected","aval": new Date("2025-02-02T02:02:31.235Z"),"week":2},
{"param":"Time Collected","aval": new Date("2025-02-02T17:52:31.235Z"),"week":3}
]
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.
