The end-to-end solution for building and hosting better data apps, dashboards, and reports.
wb = FileAttachment("Laser_Report_2020.xlsx").xlsx()
lasers = wb.sheet(0, { headers: true }) // headers: true treats the first row as the column headers
Inputs.table(lasers)
Plot.plot({
marks: [
Plot.rectY(
lasers,
Plot.binX(
{ y: "count" }, // count number of incidents per week
{
x: "Incident Date",
fill: (d) => d.Injury.trim(), // remove extra spaces from entries
thresholds: d3.utcWeek // bin the incidents by week
}
)
),
Plot.ruleY([0])
],
color: { legend: true }
})
zip = FileAttachment("Lasers@1.zip").zip();
viewof filename = Inputs.select(zip.filenames, {label: "Select a file"})
{
const workbook = await zip.file(filename).xlsx();
if(filename === "Laser-Report-2021-FINAL.xlsx")
return workbook.sheet(0, { range: "A2:J", headers: true}); // skip the first row for 2021
return workbook.sheet(0, { headers: true});
}
fiveyears = {
let data = []
for( let filename of zip.filenames) {
const workbook = await zip.file(filename).xlsx();
if(filename === "Laser-Report-2021-FINAL.xlsx") {
data = data.concat(workbook.sheet(0, { range: "A2:J", headers: true})); // skip the first row (it just says)
} else {
data = data.concat(workbook.sheet(0, { headers: true}));
}
}
data = data.filter(d => d.City && d.State && typeof(d.City) === "string"); // make sure all fields are there and make sense
data = data.map(d => { // remove leading and trailing spaces from all place names
return {
...d,
City: d.City.trim(),
State: d.State.trim()
}
});
return data
}
Plot.plot({
marks: [
Plot.barX(fiveyears, Plot.groupY({x: "count"}, { y: "State", fill: d => d["Incident Date"].getFullYear() + "", sort: {y: "x", reverse: true, limit: 20}})),
Plot.text(fiveyears, Plot.groupY({x: "count", text: "count"}, { y: "State", frameAnchor: "left", dx: 5})),
Plot.ruleX([0])
],
marginLeft: 100,
marginRight: 50,
color: { legend: true, type: "categorical" },
})
Plot.plot({
marks: [
Plot.rectY(fiveyears, Plot.binX({y: "count"}, {x: "Incident Date", fill: "Injury", thresholds: d3.utcMonth})),
Plot.ruleY([0])
],
color: { legend: true }
})
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.
