Public
Edited
May 15
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;
})
{
const crimeBarChart = vl.markBar()
.data(crimes)
.title('Number of Crimes by Type')
.encode(
vl.y().count('id').title(null),
vl.x().fieldN('Primary Type').title('Primary Type'),
vl.color()
.fieldN('Primary Type')
.title('Crime Type')
.legend({ symbolType: 'circle' })
.scale({
domain: ['BURGLARY', 'HOMICIDE', 'ROBBERY'],
range: ['#FFD700', '#FF0000', '#3D72D6']})
)
.width((width/4 - 130)*2)
.height(225)
const cDayLineChart = vl.markLine()
.data(crimes)
.title('Number of Crimes by Day')
.encode(
vl.y().count().title(null),
vl.x().fieldT('Date').timeUnit("monthdate").title('Date (month-date)'),
vl.color().fieldN('Primary Type')
)
.width((width/4 - 130)*2)
.height(150)
return vl.hconcat(map_view, vl.vconcat(crimeBarChart,cDayLineChart))
.title({text:'Crimes in Chicago in April 2025', fontSize: 27, font: 'Times New Roman', fontWeight: 'bold'})
.resolve({scale: {size: 'independent'}})
.render();
}
import {vl} from '@vega/vega-lite-api-v5'
map_view = {
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(topo). feature('chicago_neighborhoods'))
const circles = vl.markCircle({
fillOpacity: 0.8,
stroke: '#777777',
strokeWidth: 1,
strokeOpacity: 0.8
})
.data(crimes)
.encode(
vl.latitude().fieldQ('Latitude'),
vl.longitude().fieldQ('Longitude'),
vl.color()
.fieldN('Primary Type')
.scale({
domain: ['BURGLARY', 'HOMICIDE', 'ROBBERY'],
range: ['#FFD700', '#FF0000', '#3D72D6']})
)
return vl.layer(map, circles)
.width(width*0.25)
.height(500)
//.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.
