I map 🗺️ & graph 📈 data 🈸
Chicago Crimes Arrow Data Vega-Lite API VizChicago Crimes Arrow Data Vega VizChicago Crimes EDAChicago Crimes TreemapChicago Crimes Hexgrid MapChicago Crimes RidgelineChicago Crimes Apache Arrow HypergridChicago Crimes by DayChicago Crimes Sunburst, 2018Chicago Crimes by LocationChicago Crimes by Ward FlubberChicago Crimes in PerspectiveChicago Crimes by TypeChicago Crimes HeatmapLeaflet Pixi Overlay
Chicago Crimes Sankey
data = {return {'nodes': nodeNames, 'links': nodeLinks}}
crimeData = groupByField(dataTable, 'PrimaryType')
locationData = groupByField(dataTable, 'LocationDescription')
assaults = groupChildren(crimeData['ASSAULT'], 'location')
crimeByLocation = Object.keys(crimeData)
.map(crimeType => {
return {
'crimeType': crimeType.toLowerCase(),
'locations': groupChildren(crimeData[crimeType], 'location'),
'count': crimeData[crimeType].length
};
})
.sort((a, b) => b.count - a.count)
nodeNames = crimeByLocation
.slice(0, 10) // top 10 crimes
.map(crime => {
return {'name': crime.crimeType.toLowerCase()};
})
.concat(Object.keys(locationData)
.map(location => {
return {'name': location.toLowerCase(), 'count': locationData[location].length};
})
.sort((a, b) => b.count - a.count)
.slice(0, 10) // top 10 locations
)
nodeLinks = {
const nodeNameMap = {};
for (let i=0; i < nodeNames.length; i++) {
nodeNameMap[nodeNames[i].name] = i;
}
const links = [];
crimeByLocation.forEach(crime => {
const src = nodeNameMap[crime.crimeType];
if (src && src !== undefined) {
crime.locations.forEach(location => {
const target = nodeNameMap[location.name];
if (target && target !== undefined) {
links.push({'source': src, 'target': target, 'value': location.size});
}
});
}
});
return links;
}
function groupByField(data, groupField) {
let groupData, location, results = {};
const dateFilter = arrow.predicate.custom(i => {
const date = toDate(data.getColumn('Date').get(i));
return (date.getMonth() <= 6); // through June
}, b => 1);
data.filter(dateFilter)
.scan((index) => {
const groupFieldData = groupData(index);
const groupArray = results[groupFieldData];
if (!groupArray) {
results[groupFieldData] = [];
}
const dataRecord = {};
dataRecord[groupField] = groupFieldData;
dataRecord['location'] = location(index);
results[groupFieldData].push(dataRecord);
}, (batch) => {
groupData = arrow.predicate.col(groupField).bind(batch);
location = arrow.predicate.col('LocationDescription').bind(batch);
});
return results;
}
dataTable = loadData(dataUrl).then(buffer => arrow.Table.from(new Uint8Array(buffer)))
import {loadData, toDate} from '@randomfractals/apache-arrow'
import {groupChildren} from '@randomfractals/chicago-crimes-sunburst'
arrow = require('apache-arrow@0.3.1')
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.
