2d:null 2e:["$","title",null,{"children":"Chicago Crimes Heatmap | Taras Novak | Observable"}] 33: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; }34:[] 31:{"id":"3b81b175f29201e7","slug":"deck-gl-heatmap","title":"Chicago Crimes Heatmap","thumbnail":"38c7f53b846da4e440f0c8bb1266c6f744884a3b6f4c56601d8bc7ee040492a7","access_level":"public","create_time":"$D2018-07-23T11:15:35.383Z","update_time":"$D2020-10-11T22:56:09.404Z","view_time":null,"first_public_time":"$D2018-07-23T12:19:32.149Z","fork":false,"stars":19,"starred":false,"owner":{"type":"team","id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":"starter_2024"},"version":356,"publish_version":356,"role":null,"authored":false,"authors":[{"type":"individual","id":"17b72db66175b428","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":null}],"members":[{"type":"individual","id":"17b72db66175b428","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"08aa2e504097ac5b","slug":"chicago-crimes","title":"Chicago Crimes","owner":{"id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"viewof startDay = slider({min: 0, max: days, step: 1, value: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"viewof endDay = slider({min: 0, max: days, step: 1, value: days})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"dataUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/2018/chicago-crimes-2018.arrow'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md `## Hexagon Layer Toggles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof blockRadius = slider({min: 100, max: 1000, step: 100, value: 200})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof upperPercentile = slider({min: 90, max: 100, step: 1, value: 95})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"viewof hexagonCoverage = slider({min: .2, max: 1, step: .1, value: .6})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"viewof mapPitch = slider({min: 0, max: 45, step: .1, value: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md `## DeckGL Map Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"tooltip = mapContainer.querySelector('#tooltip')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"dataList = mapContainer.querySelector('.data-list')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"tooltipStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"dataPanelStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"dataTable = loadData(dataUrl).then(buffer => arrow.Table.from(new Uint8Array(buffer)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"startDate = new Date('1/1/2018')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"endDate = new Date('8/8/2018')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"days = Math.ceil((endDate - startDate) / millisPerDay)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"millisPerDay = 24 * 60 * 60 * 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"function dayToDate(day) {\n return new Date(startDate.getTime() + day*millisPerDay) \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"dayToDate(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"formatTime = d3.timeFormat('%b %e')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"fields = dataTable.schema.fields.map(f => f.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md `## Data Preview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"every10KRecord = range(dataTable, 0, dataTable.count(), 10000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`${getMarkdown(every10KRecord, fields)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md `## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html `\nmapbox-gl.css`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"mapboxgl = require('mapbox-gl@~0.44.1/dist/mapbox-gl.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"deck = require('deck.gl@~5.2.0/deckgl.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"arrow = require('apache-arrow@0.3.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"import {loadData, range, getMarkdown, toDate} from '@randomfractals/apache-arrow'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"