31:[] 2f:{"title":"Chicago Taxi Trips Deck.gl Grid Map","cells":[{"id":0,"value":"md`# Chicago Taxi Trips Deck.gl Grid Map\n\n**Data Source:** [Chicago Transportation](https://data.cityofchicago.org/browse?category=Transportation) / [Taxi Trips](https://data.cityofchicago.org/Transportation/Taxi-Trips/wrvz-psew)\n\nGrid Map Info: https://deck.gl/examples/screen-grid-layer\n\n**See:** [Chicago Taxi Trips](https://observablehq.com/@randomfractals/chicago-taxi-trips?collection=@randomfractals/transportation) data notebook for the taxi trips per day data summary and some basic plots.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`## ${geoDataTable.totalRows().toLocaleString()} geo located trips | ${geoTrips.totalRows().toLocaleString()} routes | ${tripLocations.totalRows().toLocaleString()} locations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof tripDate = Inputs.date({\n label: md`### Select Date:`,\n min: `2013-01-01`,\n max: `${year}-12-31`,\n value: `2022-06-30`,\n required: true,\n //submit: true,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"mapContainer = html `

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`TODO: add trips layer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"tripLocationsGridLayer = {\n const tripLocationsGridLayer = new deck.ScreenGridLayer({\n id: 'tripsGridLayer',\n data: tripLocations.objects(),\n opacity: 0.2,\n pickable: true,\n cellSizePixels: 40,\n colorRange: colorRange,\n getPosition: d => [Number(d.longitude), Number(d.latitude)],\n getWeight: d => d.count,\n onHover: onHover\n });\n deckgl.setProps({layers: [tripLocationsGridLayer]});\n return tripLocationsGridLayer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"tripPathsLayer = {\n const tripPathsLayer = new deck.PathLayer({\n id: 'tripPathsLayer',\n data: tripPaths.objects(),\n opacity: 0.2,\n pickable: true,\n widthScale: 20,\n widthMinPixels: 2,\n getColor: d => d.color,\n getPath: d => d.path\n });\n // deckgl.setProps({layers: [tripPathsLayer]});\n return tripPathsLayer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`## Taxi Trips Data \n\nTotal: **${data.length.toLocaleString()}** trips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof tableView = Inputs.table(data, {\n columns: columns,\n reverse: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`## Trip Data Queries and Filters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"year = new Date().getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"columns = [\n 'trip_start_timestamp',\n 'trip_end_timestamp',\n 'trip_seconds',\n 'trip_miles',\n 'pickup_community_area',\n 'dropoff_community_area',\n 'fare',\n 'tips',\n 'tolls',\n 'extras',\n 'trip_total',\n 'payment_type',\n 'company',\n 'pickup_centroid_latitude',\n 'pickup_centroid_longitude',\n 'dropoff_centroid_latitude',\n 'dropoff_centroid_longitude',\n 'trip_id',\n 'taxi_id'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"dataUrl = 'https://data.cityofchicago.org/resource/wrvz-psew.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"tripsDate = tripDate.toISOString().substring(0, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"query = `?$limit=50000&$where=trip_start_timestamp between '${tripsDate}T00:00:00' and '${tripsDate}T23:59:59'`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"data = await fetch(dataUrl + query).then(data => data.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"geoDataTable = aq.from(\n data.filter(d => d.trip_miles >= 0 &&\n d['pickup_centroid_latitude'] &&\n d['pickup_centroid_longitude'] &&\n d['dropoff_centroid_latitude'] &&\n d['dropoff_centroid_longitude'])\n )\n .derive({\n trip_start_time: d => op.parse_date(d.trip_start_timestamp),\n trip_end_time: d => op.parse_date(d.trip_end_timestamp)\n })\n .orderby('trip_start_time')","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"tripStartLocations = geoDataTable.select('pickup_centroid_latitude', 'pickup_centroid_longitude')\n .rename({\n pickup_centroid_latitude: 'latitude', \n pickup_centroid_longitude: 'longitude'\n })\n .groupby('latitude', 'longitude')\n .count()","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"tripEndLocations = geoDataTable.select('dropoff_centroid_latitude', 'dropoff_centroid_longitude')\n .rename({\n dropoff_centroid_latitude: 'latitude', \n dropoff_centroid_longitude: 'longitude'\n })\n .groupby('latitude', 'longitude')\n .count()","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"tripLocations = tripStartLocations.concat(tripEndLocations)","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"geoLocations = tripStartLocations.union(tripEndLocations)","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"tripRoutes = geoDataTable.select(\n 'pickup_centroid_latitude', \n 'pickup_centroid_longitude',\n 'dropoff_centroid_latitude', \n 'dropoff_centroid_longitude'\n )\n .rename({\n pickup_centroid_latitude: 'start_latitude',\n pickup_centroid_longitude: 'start_longitude',\n dropoff_centroid_latitude: 'end_latitude',\n dropoff_centroid_longitude: 'end_longitude', \n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"forwardGeoTrips = tripRoutes.union(tripRoutes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"reversedGeoTrips = forwardGeoTrips\n .rename({\n end_latitude: 'start_latitude',\n end_longitude: 'start_longitude',\n start_latitude: 'end_latitude',\n start_longitude: 'end_longitude', \n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"geoTrips = forwardGeoTrips.join(reversedGeoTrips)","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"tripWaypoints = geoTrips.derive({\n turn_latitude: d => d.start_latitude,\n turn_longitude: d => d.end_longitude\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"tripPaths = tripWaypoints.derive({\n path: d=> [[op.parse_float(d.start_longitude), op.parse_float(d.start_latitude)], \n [op.parse_float(d.turn_longitude), op.parse_float(d.turn_latitude)], \n [op.parse_float(d.end_longitude), op.parse_float(d.end_latitude)]],\n color: [0, 124, 0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"tripsByCompany = geoDataTable.groupby('company').count().orderby(aq.desc('count'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"tripsByStartTime = geoDataTable.groupby('trip_start_time').count()","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`## Map Elements and Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"deckgl = {\n return new deck.DeckGL({\n container: mapContainer,\n map: mapboxgl,\n mapboxAccessToken: '',\n mapboxApiAccessToken: 'pk.eyJ1IjoiZGF0YXBpeHkiLCJhIjoiY2tnM3ZhZWJjMDE1ajJxbGY1eTNlemduciJ9.YZ9CJEza0hvAQmTRBhubmQ',\n mapStyle: 'https://api.maptiler.com/maps/toner/style.json?key=bMizIsuAeRiZikCLHO9q',\n initialViewState: {\n latitude: 41.88,\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":385,"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":356,"value":"tooltip = mapContainer.querySelector('#tooltip')","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"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.cellWeight.toLocaleString()} trips to/from this grid block`;\n } else { \n tooltip.innerHTML = '';\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"tooltipStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"html`\nmapbox-gl.css`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"import {date} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"mapboxgl = require('mapbox-gl@^2.3.0/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"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"}