31:T441,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)}
${type(index)}
${info(index)}
${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; }32:[] 2f:{"title":"Chicago Crimes Heatmap","cells":[{"id":0,"value":"md`# Chicago Crimes Heatmap\n\n[deck.gl HexagonLayer](https://deck.gl/docs/api-reference/aggregation-layers/hexagon-layer) \nheatmap of reported 2018 Chicago crimes in ${endDay - startDay} days.\n\n*tip: toggle crimeType, startDay/endDay:*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"viewof crimeType = select(['', 'HOMICIDE', 'KIDNAPPING', 'NARCOTICS', 'PROSTITUTION', 'ARSON', \n 'THEFT', 'BATTERY', 'CRIMINAL DAMAGE', 'ASSAULT', 'SEX OFFENSE',\n 'OTHER OFFENSE', 'DECEPTIVE PRACTICE',\n 'BURGLARY', 'MOTOR VEHICLE THEFT', 'ROBBERY',\n 'CRIMINAL TRESPASS', 'WEAPONS VIOLATION',\n 'OFFENSE INVOLVING CHILDREN',\n 'PUBLIC PEACE VIOLATION',\n 'CRIM SEXUAL ASSAULT',\n 'INTERFERENCE WITH PUBLIC OFFICER',\n 'LIQUOR LAW VIOLATION', 'STALKING', 'GAMBLING'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"viewof startDay = slider({min: 0, max: days, step: 1, value: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"viewof endDay = slider({min: 0, max: days, step: 1, value: days})","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"mapContainer = html `

\n ${crimeType}\n total: ${data.length.toLocaleString()}\n
\n ${formatTime(dayToDate(startDay))} through ${formatTime(dayToDate(endDay))}, 2018\n
\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"dataUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/2018/chicago-crimes-2018.arrow'","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"md `## Hexagon Layer Toggles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof blockRadius = slider({min: 100, max: 1000, step: 100, value: 200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof upperPercentile = slider({min: 90, max: 100, step: 1, value: 95})","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"viewof hexagonCoverage = slider({min: .2, max: 1, step: .1, value: .6})","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"viewof mapPitch = slider({min: 0, max: 45, step: .1, value: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md `## DeckGL Map Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"deckgl = {\n return new deck.DeckGL({\n container: mapContainer,\n map: mapboxgl,\n mapboxAccessToken: 'pk.eyJ1IjoiZGF0YXBpeHkiLCJhIjoiY2tnM3ZhZWJjMDE1ajJxbGY1eTNlemduciJ9.YZ9CJEza0hvAQmTRBhubmQ',\n mapStyle: 'https://api.maptiler.com/maps/toner/style.json?key=bMizIsuAeRiZikCLHO9q',\n latitude: 41.85, \n longitude: -87.68,\n zoom: 9,\n minZoom: 8,\n maxZoom: 15,\n pitch: mapPitch\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"heatmap = {\n const hexagonLayer = new deck.HexagonLayer({\n id: 'heatmap',\n colorRange,\n data,\n elevationRange: [0, 1000],\n elevationScale: 20,\n extruded: true,\n getPosition: d => [d.lng, d.lat],\n opacity: .2,\n radius: blockRadius,\n coverage: hexagonCoverage,\n upperPercentile,\n lightSettings,\n pickable: true,\n autoHighlight: true,\n onHover: onHover,\n onClick: onClick\n });\n deckgl.setProps({layers: [hexagonLayer]});\n return hexagonLayer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"tooltip = mapContainer.querySelector('#tooltip')","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"function onHover (info) {\n const {x, y, object} = info;\n if (object) {\n tooltip.style.left = `${x}px`; \n tooltip.style.top = `${y}px`;\n tooltip.innerHTML = `${object.points.length} crime reports`;\n } else { \n tooltip.innerHTML = '';\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"dataList = mapContainer.querySelector('.data-list')","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"function onClick(info) {\n const mapPoints = info.object.points;\n const dataPoints = getDataPoints(mapPoints);\n dataList.innerHTML = dataPoints.reduce(\n (html, d) => html + \n `

${d.block}
(${d.location})
${d.type}: ${d.info}
${d.date.toLocaleString()}`, ''\n );\n //console.log('clicked data points:', dataPoints); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"colorRange = {\n return [\n [1, 152, 189],\n [73, 227, 206],\n [216, 254, 181],\n [254, 237, 177],\n [254, 173, 84],\n [209, 55, 78]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"lightSettings = {\n return {\n lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],\n ambientRatio: 0.4,\n diffuseRatio: 0.6,\n specularRatio: 0.2,\n lightsStrength: [0.8, 0.0, 0.8, 0.0],\n numberOfLights: 2\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"tooltipStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"dataPanelStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"dataTable = loadData(dataUrl).then(buffer => arrow.Table.from(new Uint8Array(buffer)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"data = filterData(dataTable, crimeType, \n new Date(startDate.getTime() + startDay*millisPerDay),\n new Date(startDate.getTime() + endDay*millisPerDay))","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"startDate = new Date('1/1/2018')","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"endDate = new Date('8/8/2018')","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"days = Math.ceil((endDate - startDate) / millisPerDay)","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"millisPerDay = 24 * 60 * 60 * 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"function dayToDate(day) {\n return new Date(startDate.getTime() + day*millisPerDay) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"dayToDate(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"formatTime = d3.timeFormat('%b %e')","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"fields = dataTable.schema.fields.map(f => f.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"function getDataPoints(mapPoints) {\n const dataPoints = [];\n mapPoints.map(point => {\n const dataRow = dataTable.get(point.index);\n const dataPoint = {\n // from fields\n block: dataRow.get(2),\n location: dataRow.get(3).toLowerCase(),\n type: dataRow.get(4),\n info: dataRow.get(5).toLowerCase(),\n arrested: dataRow.get(6),\n domestic: dataRow.get(7),\n date: toDate(dataRow.get(9))\n }\n dataPoints.push(dataPoint);\n });\n return dataPoints;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"md `## Data Preview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"every10KRecord = range(dataTable, 0, dataTable.count(), 10000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"md`${getMarkdown(every10KRecord, fields)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md `## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html `\nmapbox-gl.css`","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"mapboxgl = require('mapbox-gl@~0.44.1/dist/mapbox-gl.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"deck = require('deck.gl@~5.2.0/deckgl.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"arrow = require('apache-arrow@0.3.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"import {loadData, range, getMarkdown, toDate} from '@randomfractals/apache-arrow'","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"md `## P.S.:\nsee my [Intro to Using Apache Arrow JS with Large Datasets](https://beta.observablehq.com/@randomfractals/apache-arrow)\non how to work with apache arrow data used in this notebook.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}