2f:null 30:["$","title",null,{"children":"Chicago Average Daily Traffic Counts Deck.gl Map | Taras Novak | Observable"}] 35:[] 33:{"id":"f01a9780696e22e1","slug":"chicago-average-daily-traffic-counts-deck-gl-map","title":"Chicago Average Daily Traffic Counts Deck.gl Map","thumbnail":"c04a3bee6476029e00c93afc9edca9d683263bee2b84a43f6b48af384305f270","access_level":"public","create_time":"$D2021-06-14T22:22:29.131Z","update_time":"$D2022-08-05T15:30:30.231Z","view_time":null,"first_public_time":"$D2021-06-14T22:36:23.753Z","has_unpublished_edits":null,"fork":{"id":"3c6a1ee56e29e7ef","slug":"chicago-average-daily-traffic-counts","title":"Chicago Average Daily Traffic Counts","owner":{"id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak"}},"stars":1,"starred":false,"owner":{"type":"team","id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":"starter_2024"},"version":361,"publish_version":361,"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":0,"collection":{"id":"cc3985e6b82c86b0","slug":"maps","title":"Maps","owner":{"id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak"}},"type":"notebook","body":{"title":"Chicago Average Daily Traffic Counts Deck.gl Map","cells":[{"id":0,"value":"md`# Chicago Average Daily Traffic Counts Deck.gl Map\n\n**Data Source:** [Chicago Transportation](https://data.cityofchicago.org/browse?category=Transportation) / [Average Daily Traffic Counts](https://dev.socrata.com/foundry/data.cityofchicago.org/pf56-35rv)\n\n**Chicago Data Portal:** [Average Daily Traffic Counts Map](https://data.cityofchicago.org/Transportation/Average-Daily-Traffic-Counts-Map/pf56-35rv)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"mapContainer = html `

\n ${data.length.toLocaleString()} Traffic Counters\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"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 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"viewof searchResults = Inputs.search(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof tableView = Inputs.table(searchResults, {\n columns: columns,\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Data Queries and Filters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"columns = [\n 'id',\n 'date_of_count',\n 'traffic_volume_count_location_address',\n 'street',\n 'total_passing_vehicle_volume',\n 'vehicle_volume_by_each_direction_of_traffic',\n 'latitude',\n 'longitude'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"dataUrl = 'https://data.cityofchicago.org/resource/pf56-35rv.json'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"query = `?$limit=100000`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"data = await fetch(dataUrl + query).then(data => data.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`## Map Elements and Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"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":260,"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":253,"value":"tooltip = mapContainer.querySelector('#tooltip')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"function onHover (info) {\n const pointsObject = info.object;\n if (pointsObject && pointsObject.points && pointsObject.points.length > 0) {\n const data = pointsObject.points[0].source;\n const dateTime = data.date_of_count.split('T');\n const trafficDirectionVolume = data.vehicle_volume_by_each_direction_of_traffic.split('/');\n tooltip.style.left = `${info.x}px`;\n tooltip.style.top = `${info.y}px`;\n tooltip.innerHTML = `${data.traffic_volume_count_location_address} ${data.street}
\n Vehicle Volume: ${Number(data.total_passing_vehicle_volume).toLocaleString()}
\n ${trafficDirectionVolume[0]}
\n ${trafficDirectionVolume[1]}
\n Recorded on: ${new Date(dateTime[0]).toLocaleDateString()}`;\n } else { \n tooltip.innerHTML = '';\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"html`\nmapbox-gl.css`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"tooltipStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"dataPanelStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"mapboxgl = require('mapbox-gl@^2.3.0/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 34:"$33:body"