I map 🗺️ & graph 📈 data 🈸
Published
Edited
Oct 11, 2020
19 stars
deckgl = {
return new deck.DeckGL({
container: mapContainer,
map: mapboxgl,
mapboxAccessToken: 'pk.eyJ1IjoiZGF0YXBpeHkiLCJhIjoiY2tnM3ZhZWJjMDE1ajJxbGY1eTNlemduciJ9.YZ9CJEza0hvAQmTRBhubmQ',
mapStyle: 'https://api.maptiler.com/maps/toner/style.json?key=bMizIsuAeRiZikCLHO9q',
latitude: 41.85,
longitude: -87.68,
zoom: 9,
minZoom: 8,
maxZoom: 15,
pitch: mapPitch
});
}
heatmap = {
const hexagonLayer = new deck.HexagonLayer({
id: 'heatmap',
colorRange,
data,
elevationRange: [0, 1000],
elevationScale: 20,
extruded: true,
getPosition: d => [d.lng, d.lat],
opacity: .2,
radius: blockRadius,
coverage: hexagonCoverage,
upperPercentile,
lightSettings,
pickable: true,
autoHighlight: true,
onHover: onHover,
onClick: onClick
});
deckgl.setProps({layers: [hexagonLayer]});
return hexagonLayer;
}
tooltip = mapContainer.querySelector('#tooltip')
function onHover (info) {
const {x, y, object} = info;
if (object) {
tooltip.style.left = `${x}px`;
tooltip.style.top = `${y}px`;
tooltip.innerHTML = `${object.points.length} crime reports`;
} else {
tooltip.innerHTML = '';
}
}
dataList = mapContainer.querySelector('.data-list')
function onClick(info) {
const mapPoints = info.object.points;
const dataPoints = getDataPoints(mapPoints);
dataList.innerHTML = dataPoints.reduce(
(html, d) => html +
`<hr>${d.block}<br />(${d.location})<br />${d.type}: ${d.info}<br />${d.date.toLocaleString()}`, ''
);
//console.log('clicked data points:', dataPoints);
}
dataTable = loadData(dataUrl).then(buffer => arrow.Table.from(new Uint8Array(buffer)))
data = filterData(dataTable, crimeType,
new Date(startDate.getTime() + startDay*millisPerDay),
new Date(startDate.getTime() + endDay*millisPerDay))
function dayToDate(day) {
return new Date(startDate.getTime() + day*millisPerDay)
}
dayToDate(1)
fields = dataTable.schema.fields.map(f => f.name)
function filterData(data, crimeType, startDate, endDate) {
let lat, lng, block, type, info, date, results = [];
const dataFilter = arrow.predicate.custom(i => {
const date = toDate(data.getColumn('Date').get(i));
const primaryType = data.getColumn('PrimaryType').get(i);
return date >= startDate && date <= endDate &&
(crimeType === '' || primaryType === crimeType);
}, b => 1);
data.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;
}
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;
}
html `<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
mapbox-gl.css`
mapboxgl = require('mapbox-gl@~0.44.1/dist/mapbox-gl.js')
deck = require('deck.gl@~5.2.0/deckgl.min.js')
d3 = require('d3')
import {slider, select} from '@jashkenas/inputs'
arrow = require('apache-arrow@0.3.1')
import {loadData, range, getMarkdown, toDate} from '@randomfractals/apache-arrow'
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.
