Public
Edited
Jun 22
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;
})
crimes
Type Table, then Shift-Enter. Ctrl-space for more options.
map_view = {const map = vl.markGeoshape({stroke: "white", fill: "#ccc"})
.data(vl.topojson(topo).feature("chicago_neighborhoods"))
//.encode(
//vl.shape().field("geometry")
//)
const circles = vl.markCircle({size: 30, opacity: 0.7})
.data(crimes)
.encode(
vl.longitude().fieldQ("Longitude"),
vl.latitude().fieldQ("Latitude"),
vl.color().fieldN("Primary Type")
)
return vl.layer(map,circles).title(null)
.project({type: "identity", reflectY: true})
.width(width*0.4)
.height(500)
}
crimeplots = {
const crimesbytype = vl.markBar().title("Number of Crimes by Type")
.data(crimes).encode(
vl.x().fieldN('Primary Type').title('Primary Type'),
vl.y().count().title(null), vl.color().fieldN('Primary Type')
).width(width*0.4 - 20).height(200);
const crimesbyday = vl.markLine().title("Number of Crimes by Day")
.data(crimes).encode(
vl.x().fieldT('Date').timeUnit("yearmonthdate").axis({
title: "Date (month-date)",
format: "%b %d",
formatType: "time"
}),
vl.y().count().title(null),vl.color().fieldN('Primary Type')
).width(width*0.4 - 20).height(150);
return vl.hconcat(map_view,vl.vconcat(crimesbytype,crimesbyday)).render();}
import {vl} from '@vega/vega-lite-api-v5'
embed = require("vega-embed@3")
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.
