topo = FileAttachment("chicagoNeighborhoods.json").json()
crimes = FileAttachment("chicago_crimes_august_2023@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'
height = 400
width = 700
colors = {
return {
domain: ['ROBBERY', 'BURGLARY', 'HOMICIDE'],
range: ['blue', 'yellow', 'red']
}
}
highlight = vl.selectSingle('Primary Type').encodings(['x']);
crime_area = {
const area = vl.markGeoshape({fill: 'gray'})
.data(vl.topojson(topo).feature('chicago_neighborhoods'))
const circles = vl.markCircle()
.data(crimes)
.encode(
vl.latitude().fieldQ('Latitude'),
vl.longitude().fieldQ('Longitude'),
vl.color().fieldN('Primary Type').scale(colors),
vl.opacity().if(highlight, vl.value(1)).value(0.1),
vl.tooltip([{field: 'Primary Type'}, {field: 'Date', type: 'temporal', format: '%d/%m/%y - [%H:%M]'}])
)
return vl.layer(area, circles)
.project(vl.projection('transverseMercator').rotate([90, 90]))
.title("Crimes in Chicago")
.width(width/2).height(height)
}
crimes_per_occurrence = vl.markBar()
.data(crimes)
.select(highlight)
.encode(
vl.x().fieldN('Primary Type'),
vl.y().count().title("Numero"),
vl.color().fieldN('Primary Type').scale(colors),
vl.opacity().if(highlight, vl.value(1)).value(0.3),
)
.title('Occurrence of Crimes by type')
.width(width/2).height(height/2);
crime_per_day = vl.markLine()
.data(crimes)
.select(highlight)
.encode(
vl.x().date('Date')
.timeUnit('datemonth')
.title('Date'),
vl.y()
.count()
.title("Occurrences"),
vl.color().fieldN('Primary Type').scale(colors),
vl.opacity().if(highlight, vl.value(1)).value(0.2),
)
.title('Crijme per day')
.width(width/2).height(height/2);
vl.hconcat(crime_area, vl.vconcat(crimes_per_occurrence, crime_per_day)).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.
