apiLogData = (await FileAttachment("apiLogData.json").json()) // Load & parse the JSON file
.map((d) => ({ ...d, timestamp: new Date(d.timestamp) })) // Convert string timestamps to Date objects
Inputs.table(apiLogData)
// TODO your code here
Plot.dot(apiLogData, {
x: "timestamp",
y: "duration",
fill: "path",
fillOpacity: 0.5,
r: "status_code",
title: ({ duration, status_code, path }) =>
[path, `duration: ${duration}ms`, `status: ${status_code}`].join("\n"),
}).plot({
width,
height: width / 2,
x: { axis: null, grid: true },
y: { grid: true },
})
viewof favColors = Inputs.checkbox(
["red", "orange", "yellow", "green", "blue", "purple"],
{ label: "Colors I like:" }
)
favColors
favColors.map((s) => s.toUpperCase())
`I like the colors ${favColors.join(", ")}`
viewof selectedCodes = Inputs.checkbox(
statusCodes, // TODO replace this
{
label: "Selected status codes to include:",
value: statusCodes,
} // TODO optionally set options here
)
selectedCodes
statusCodes = Array.from(new Set(apiLogData.map((d) => d.status_code))).sort()
// TODO copy your plot code here
// then update it to only plot responses with the selected status codes
Plot.dot(apiLogData.filter((d) => selectedCodes.includes(d.status_code)), {
x: "timestamp",
y: "duration",
fill: "path",
fillOpacity: 0.5,
r: "status_code",
title: ({ duration, status_code, path }) =>
[path, `duration: ${duration}ms`, `status: ${status_code}`].join("\n"),
}).plot({
width,
height: width / 2,
x: { axis: null, grid: true },
y: { grid: true },
})
viewof pathSearch = Inputs.search(
apiLogData.filter((d) => selectedCodes.includes(d.status_code)) // TODO replace this
)
Inputs.table(pathSearch) // Displays the data found by pathSearch, for reference
// TODO paste & update your plot here to connect it to the pathSearch filtered data array
Plot.dot(pathSearch, {
x: "timestamp",
y: "duration",
fill: "path",
fillOpacity: 0.5,
r: "status_code",
title: ({ duration, status_code, path }) =>
[path, `duration: ${duration}ms`, `status: ${status_code}`].join("\n"),
}).plot({
width,
height: width / 2,
x: { axis: null, grid: true },
y: { grid: true },
})
viewof finishedSelectedCodes = Inputs.checkbox(statusCodes, {
value: statusCodes
})
viewof finishedPathSearch = Inputs.search(apiLogData)
// One possible solution; yours may differ!
finishedResponses = Plot.dot(
finishedPathSearch.filter((d) =>
finishedSelectedCodes.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,
marginLeft: 50
})
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.
