Public
Edited
May 15
Insert cell
Insert cell
Insert cell
topo = FileAttachment("chicagoNeighborhoods.json").json()
Insert cell
Insert cell
crimes
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
width = 620
Insert cell
height = 390
Insert cell
Insert cell
dashboardChicago = {
const crimesBar = vl.markBar()
.data(crimes)
.title("Number of crimes by type")
.encode(
vl.x().fieldN("Primary Type"),
vl.y().count().title(null),
vl.color().fieldN("Primary Type")
).width(width/2).height(height/2)
const crimesLine = vl.markLine()
.title("Number of Crimes by Day")
.data(crimes)
.encode(
vl.x().fieldT("Date").timeUnit("datemonth").title("Date (month-date)"),
vl.y().count().title(null),
vl.color().fieldN("Primary Type").scale({
domain: ["BURGLARY", "HOMICIDE", "ROBBERY"],
range: ["#ffd100", "#ff0000", "#3567d0"]})
).width(width/2).height(height/2)

return vl.hconcat(
crimesMap, vl.vconcat( crimesBar,crimesLine))
.title({text:"Crimes in Chicago in April 2025",
fontSize: 25
})
.render()
}
Insert cell
crimesMap =
{ const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(topo). feature('chicago_neighborhoods' ))

const circles = vl.markCircle({
stroke: "black",
strokeWidth: 1,
strokeOpacity: 0.5
})
.data(crimes)
.encode(
vl.latitude().fieldQ('Latitude'),
vl.longitude().fieldQ('Longitude'),
vl.color().fieldN("Primary Type")
)
return vl.layer(map, circles)
.project(
vl.projection('Mercator')
).width(width/2).height(height)
}
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
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