chart = {
let svg = Plot.lineY(data, Plot.binX({y: "sum" },{
x: "time",
y: "value",
thresholds: d3.timeWeek
})).plot({ grid: true, marginLeft: 80 })
return svg
}
Plot.rectY(data, Plot.binX({y: "sum" }, {
x: "time",
y: "value",
fill: "checkpoint",
thresholds: d3.timeWeek
})).plot({ grid: true, marginLeft: 80 })
Plot.barX(data, Plot.groupY({x: "sum" }, {
x:"value",
y: "checkpoint",
fill: "checkpoint"
})).plot({
marginLeft: 150,
grid: true
})
Plot.areaY(data, Plot.stackY(Plot.binX({y: "sum" },{
x: "time",
y: "value",
fill: "checkpoint",
offset: "silhouette",
thresholds: d3.timeWeek
}))).plot({ grid: true, marginLeft: 100 })
Plot.barY(data, Plot.stackY(Plot.binX({y: "sum" },{
x: "time",
y: "value",
fill: "checkpoint",
offset: "silhouette",
thresholds: d3.timeMonth
}))).plot({
grid: true,
x: {
tickRotate: 90,
tickFormat: d => Plot.formatMonth()(d.getMonth()) + " " + d.getFullYear()
},
marginBottom: 100,
marginLeft: 100
})
Plot.barX(data, Plot.groupY({x: "sum" }, { x:"value", y: "checkpoint", fill: "checkpoint" })).plot({
marginLeft: 50,
facet: {
data,
x: d => d.time.getFullYear()
},
grid: true,
width
})
Plot.barX(data, Plot.stackY(Plot.groupY({x: "sum" }, {
x:"value",
y: "checkpoint",
fill: "checkpoint"
}))).plot({
marginLeft: 50,
facet: {
data,
y: d => d.time.getFullYear()
},
y: { axis: false },
grid: true
})
Plot.barY(data, Plot.groupX({y: "sum" }, {
y:"value",
x: d => d.time.getMonth()
})).plot({
marginLeft: 100,
facet: {
data,
y: d => d.time.getFullYear()
},
marks: [ Plot.frame({ stroke: "#aaa" }) ],
x: { tickFormat: Plot.formatMonth(), grid: true }
})
Plot.line(data, { x: "time", y: "value", stroke: "checkpoint" }).plot({ marginLeft: 100})
// this plots rolling average over last 7 days
Plot.line(data, Plot.windowY({ x: "time", y: "value", stroke: "checkpoint", k: 7 })).plot({ marginLeft: 100})
// data = d3.csv(url)
data = tidy(
await d3.csv(url),
pivotLonger({ cols: ['-Time','-Date','-Hour','-Total'], namesTo: 'checkpoint', valuesTo: 'value' }),
mutate({
time: d => d.Hour ? new Date(d.Date + "T" + d.Hour) : new Date(d.Date),
value: d => +d.value
})
).filter(d => d.time.getFullYear() > 2018)
Inputs.Table(data)
url = `https://raw.githubusercontent.com/mikelor/TsaThroughput/main/data/processed/tsa/throughput/TsaThroughput.${airport}.csv`
d3.extent(data, d => d.Date)
import {
tidy,
pivotLonger,
groupBy,
mutate,
distinct,
map,
summarize,
mean,
total
} from '@pbeshai/tidyjs'
d3 = require("d3@6")
Inputs = require("@observablehq/inputs@0.7")
Plot = require("@observablehq/plot@0.1")
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.
