Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
Published
Edited
Apr 19, 2022
7 stars
testJobs = FileAttachment("githubTestJobs.json").json()
Inputs.table(testJobs)
// create a new Plot:
Plot.plot({
// add some marks to the Plot:
marks: [
// create a "cell" type mark:
Plot.cell(
testJobs, // use the "testJobs" data
{
x: "run_number", // set the X position of each cell based on its "run_number" value
y: "name" // set the Y position of each cell based on its "name" value
}
)
],
width: width, // set the Plot's width to the cell width (using Observable's builtin "width" value)
marginLeft: 160, // make room for the "name" labels on the Y axis at left
marginBottom: 50, // make room for the "run_number" labels on the X axis at bottom
x: { tickRotate: 45 } // rotate the X-axis labels for readability
})
Plot.plot({
marks: [
Plot.cell(testJobs, {
x: "run_number",
y: "name"
// TODO add a new channel here to visualize test conclusion as the cell's fill (color)
})
],
width: width,
marginLeft: 160,
marginBottom: 50,
x: { tickRotate: 45 }
})
Plot.plot({
marks: [
Plot.cell(testJobs, {
x: "run_number",
y: "name",
fill: "conclusion"
})
],
color: {
// TODO set color scale properties here
},
width: width,
marginLeft: 160,
marginBottom: 50,
x: { tickRotate: 45 }
})
Plot.plot({
marks: [
Plot.cell(testJobs, {
x: "run_number",
y: "name",
fill: "conclusion"
// TODO add new channel(s) here
})
],
color: {
domain: ["success", "failure", "cancelled"],
range: ["green", "red", "grey"]
},
width: width,
marginLeft: 160,
marginBottom: 50,
x: { tickRotate: 45 }
})
Plot.plot({
marks: [
Plot.cell(testJobs, {
x: "run_number",
y: "name",
fill: "conclusion",
fillOpacity: "minutes",
stroke: "conclusion"
// TODO add a title channel with a custom function
})
],
color: {
domain: ["success", "failure", "cancelled"],
range: ["green", "red", "grey"]
},
width: width,
marginLeft: 160,
marginBottom: 50,
x: { tickRotate: 45 }
})
finishedTests = Plot.plot({
marks: [
Plot.cell(testJobs, {
x: "run_number",
y: "name",
fill: "conclusion",
fillOpacity: "minutes",
stroke: "conclusion",
title: (d) => `${d.conclusion} after ${d.minutes.toFixed(2)} min`
})
],
color: {
domain: ["success", "failure", "cancelled"],
range: ["green", "red", "grey"]
},
width: width,
marginLeft: 160,
marginBottom: 50,
x: { tickRotate: 45 }
})
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.
