Creative Frontend Developer 👩🏻💻
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, {
y: "duration",
x: "timestamp",
fill: "path",
fillOpacity: 0.5,
title: (d) =>
[d.path, `${d.duration} ms`, `status ${d.status_code}`].join("\n")
}).plot({
width,
marginLeft: 80
})
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(", ")}`
selectedCodes
statusCodes = Array.from(new Set(apiLogData.map((d) => d.status_code))).sort()
Plot.dot(apiLogData.filter((d) => selectedCodes.includes(d.status_code)) , {
y: "duration",
x: "timestamp",
fill: "path",
fillOpacity: 0.5,
title: (d) =>
[d.path, `${d.duration} ms`, `status ${d.status_code}`].join("\n")
}).plot({
width,
marginLeft: 50
})
Inputs.table(pathSearch)
Plot.dot(pathSearch.filter((d) => selectedCodes.includes(d.status_code)) , {
y: "duration",
x: "timestamp",
fill: "path",
fillOpacity: 0.5,
title: (d) =>
[d.path, `${d.duration} ms`, `status ${d.status_code}`].join("\n")
}).plot({
width,
marginLeft: 50
})
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.
