Engineer & data visualization lover | Tae Bo Enthusiast
Public
Edited
Apr 13, 2023
Overview
Project: Are test passing?
githubtestjobs = FileAttachment("githubTestJobs.json").json()
Inputs.table(githubtestjobs)
Plot.plot({
marks: [
Plot.cell(
githubtestjobs,
{
x:"run_number",
y:"name"
}
)
],
width: width, // cell width
marginLeft: 160,
marginBottom: 50,
x: { tickRotate: -45} // x-labels rotation
}
)
Plot.plot({
marks: [
Plot.cell(
githubtestjobs,
{
x:"run_number",
y:"name",
// colors
fill:"conclusion"
}
)
],
width: width, // cell width
marginLeft: 160,
marginBottom: 50,
x: { tickRotate: -45} // x-labels rotation
}
)
Scales configure channel's input(domain) and output(range). Scale your colors to overwrite the default colors
Plot.plot({
marks: [
Plot.cell(
githubtestjobs,
{
x:"run_number",
y:"name",
fill:"conclusion"
}
)
],
// adding scales
color: {
domain: ['failure', 'success', 'cancelled'],
range: ['red', 'green', 'grey']
},
width: width, // cell width
marginLeft: 160,
marginBottom: 50,
x: { tickRotate: -45} // x-labels rotation
}
)
Use fillOpacity to visualize test duration. The longer the darker
Plot.plot({
marks: [
Plot.cell(
githubtestjobs,
{
x:"run_number",
y:"name",
fill:"conclusion",
fillOpacity: "minutes",
// to manage white colors
stroke: "conclusion"
}
)
],
color: {
domain: ['failure', 'success', 'cancelled'],
range: ['red', 'green', 'grey']
},
width: width,
marginLeft: 160,
marginBottom: 50,
x: { tickRotate: -45}
}
)
Add tooltips
Plot.plot({
marks: [
Plot.cell(
githubtestjobs,
{
x:"run_number",
y:"name",
fill:"conclusion",
fillOpacity: "minutes",
stroke: "conclusion",
// add tooltips
title: (o) => `${o.conclusion} after ${o.minutes.toFixed(1)} min`
}
)
],
color: {
domain: ['failure', 'success', 'cancelled'],
range: ['red', 'green', 'grey']
},
width: width,
marginLeft: 160,
marginBottom: 50,
x: { tickRotate: -45}
}
)
Analytics
Project: What size of devices are users browsing with?
deviceAnalytics = FileAttachment("device-analytics.csv").csv()
deviceAnalytics[0]
Doing some data wrangling to split Resolution
devices = deviceAnalytics.map((d) => {
let [Width, Height] = d.Resolution.split("x")
return {
Device: d.Device,
Resolution: d.Resolution,
Width: +Width, // + to convert strings to numbers
Height: +Height,
Users: d.Users,
Sessions: d.Sessions
}
})
Inputs.table(devices)
Aggregations
// Plot.markType(...).plot(options) ≃ o Plot.plot({marks:[Plot.markType(...)], ... options})
// use barY with groupX or barX with groupY
Plot.barY(
devices,
Plot.groupX(
{y: "count"}, // set the type of aggregation
{x: "Device"}
)
).plot({
marginLeft: 50
})
Plot.barY(
devices,
Plot.groupX(
{y: "sum", title: "sum"}, // outputs and which type of aggregation
{x: "Device", y: "Users", title: "Users", fill: "Device"} // inputs
)
).plot({
marginLeft: 100
})
Plot.dot(devices, {
x: "Width",
y: "Height",
fill: "Device",
fillOpacity: "Sessions",
r: ({Sessions}) => Math.log(Sessions),
title: ({Resolution, Sessions}) => [Resolution, Sessions].join(":")
}).plot({
// default values
width,
height: width * 0.5,
x: {grid: true, domain: [0, 4200]},
y: {grid: true, domain: [0, 2600]},
opacity: {type: "log"} // Mantiene visibles los puntos pequeños
})
Separate in facets or small multiples. Overlapped points maintain.
Plot.dot(devices, {
x: "Width",
y: "Height",
fill: "Device",
fillOpacity: "Sessions",
r: ({Sessions}) => Math.log(Sessions),
title: (d) => `Resolución: ${d.Resolution} con ${d.Sessions} sesiones`
}).plot({
width,
height: width * 0.5,
x: {grid: true, domain: [0, 4200]},
y: {grid: true, domain: [0, 2600]},
opacity: {type: "log"}, // Mantiene visibles los puntos pequeños
facet: {data: devices, x: "Device"}, // the code for divide x by type of device
})
apiLogData = (await FileAttachment("apiLogData.json").json())
.map((d) => ( { ...d, timestamp: new Date(d.timestamp) })) // Convert string timestamps to Date objects
Inputs.table(apiLogData)
Plot.dot(apiLogData, {
x: "timestamp",
y: "duration",
fill: "path",
fillOpacity: 0.5,
title: (d) => [d.path, `${d.duration} ms`, `status ${d.status_code}`].join("\n")
}).plot({
width,
height: width * 0.5,
marginLeft: 50
})
Adding interactivity
viewof favColors = Inputs.checkbox(["red", "orange", "yellow", "green", "blue", "purple"],
{label: "Color I like:"} )
Plot.dot(apiLogData.filter((d) => selectedCodes.includes(d.status_code)), {
x: "timestamp",
y: "duration",
fill: "path",
fillOpacity: 0.5,
title: (d) => [d.path, `${d.duration} ms`, `status ${d.status_code}`].join("\n")
}).plot({
width,
height: width * 0.5,
marginLeft: 50
})
Adding to search by text too
viewof pathSearch = Inputs.search(apiLogData)
Inputs.table(pathSearch)
Plot.dot(pathSearch.filter((d) => selectedCodes.includes(d.status_code)), {
x: "timestamp",
y: "duration",
fill: "path",
fillOpacity: 0.5,
title: (d) => [d.path, `${d.duration} ms`, `status ${d.status_code}`].join("\n")
}).plot({
width,
height: width * 0.5,
marginLeft: 50
})
Wrapping up
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.