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)
Plot.dot(apiLogData, {
x: 'timestamp',
y: 'duration',
fill: 'path',
fillOpacity: 0.75,
title: (d) => [d.path, `${d.duration} ms`, `status ${d.status_code}`].join("\n")
}).plot({
width,
height: width * 0.4,
marginLeft: 50
})
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, { value: statusCodes })
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
)
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
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
})
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.