The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Jul 19, 2022
6 stars
import {laserStrikesCleaned as laserStrikes} from "@observablehq/excel-add-columns"
Plot.plot({
marks: [
Plot.barY(laserStrikes, Plot.groupX({y: "count"}, {x: "State", sort: {x: "y", reverse: true, limit: 10},
fill: "steelblue"})),
Plot.ruleX([0])
],
width: 800
})
Plot.plot({
marks: [
Plot.barY(laserStrikes, Plot.groupX({y: "count"}, {x: "State", sort: {x: "y", reverse: true, limit: 10},
fill: "steelblue"})),
Plot.ruleX([0])
],
facet: {
data: laserStrikes,
y: "year"
},
width: 800
})
Plot.plot({
marks: [
Plot.barY(laserStrikes, Plot.groupX({y: "count"}, {x: "Airport", sort: {x: "y", reverse: true, limit: 10},
fill: "steelblue"})),
Plot.ruleX([0])
],
width: 800
})
strikesByAirport = d3.groups(laserStrikes, d => d.Airport)
.map(d => {
return {
airport: d[0],
strikes: d[1].length,
traffic: d[0] in usAirports ? usAirports[d[0]].Enplanements : 0,
name: d[0] in usAirports ? usAirports[d[0]].Airport : ''
}
}).filter(d => d.traffic > 0)
Plot.plot({
marks: [
Plot.dot(strikesByAirport, {x: "traffic", y: "strikes", title: d => `${d.name} (${d.airport})`,
r: 5, fill: "steelblue"})
]
})
usAirports = {
const replaceAllCommas = /,/g;
let list = (await FileAttachment("us-airports.csv").csv()).map(d => {
return {
...d,
Enplanements: +(d.Enplanements.replace(replaceAllCommas, ''))
};
});
let airports = {};
for (let row of list) {
if (row.FAA) {
airports[row.FAA] = row;
}
}
return airports;
}
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.
