Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
apiLogData = FileAttachment("apiLogData.json").json()
Inputs.table(apiLogData)
// TODO your code here
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(
[], // TODO replace this
{} // 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
viewof pathSearch = Inputs.search(
[] // TODO replace this
)
// TODO paste & update your plot here to connect it to the pathSearch filtered data array
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,
x: { axis: null },
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.
