The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Pizza ParadiseUSAFacts Higher Education DataStack Overflow Developer Survey DataMonthly Retail Trade Report DataCurated datasetsStreetEasy Real Estate DataVisualization Publication DatasetDarkCideS: Bats in Caves DataThe MoMA Collection DataU.S. Geographic DataPlot Test DataNOAA Hourly Weather DataEIA Electricity DataBandcamp Sales DataGoogle Merchandise Sales Data
FAA Laser Reports Data
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 }
})
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.