I map 🗺️ & graph 📈 data 🈸
Published
Edited
Feb 25, 2019
1 fork
Importers
Daily Chicago Taxi TripsChicago Towed Vehicles SummaryChicago Towed VehiclesChicago Traffic Crash PlotsVega Viewer 📈Vega DatasetsChicago Crimes Arrow Data Vega-Lite API VizChicago Crimes Arrow Data Vega VizObserving Vega SignalsChicago Crimes by LocationChicago Community Areas VegaVega Fold Transform FixVega Notebooks
Chicago Crimes by Type
Also listed in…
Chicago Crimes
html `
<div>${Object.keys(crimeData)
.map(crimeType => textCloud(crimeData, crimeType))
.sort((a, b) => a.count - b.count)
.map(c => c.html)}
</div>
<h3>Total Crimes: ${Object.keys(crimeData)
.map(key => crimeData[key].length)
.reduce((total, num) => total + num)
.toLocaleString()}
</h3>
<hr />
`
function textCloud(data, crimeType) {
console.log('graphing', crimeType, '...');
const count = data[crimeType].length;
const div = html`<div style="display: inline-block; vertical-align: top; height: 30px; padding: 10px;">
<h5>
<b>${crimeType}</b>
(${count.toLocaleString()})
</h5>
</div>`;
return {html: div, count};
}
monthlyCrimeData = Object.keys(crimeData)
.map(crimeType => {
return {'crimeType': crimeType, 'monthly': groupByMonth(crimeData, crimeType)};
})
// note: this is monthly hacky AF! :(
function groupByMonth(data, groupField) {
let monthly = {};
data[groupField].map(data => {
const month = data.date.getMonth();
if (month <= months.length) {
if (!monthly[months[month]]) {
monthly[months[month]] = [];
}
monthly[months[month]].push(data);
}
});
return monthly;
}
theft = plotMonthlyData(crimeData['THEFT'], 'theft')
function plotMonthlyData(data, type, width=180, height=180) {
return vegalite({
data: {values: data},
mark: 'bar',
width: width,
height: height,
encoding: {
x: {timeUnit: 'month', field: 'date', type: 'ordinal',
axis: {title: `${type.toLowerCase()} (${data.length.toLocaleString()})`}
},
y: {aggregate: 'count', field: '*', type: 'quantitative',
axis: {title: false}
},
color: {value: '#30a2da'}
},
});
}
crimeData = groupByField(dataTable, 'PrimaryType')
function groupByField(data, groupField) {
let groupData, date, location, arrested, info, results = {};
const dateFilter = arrow.predicate.custom(i => {
const date = toDate(data.getColumn('Date').get(i));
return (date.getMonth() <= months.length);
}, 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['date'] = toDate(date(index));
dataRecord['location'] = location(index);
dataRecord['arrested'] = arrested(index);
dataRecord['info'] = info(index);
results[groupFieldData].push(dataRecord);
}, (batch) => {
groupData = arrow.predicate.col(groupField).bind(batch);
date = arrow.predicate.col('Date').bind(batch);
location = arrow.predicate.col('LocationDescription').bind(batch);
arrested = arrow.predicate.col('Arrest').bind(batch);
info = arrow.predicate.col('Description').bind(batch);
});
return results;
}
import {loadData, range, getMarkdown, toDate} from '@randomfractals/apache-arrow'
arrow = require('apache-arrow@0.3.1')
vegalite = require("@observablehq/vega-lite@0.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.
