Public
Edited
May 30
Insert cell
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
Insert cell
FileAttachment("allegations_202007271729.csv")
Insert cell
data = await FileAttachment("allegations_202007271729.csv").csv({typed: true})
Insert cell
data.slice(0, 5)
Insert cell
Object.keys(data[0])
Insert cell
vl.markLine()
.data(data)
.encode(
vl.x().fieldT("year_received").title("Year").axis({ format: "d" }),
vl.y().aggregate("count").title("Number of Complaints")
)
.width(400)
.height(300)
.title("Complaints Over Time (Line Chart)")
.render()
Insert cell
Insert cell
vl.markBar()
.data(data)
.encode(
vl.x().fieldN("mos_gender").title("Officer Gender"),
vl.y().aggregate("count").title("Number of Complaints"),
vl.color().fieldN("mos_gender").legend({ title: "Officer Gender" })
)
.width(300)
.height(300)
.title("Complaint Counts by Officer Gender (Color Encoding)")
.render()
Insert cell
Insert cell
years = [...new Set(data.map(d => d.year_received))].sort()
Insert cell
yearSelect = vl.param("year").value(years[0]).bind(vl.menu(years))
Insert cell
vl.markBar()
.data(data)
.params(yearSelect)
.transform(vl.filter(vl.expr("datum.year_received == year")))
.encode(
vl.x(vl.fieldN("rank_now")).title("Officer Rank"),
vl.y(vl.aggregate("count")).title("Number of Complaints"),
vl.color(vl.fieldN("rank_now")).legend({ title: "Rank" }),
vl.tooltip([
vl.fieldN("rank_now").title("Rank"),
vl.aggregate("count").title("Complaints")
])
)
.width(400)
.height(300)
.title("Complaints by Officer Rank (Filtered by Year)")
.render()
Insert cell
Insert cell
Insert cell

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.
Learn more