topo = FileAttachment("chicagoNeighborhoods.json").json()
crimes = FileAttachment("crimes_chicago_2022_august@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
const parseDate = d3.timeParse("%m/%d/%Y %I:%M:%S %p");
data.forEach(function(d) {
d.Date = parseDate(d.Date);
});
return data;
})
Inputs.table(selected, {columns:["ID", "Case", "Date", "Block", "IUCR", "Primary Type", "Description", "Location", "Year"], sort:"origintime"})
map_view = {
const colors = {
domain: ["BURGLARY", "HOMICIDE", "ROBBERY"],
range: ["#FFD701", "#FF2200", "#3C72D6"]
};
const map = vl.markGeoshape({ fill: "#ddd", stroke: "#fff", strokeWidth: 1 })
.data(vl.topojson(topo).feature("chicago_neighborhoods"));
const circles = vl.markCircle({
fillOpacity: 0.5,
stroke: "#008246",
strokeWidth: 1,
strokeOpacity: 0.7,
})
.data(crimes)
.transform(vl.filter(brush))
.encode(
vl.latitude().fieldQ("Latitude"),
vl.longitude().fieldQ("Longitude"),
vl.color().fieldN("Primary Type").scale(colors),
vl.tooltip([
{field: 'Primary Type' },
{field: 'Date', type:'temporal', format: '%y/%m/%d - %H:%M'},
])
)
return vl.layer(map, circles)
.width(width / 3)
.height(600)
}
brush = vl.selectInterval().name('brush').encodings('x')
signal = 'brush'
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);
})
import {vl} from '@vega/vega-lite-api-v5'
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.
