Public
Edited
May 21
topo = FileAttachment("chicagoNeighborhoods.json").json()
crimes = FileAttachment("chicago_crimes_april_2025@1.csv").csv({typed: true}).then(function (data) {
// The date has a special formating not automatically detected by d3,
// so we need to parse it using UTC rather than local time
const parseDate = d3.utcParse("%m/%d/%Y %I:%M:%S %p");
data.forEach(function(d) {
d.Date = parseDate(d.Date);
});
return data;
})
import {vl} from '@vega/vega-lite-api-v5'
oxe = {
const colors = {
domain: ["BURGLARY", "HOMICIDE", "ROBBERY"],
range: ["#FFD700", "#FF0000", "#3D72D6"]
};
const map = vl
.markGeoshape({ fill: "#ddd", stroke: "#fff", strokeWidth: 1 })
.data(vl.topojson(topo).feature("chicago_neighborhoods"));
const circles = vl
.markCircle({
fillOpacity: 0.9,
strokeWidth: 1,
strokeOpacity: 0.7,
stroke: "#636870"
})
.data(crimes)
.encode(
vl.latitude().fieldQ("Latitude"),
vl.longitude().fieldQ("Longitude"),
vl.color().fieldN("Primary Type").scale(colors)
);
const crimeMap = vl
.layer(map, circles)
.project(vl.projection("transverseMercator").rotate([88, 40]))
.width(width * 0.3)
.height(450);
const barChart = vl
.markBar({})
.data(crimes)
.encode(
vl.x().fieldN("Primary Type").title("Primary Type"),
vl.y().count().title(null),
vl.color().fieldN("Primary Type").scale(colors)
)
.width(300)
.height(200)
.title("Number of Crimes by Type");
const lineChart = vl
.markLine()
.data(crimes)
.encode(
vl.x().timeMD("Date").title("Date (month-date)"),
vl.y().count().title(null).axis({ tickCount: 3 }),
vl.color().fieldN("Primary Type").scale(colors).title("Crime Type")
)
.width(300)
.height(150)
.title("Number of Crimes by Day");
return vl.hconcat(crimeMap, vl.vconcat(barChart, lineChart)).render();
}
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.
