31:[] 2f:{"title":"Chicago Traffic Crashes Deck.gl Heatmap","cells":[{"id":0,"value":"md`# Chicago Traffic Crashes Deck.gl Heatmap\n\nData Source: [Chicago Transportation](https://data.cityofchicago.org/browse?category=Transportation) / [Traffic Crashes](https://data.cityofchicago.org/Transportation/Traffic-Crashes-Crashes/85ca-t3if)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"mapContainer = html `

\n ${data.length.toLocaleString()} crashes in ${year}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"heaxagonLayer = {\n const hexagonLayer = new deck.HexagonLayer({\n id: 'heatmap',\n colorRange,\n data: data,\n elevationRange: [0, 1000],\n elevationScale: data && data.length ? 20 : 0,\n extruded: true,\n getPosition: d => [Number(d.longitude), Number(d.latitude)],\n opacity: .1,\n radius: 100,\n coverage: 0.9,\n upperPercentile: 95,\n lightSettings,\n pickable: true,\n autoHighlight: true,\n onHover: onHover,\n onClick: onClick,\n transitions: {\n elevationScale: 1000\n },\n material: {\n ambient: 0.64,\n diffuse: 0.6,\n shininess: 32,\n specularColor: [51, 51, 51]\n }\n });\n \n deckgl.setProps({layers: [hexagonLayer]});\n return hexagonLayer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof year = Inputs.select(years, {value: 2022, label: 'Select Year:', format: year => year})","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"dayPlot = Plot.plot({\n height: 180,\n x: {\n axis: null,\n padding: 0,\n },\n y: {\n padding: 0,\n tickFormat: Plot.formatWeekday('en', 'narrow'),\n tickSize: 0\n },\n fy: {\n reverse: true\n },\n facet: {\n data: crashesByDate,\n y: d => d.date.getUTCFullYear()\n },\n marks: [\n Plot.cell(crashesByDate, {\n x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date),\n y: d => d.date.getUTCDay(),\n fill: 'count',\n title: d => `${d.date.toLocaleDateString()}: ${d.count.toLocaleString()} crashes`,\n inset: 0.5\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof tableView = Inputs.table(data, {\n columns: columns,\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Data Queries and Filters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"years = [2020, 2021, 2022]","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"columns = [\n 'crash_date',\n 'crash_type',\n 'posted_speed_limit',\n 'weather_condition',\n 'lighting_condition',\n 'first_crash_type',\n 'trafficway_type',\n 'alignment',\n 'roadway_sourface_cond',\n 'road_defect',\n 'report_type',\n 'private_property',\n 'hit_and_run_i',\n 'damage',\n 'date_police_notified',\n 'prim_contributory_cause',\n 'sec_contributory_cause',\n 'street_no',\n 'street_direction',\n 'street_name',\n 'beat_of_occurrence',\n 'photos_taken_i',\n 'num_units',\n 'most_severe_injury',\n 'injuries_total',\n 'injuries_fatal',\n 'injuries_incapacitating',\n 'injuries_reported_not_evident',\n 'injuries_no_indication',\n 'injuries_unknown',\n 'crash_hour',\n 'crash_day_of_week',\n 'crash_month',\n 'latitude',\n 'longitude'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"dataUrl = 'https://data.cityofchicago.org/resource/85ca-t3if.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"query = `?$limit=100000&$where=crash_date between '${year}-01-01T00:00:00' and '${year}-12-31T23:59:59'`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"data = await fetch(dataUrl + query).then(data => data.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"dataTable = aq.from(data)\n .derive({\n date_time: d => op.parse_date(d.crash_date)\n })\n .spread({crash_date: d => op.split(d.crash_date, 'T')}, {as: ['date', 'time']})\n .orderby('posted_speed_limit')","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"crashesByDate = dataTable.groupby('date').count()\n .derive({\n date: d => op.parse_date(d.date)\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`## Map Elements and Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"deckgl = {\n return new deck.DeckGL({\n container: mapContainer,\n map: mapboxgl,\n mapboxAccessToken: '',\n mapboxApiAccessToken: 'pk.eyJ1IjoiZGF0YXBpeHkiLCJhIjoiY2tnM3ZhZWJjMDE1ajJxbGY1eTNlemduciJ9.YZ9CJEza0hvAQmTRBhubmQ',\n mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',\n initialViewState: {\n latitude: 41.82,\n longitude: -87.65,\n zoom: 10,\n minZoom: 8,\n maxZoom: 15,\n pitch: 30,\n bearing: 0\n },\n controller: true\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"tooltip = mapContainer.querySelector('#tooltip')","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"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} crash reports`;\n } else { \n tooltip.innerHTML = '';\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"dataList = mapContainer.querySelector('.data-list')","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"function onClick(info) {\n const mapPoints = info.object.points;\n const dataPoints = mapPoints;\n dataList.innerHTML = dataPoints.reduce((html, d) => {\n const data = d.source;\n const dateTime = data.crash_date.split('T');\n return html + \n `

${data.street_no} ${data.street_direction} ${data.street_name}
\n at ${dateTime[1].replace('.000', '')}\n on ${dateTime[0]}
\n ${data.crash_type}
\n ${data.prim_contributory_cause}
\n ${data.damage} damage
`;\n }, '');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"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":164,"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":149,"value":"html`\nmapbox-gl.css`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"tooltipStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"dataPanelStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"import { getGeoDataPoints } from '@randomfractals/geo-data-utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"mapboxgl = require('mapbox-gl@^2.3.0/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"deck = require.alias({\n // optional dependencies\n h3: {},\n s2Geometry: {}\n})('deck.gl@^8.4.17/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}