The avatar for @randomfractals
Taras Novak
I map 🗺️ & graph 📈 data 🈸
Published
Edited
Feb 25, 2019
Fork of Chicago crime map with [d3-hexgrid](https://github.com/larsvers/d3-hexgrid)
8 stars
Chicago Crimes
Chicago Crimes Arrow Data Vega-Lite API VizChicago Crimes Arrow Data Vega VizChicago Crimes EDAChicago Crimes Treemap
Chicago Crimes Hexgrid Map
Chicago Crimes RidgelineChicago Crimes Apache Arrow HypergridChicago Crimes by DayChicago Crimes SankeyChicago Crimes Sunburst, 2018Chicago Crimes by LocationChicago Crimes by Ward FlubberChicago Crimes in PerspectiveChicago Crimes by TypeChicago Crimes HeatmapLeaflet Pixi Overlay
Also listed in…
Maps
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
hexgrid = d3.hexgrid()
.extent([mapWidth, mapHeight])
.geography(geo)
.projection(projection)
.pathGenerator(path)
.hexRadius(blockRadius)
Insert cell
hexagons = hexgrid(data, ['index'])
Insert cell
grid = hexagons.grid
Insert cell
svg = drawHexgrid(data)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/2018/chicago-crimes-2018.arrow'
Insert cell
dataTable = loadData(dataUrl).then(buffer => arrow.Table.from(new Uint8Array(buffer)))
Insert cell
Insert cell
Insert cell
days = Math.ceil((endDate - startDate) / millisPerDay)
Insert cell
millisPerDay = 24 * 60 * 60 * 1000
Insert cell
function dayToDate(day) {
return new Date(startDate.getTime() + day*millisPerDay)
}
Insert cell
fields = dataTable.schema.fields.map(f => f.name)
Insert cell
data = filterData(dataTable, crimeType,
new Date(startDate.getTime() + startDay*millisPerDay),
new Date(startDate.getTime() + endDay*millisPerDay))
Insert cell
function filterData(dataTable, crimeType, startDate, endDate) {
let lat, lng, block, type, info, date, results = [];
const dataFilter = arrow.predicate.custom(i => {
const date = toDate(dataTable.getColumn('Date').get(i));
const primaryType = dataTable.getColumn('PrimaryType').get(i);
return date >= startDate && date <= endDate &&
(crimeType === '' || primaryType === crimeType);
}, b => 1);
dataTable.filter(dataFilter)
.scan((index) => {
results.push({
'lat': lat(index),
'lng': lng(index),
index,
//'info': `${block(index)}<br />${type(index)}<br />${info(index)}<br />${toDate(date(index)).toLocaleString()}`
});
}, (batch) => {
lat = arrow.predicate.col('Latitude').bind(batch);
lng = arrow.predicate.col('Longitude').bind(batch);
block = arrow.predicate.col('Block').bind(batch);
type = arrow.predicate.col('PrimaryType').bind(batch);
info = arrow.predicate.col('Description').bind(batch);
date = arrow.predicate.col('Date').bind(batch);
}
);
return results;
}
Insert cell
function getDataPoints(mapPoints) {
const dataPoints = [];
mapPoints.map(point => {
const dataRow = dataTable.get(point.index);
const dataPoint = {
// from fields
block: dataRow.get(2),
location: dataRow.get(3).toLowerCase(),
type: dataRow.get(4),
info: dataRow.get(5).toLowerCase(),
arrested: dataRow.get(6),
domestic: dataRow.get(7),
date: toDate(dataRow.get(9))
}
dataPoints.push(dataPoint);
});
return dataPoints;
}
Insert cell
Insert cell
d3 = require('d3-fetch', 'd3-geo', 'd3-geo-projection', 'd3-hexgrid',
'd3-scale', 'd3-scale-chromatic', 'd3-format', 'd3-time-format', 'd3-array', 'd3-selection')
Insert cell
arrow = require('apache-arrow@0.3.1')
Insert cell
import {loadData, toDate} from '@randomfractals/apache-arrow'
Insert cell
import {slider, select} from "@jashkenas/inputs"
Insert cell

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.
Learn more