31:[] 2f:{"title":"Chicago Traffic Tracker","cells":[{"id":0,"value":"md`# Chicago Traffic Tracker\n\n**Data Source:** [Chicago Transportation](https://data.cityofchicago.org/browse?category=Transportation) / [Chicago Traffic Tracker - Congestion Estimates by Segments](https://data.cityofchicago.org/Transportation/Chicago-Traffic-Tracker-Congestion-Estimates-by-Se/n4j6-wkkf)\n\nChicago Data Portal: [Chicago Traffic Tracker - Congestion Estimates by Segments Data](https://data.cityofchicago.org/Transportation/Chicago-Traffic-Tracker-Congestion-Estimates-by-Se/n4j6-wkkf/data)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"mapContainer = html `

\n ${dataTable.size.toLocaleString()} Traffic Segments\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"speedLegend = html `\n

\n \n 0 mph\n \n 60 mph\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"trafficSegmentsLayer = {\n const segmentsLayer = new deck.LineLayer({\n id: 'trafficSegments',\n data: dataTable.objects(),\n opacity: 0.8,\n pickable: true,\n getWidth: 8,\n getColor: d => colorScale(Number(d.current_speed)),\n getSourcePosition: d => [Number(d.start_longitude), Number(d.start_latitude)],\n getTargetPosition: d => [Number(d.end_longitude), Number(d.end_latitude)],\n onHover: onHover\n });\n \n deckgl.setProps({layers: [segmentsLayer]});\n return segmentsLayer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"viewof searchResults = Inputs.search(dataTable)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof tableView = Inputs.table(searchResults, {\n columns,\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## Data Queries and Filters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"columns = [\n 'segment_id',\n 'from_street',\n 'to_street',\n 'street_heading',\n 'street',\n 'direction', \n 'segment_length',\n 'current_speed',\n 'start_longitude',\n 'start_latitude',\n 'end_longitude',\n 'end_latitude',\n 'last_updated',\n 'update_date_time'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"dataUrl = 'https://data.cityofchicago.org/resource/n4j6-wkkf.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"query = `?$limit=100000`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"data = await fetch(dataUrl + query).then(data => data.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"dataTable = aq.from(data)\n .filter(d => d._traffic >= 0)\n .rename({\n segmentid: 'segment_id',\n _direction: 'direction',\n _fromst: 'from_street',\n _tost: 'to_street',\n _length: 'segment_length',\n _strheading: 'street_heading',\n _traffic: 'current_speed',\n start_lon: 'start_longitude',\n _lif_lat: 'start_latitude',\n _lit_lon: 'end_longitude',\n _lit_lat: 'end_latitude',\n _last_updt: 'last_updated'\n })\n .derive({\n update_date_time: d => op.parse_date(d.last_updated)\n })\n .orderby('current_speed')","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`## Map Elements and Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"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/voyager-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: 0,\n bearing: 0\n },\n controller: true\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"colorScale = (n) => {\n let color = linearSpeedScale(n)\n color = color.split(',')\n color[0] = Number(color[0].substring(4, color[0].length))\n color[1] = Number(color[1].substring(1, color[1].length))\n color[2] = Number(color[2].substring(1, color[2].length-1))\n return color\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"linearSpeedScale = d3.scaleLinear()\n .domain([-1, 20, 60])\n .range(['red', 'yellow', 'green']);","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"tooltip = mapContainer.querySelector('#tooltip')","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"function onHover (info) {\n const data = info.object;\n if (data) {\n tooltip.style.left = `${info.x}px`;\n tooltip.style.top = `${info.y}px`;\n tooltip.innerHTML = `${data.direction} from ${data.from_street} to ${data.to_street}\n on ${data.street_heading} ${data.street} street
\n esitmated ${Number(data.current_speed).toLocaleString()} mph speed\n for ${data.segment_length} miles
\n last updated on ${data.update_date_time.toLocaleDateString()}\n at ${data.update_date_time.toLocaleTimeString()}`;\n } else { \n tooltip.innerHTML = '';\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"tooltipStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"dataPanelStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"html`\nmapbox-gl.css`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"mapboxgl = require('mapbox-gl@^2.3.0/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"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"}