md`# Patterns for extending traffic accident dataset`
vegalite = require("@observablehq/vega-lite@0.2")
data = FileAttachment("drivers.csv").text()
md`## filter = ${filter}`
viewof filter = html`<input type=range min=20 max=50 step=5>`
vegalite({
data: {
values: data,
format: { type: 'csv' }
},
width: 750,
// height: 750,
layer: [
{
mark: "bar",
transform: [
{
filter: {
field:
"Percentage Of Drivers Involved In Fatal Collisions Who Were Alcohol-Impaired",
gte: filter
}
}
],
encoding: {
x: {
field: "State",
type: "ordinal"
},
y: {
field:
"Number of drivers involved in fatal collisions per billion miles",
type: "quantitative"
},
tooltip: {
field:
"Percentage Of Drivers Involved In Fatal Collisions Who Were Alcohol-Impaired",
type: "quantitative"
}
}
}
// {
// mark: "bar",
// encoding: {
// x: {
// field: "State",
// type: "nominal"
// },
// y: {
// field:
// "Percentage Of Drivers Involved In Fatal Collisions Who Were Alcohol-Impaired",
// type: "quantitative"
// },
// color: {
// field: "State",
// type: "nominal"
// },
// opacity: { value: .75 }
// }
// }
]
})
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.
