import {vl} from '@vega/vega-lite-api-v5'
topo = FileAttachment("chicagoNeighborhoods.json").json()
viewof dashboard = {
const crimeBarChart = vl.markBar()
.encode(
vl.x().fieldN("Primary Type").title("Primary Type"),
vl.y().count("Primary Type").title(null),
vl.color().fieldN('Primary Type').scale({
domain: ['BURGLARY', 'HOMICIDE', 'ROBBERY'],
range: ['#f72585','#7209b7','#3a0ca3']
})
)
const crimeBarChartLayer = vl.layer(
crimeBarChart.params(brush).encode(vl.color().value('lightgrey')),
crimeBarChart.transform(vl.filter(brush))
)
.title("Number of Crimes by Type")
.data(crimes)
.width(width*0.4)
.height(200)
const crimeLineChart = vl.markLine()
.encode(
vl.x().fieldT("Date").timeUnit("datemonth").title("Date (month-date)"),
vl.y().count("Date").title(null),
vl.color().fieldN('Primary Type')
)
const crimeLineChartLayer = vl.layer(
crimeLineChart.params(brush).encode(vl.color().value('lightgrey')),
crimeLineChart.transform(vl.filter(brush))
)
.title("Number of Crimes by Day")
.data(crimes)
.width(width*0.4)
.height(150)
return vl.hconcat(map_view, vl.vconcat(crimeBarChartLayer,crimeLineChartLayer))
.resolve({scale: {size: 'independent'}})
.title({text: "Crimes in Chicago in August 2022", fontSize: 25})
.render();
}
Inputs.table(selected, {columns:["Date","Primary Type","Description","Location Description","Latitude","Longitude"], sort:"Date"})
selected = Generators.observe((notify) => {
const selected = (selection, predicates) => {
const within = crimes.filter(d => {
for (const [key, [val]] of Object.entries(predicates))
if (d[key] !== val)
return false;
return true;
})
notify(within);
}
dashboard.addSignalListener(signal, selected);
return () => dashboard.removeEventListener(signal, selected);
})
brush = vl.selectInterval().name('brush').encodings('x').resolve('intersect')
map_view = {
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(topo).feature('chicago_neighborhoods'))
const circles = vl.markCircle({
size: 30,
fillOpacity: 0.75,
stroke: '#737373',
strokeWidth: 0.75,
})
.data(crimes)
.transform(vl.filter(brush))
.encode(
vl.latitude().fieldQ('Latitude'),
vl.longitude().fieldQ('Longitude'),
vl.color().fieldN('Primary Type'),
vl.tooltip([{field: 'Primary Type'},
{field: 'Date', type: 'temporal', format: '%B %dth, %Y (%H:%M)'}])
)
return vl.layer(map, circles)
.width(width*0.35)
.height(500)
}
signal = 'brush'
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.
