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'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.