2f:[{"id":"8117f8ab8492620d3a9b015f9c5d7ae4a0c2f8e7d6f294a18a1008a3df5083e7b5cfe43f980e6bcd02ba787b376ed7c49ca077186168c11e1854af89b378adae","href":"https://static.observableusercontent.com/files/8117f8ab8492620d3a9b015f9c5d7ae4a0c2f8e7d6f294a18a1008a3df5083e7b5cfe43f980e6bcd02ba787b376ed7c49ca077186168c11e1854af89b378adae","name":"202403-divvy-tripdata-trimmed.csv","type":"text/csv","lastModified":1714733748357.662,"size":38054657}] 2d:{"title":"deck.gl Practice: Divvy Ride Record","cells":[{"id":0,"value":"# deck.gl Practice: Divvy Ride Record","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"Creating some maps by referring to [Tutorial on DeckGL by John Haldeman](https://observablehq.com/@johnhaldeman/tutorial-on-deckgl).","pinned":false,"hidden":false,"mode":"md"},{"id":705,"value":"Data Source: [Divvy Data](https://divvybikes.com/system-data)","pinned":false,"hidden":false,"mode":"md"},{"id":750,"value":"Data Period: Mar 2024","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"## Scatterplot Layer","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"getDeckGLMap([scatterplotLayer])","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"## Heatmap Layer","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"getDeckGLMap([heatmapLayer])","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"## Hexagon Layer","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"getDeckGLMap([hexagonLayer], 40)","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"## Arc Layer","pinned":false,"hidden":false,"mode":"md"},{"id":758,"value":"viewof startDate = Inputs.datetime({\n value: \"2024-03-01T00:00:00\",\n label: \"Start Date&Time\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"viewof endDate = Inputs.datetime({\n value: \"2024-03-01T06:00:00\",\n label: \"End Date&Time\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"tripcontainer = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"### Props","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"getDeckGLMap = (layers, pitch) => {\n if (pitch === undefined) {\n pitch = 0;\n }\n\n let container = html`

`;\n\n let deckgl = new deck.DeckGL({\n container,\n map: mapboxgl,\n mapStyle:\n \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\",\n layers: layers,\n initialViewState: {\n longitude: -87.623177,\n latitude: 41.881832,\n zoom: 11.5,\n pitch: pitch\n },\n controller: true\n });\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"tripDeckGL = new deck.DeckGL({\n container: tripcontainer,\n map: mapboxgl,\n mapStyle: \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\",\n initialViewState: {\n longitude: -87.623177,\n latitude: 41.881832,\n zoom: 11,\n minZoom: 3,\n maxZoom: 15,\n pitch: 40\n },\n controller: true,\n layers: [arcLayer]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"scatterplotLayer = await new deck.ScatterplotLayer({\n id: \"scatterplot-layer\",\n data: divvyCoordinate,\n pickable: true,\n opacity: 1,\n filled: true,\n radiusScale: 1,\n radiusMinPixels: 1,\n radiusMaxPixels: 1,\n getPosition: (d) => [d.Longitude, d.Latitude],\n getRadius: (d) => 1,\n getFillColor: (d) => [255, 140, 0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"heatmapLayer = await new deck.HeatmapLayer({\n id: \"heatmap-layer\",\n data: divvyCoordinate,\n getPosition: (d) => [d.Longitude, d.Latitude],\n aggregation: \"COUNT\",\n radiusPixels: 20,\n colorRange\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"hexagonLayer = await new deck.HexagonLayer({\n id: \"hexagon-layer\",\n data: divvyCoordinate,\n pickable: true,\n extruded: true,\n radius: 50,\n elevationScale: 4,\n colorRange,\n getPosition: (d) => [d.Longitude, d.Latitude]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"arcLayer = await new deck.ArcLayer({\n id: \"arc-layer\",\n data: divvyTrips.filter((d) => {\n const tripDate = new Date(d[\"started_at\"]).getTime();\n const sDate = new Date(startDate).getTime();\n const eDate = new Date(endDate).getTime();\n return tripDate >= sDate && tripDate <= eDate;\n }),\n getSourceColor: (d) =>\n d[\"rideable_type\"] == \"electric_bike\" ? [96, 201, 110] : [255, 237, 160],\n getTargetColor: (d) =>\n d[\"rideable_type\"] == \"electric_bike\" ? [77, 65, 147] : [240, 59, 32],\n opacity: 0.1,\n autoHighlight: true,\n highlightColor: (d) =>\n d.object[\"rideable_type\"] == \"electric_bike\" ? [0, 200, 5] : [255, 0, 0],\n pickable: true,\n getWidth: 3,\n onHover: onHover\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"### Interaction","pinned":false,"hidden":false,"mode":"md"},{"id":959,"value":"tooltip = tripcontainer.querySelector(\"#tooltip\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"onHover = {\n return function (info) {\n const { x, y, object } = info;\n if (object) {\n tooltip.style.top = `${y}px`;\n tooltip.style.left = `${x}px`;\n tooltip.innerHTML = `\n

Start: ${object[\"started_at\"]}

End: ${object[\"ended_at\"]}

Type: ${object[\"rideable_type\"]}

\n `;\n } else {\n tooltip.innerHTML = \"\";\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"### Styling","pinned":false,"hidden":false,"mode":"md"},{"id":721,"value":"colorRange = [\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]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"html`\n(Mapbox Stylesheet)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"html`\n\n(Stylesheets)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":389,"value":"divvyTrips = {\n let data = await FileAttachment(\"202403-divvy-tripdata-trimmed.csv\").csv({\n typed: true\n });\n data = data\n .filter(\n (d) =>\n d[\"start_lng\"] !== undefined &&\n d[\"start_lat\"] !== undefined &&\n d[\"end_lng\"] !== undefined &&\n d[\"end_lat\"] !== undefined &&\n d[\"start_lng\"] !== null &&\n d[\"start_lat\"] !== null &&\n d[\"end_lng\"] !== null &&\n d[\"end_lat\"] !== null\n )\n .map((d) => ({\n ...d,\n sourcePosition: [d[\"start_lng\"], d[\"start_lat\"]],\n targetPosition: [d[\"end_lng\"], d[\"end_lat\"]],\n distance: turf.distance(\n [d[\"start_lng\"], d[\"start_lat\"]],\n [d[\"end_lng\"], d[\"end_lat\"]]\n )\n }))\n .filter((d) => d.distance !== 0);\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"divvyCoordinate = {\n const pickupCoordinate = divvyTrips.map((d) => ({\n Longitude: d[\"start_lng\"],\n Latitude: d[\"start_lat\"]\n }));\n const dropoffCoordinate = divvyTrips.map((d) => ({\n Longitude: d[\"end_lng\"],\n Latitude: d[\"end_lat\"]\n }));\n\n // Combine the two arrays\n const combinedCoordinates = pickupCoordinate.concat(dropoffCoordinate);\n\n return combinedCoordinates;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"### Utility","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"getColorScale = (min, max) => {\n let func = d3\n .scaleSequential()\n .domain([min, max])\n .interpolator(d3.interpolateRainbow);\n\n return (d) => {\n let col = d3.color(func(d));\n return [col.r, col.g, col.b];\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"mapboxgl = require(\"mapbox-gl@3.3.0/dist/mapbox-gl.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"deck = require.alias({\n h3: {}\n})(\"deck.gl@v8-latest/dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"import { Scrubber } from \"@noahthemeh/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}