2d:null 2e:["$","title",null,{"children":"Query Daily Raleigh CitrixCycle Data | Ryan Cooper | Observable"}] 33:[] 31:{"id":"4551e31003daca5c","slug":"query-daily-raleigh-citrixcycle-data","title":"Query Daily Raleigh CitrixCycle Data","thumbnail":"99cc5baec52bd905281801f48501c55daaf53f545e99e13170015dd887bdaf5d","access_level":"public","create_time":"$D2019-05-24T18:49:13.483Z","update_time":"$D2019-10-24T12:13:14.557Z","view_time":null,"first_public_time":"$D2019-05-24T23:17:39.899Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":"starter_2024"},"version":1526,"publish_version":1526,"role":null,"authored":false,"authors":[{"type":"individual","id":"cae231bf35ff5917","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":null}],"members":[{"type":"individual","id":"cae231bf35ff5917","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Query Daily Raleigh CitrixCycle Data","cells":[{"id":259,"value":"md`# Query Daily Raleigh CitrixCycle Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"md`In April 2019 Raleigh launched a municipal bike share program called [CitrixCycle](https://citrixcycle.com/). Sponsored by Citrix, this bike share program allows riders to retrieve and deposit special CitrixCycle bikes at docking stations throughout the city.\n![](https://maptastik.neocities.org/CitrixCycle_dock.jpg)\nAccess is granted using a phone app or a fob. During each ride, GPS locations of the rider are collected at regular intervals. A feed of this data is made publicly available by City of Raleigh GIS. This notebook is meant to offer a means for exploration for daily trends in ridership for the CitrixCycle program.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"md`## Explore data by day`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"viewof date = {\n const div = html`\n Select Date
\n ` \n\n const d = div.querySelector(\"[type=date]\");\n div.value = d.value = \"2019-04-16\"\n d.onload = () => div.value = d.value\n d.oninput = () => div.value = d.value\n \n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"md`### Heatmap styling parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"viewof pointRadiusSlider = {\n const div = html`\n Point Radius:
\n \n \n `;\n const range = div.querySelector(\"[type=range]\");\n const number = div.querySelector(\"[type=number]\");\n div.value = range.value = number.value = 5;\n range.oninput = () => number.value = div.value = range.valueAsNumber;\n number.oninput = () => range.value = div.value = number.valueAsNumber;\n \n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"viewof blurRadiusSlider = {\n const div = html`\n Blur:
\n \n \n `;\n const range = div.querySelector(\"[type=range]\");\n const number = div.querySelector(\"[type=number]\");\n div.value = range.value = number.value = 15;\n range.oninput = () => number.value = div.value = range.valueAsNumber;\n number.oninput = () => range.value = div.value = number.valueAsNumber;\n \n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"viewof heatColor = color({\n value:\"#18FFFF\",\n title: \"Heat Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"viewof map = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/3}px`});\n yield container;\n \n const map = container.value = L.map(container).setView([35.777801,-78.642712],15);\n let base = L.esri.basemapLayer('DarkGray').addTo(map)\n ccRidesHeatFeatureGroup.addTo(map)\n \n let overlayLayers = {\n \"CitrixCycle Heat Layer\": ccRidesHeatFeatureGroup,\n \"CitrixCycle Open Docks\": ccDocksLayer,\n \"Existing Bike Facilities\": bikeFacilitesLayer,\n \"Raleigh Greenway Trails\": ralGreenwaysLayer\n }\n L.control.layers({}, overlayLayers).addTo(map)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"html`\n

${count.features.length}
Bikes Used for Rides

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"md`## Layers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"md`### CitrixCycle Heat Layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"md`The CitrixCycle rides data are accessible via a REST endpoint on City of Raleigh's ArcGIS Server.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"ccRidesUrl = 'https://maps.raleighnc.gov/arcgis/rest/services/Hosted/CitrixCycleHistory/MapServer/0'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`We want to visualize the ridership for a given date selected via the Select Date input. To help this, we create an empty [Leaflet FeatureGroup](https://leafletjs.com/reference-1.5.0.html#featuregroup) into which we can remove the previously selected day's ridership data and add the newly selected day's ridership data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"ccRidesHeatFeatureGroup = L.featureGroup()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"md`Here we setup the logic for updating the CitrixCycle ridership data when a parameter changes. Note, there are several parameters that could trigger this block to run:\n- url: A new date is selected\n- radius: The radius for the heat layer is changed\n- blur: The blur of the heat layer is changed\n- gradient['0.5']: The middle value for the heat gradient is changed.\n\nWhen one of these parameters changes, the previous instance of ccRidesHeatFeature is removed from the map by running ccRidesHeatFeatureGroup.clearLayers(). Then we use the special esri-leaflet layer type, L.esri.Heat.featureLayer() to create an updated instance of the heat representation of the newly parametrized layer. Finally, that new layer is added to the map via ccRidesHeatFeatureGroup.addLayer(ccRidesHeatFeature)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"ccRidesHeatLayer = {\n ccRidesHeatFeatureGroup.clearLayers();\n let ccRidesHeatFeature = L.esri.Heat.featureLayer({\n url: ccRidesUrl,\n fields: ['objectid', 'received'],\n radius: pointRadiusSlider,\n blur: blurRadiusSlider,\n gradient: {\n '0': 'Black',\n '0.5': heatColor,\n '1': 'White'\n },\n timeField: 'received',\n from: moment(date),\n to: moment(date).add(1, 'days')\n });\n\n return ccRidesHeatFeatureGroup.addLayer(ccRidesHeatFeature);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"md`One extra thing we can do is find the number of unique bikes were ridden for the selected day. The work for this can primarily be done via the ArcGIS Server where the CitrixCycle data reside, but it requires building a query to the REST service specifically to return the unique ride ID values logged on the selected date. Unfortunately there is no field linking each point to a specific ride, but we can at least get some sense of fleet utilization.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"count = {\n let from = moment(date).valueOf();\n let to = moment(date).add(1, 'days').valueOf();\n let url = `${ccRidesUrl}/query?where=1%3D1&=&outFields=objectid%2Cid&returnGeometry=false&groupByFieldsForStatistics=id&outStatistics=%5B%7B%0D%0A\"statisticType\"%3A\"count\"%2C%0D%0A\"onStatisticField\"%3A\"id\"%2C%0D%0A\"outStatisticFieldName\"%3A\"count\"%0D%0A%7D%5D&f=pjson&time=${from}%2C${to}`\n let result = (await fetch(url)).json()\n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"md`### CitrixCycle Open Docks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1345,"value":"md`While there are some some datasets either through Google Maps or ArcGIS Online showing where CitrixCycle docks are or will be located, they don't appear to be linked directly to the maps on the CitrixCycle website or in the app. After some digging, I found the an API endpoint for the CitrixCycle docks data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"ccDocksUrl = 'https://citrixcycle.com/stations/stations/'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"md`I had some issues fetching the JSON feed directly. There appears to be some sort of CORS issue. Regardless, I found a [CORS bypasser](https://glitch.com/~cors-bypasser) on Glitch to help me out. I remixed it so that it is now my own personal proxy!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"ccDocksJSON = (await fetch(`https://cors-bypasser.glitch.me/bypass/${ccDocksUrl}`)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"md`The data returned from the CitrixCycle API are returned as JSON, but not the GeoJSON that Leaflet prefers. However, with the help of turf.js it is relatively simple to parse the JSON and transform it into GeoJSON.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"ccDocksGeoJSON = {\n let featuresArray = [];\n ccDocksJSON.forEach((x) => {\n if (x.location && x.type == \"OPEN\") {\n let geometry = x.location.reverse()\n let properties = {\n \"id\": x.id,\n \"locking_station_type\": x.locking_station_type,\n \"description\": x.description,\n \"address\": x.address,\n \"stocking_full\": x.stocking_full\n }\n let feature = turf.point(geometry, properties)\n featuresArray.push(feature)\n }\n })\n \n return turf.featureCollection(featuresArray)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"md`With the CitrixCycle docks data transformed into GeoJSON, we can create a layer represent the locations. While there are lots of ways to draw points, in this case we'll show circle markers sized based on the carrying capacity of the docking station.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"ccDocksLayer = L.geoJSON(ccDocksGeoJSON, {\n pointToLayer: (feature, latlng) => {\n return L.circleMarker(latlng, {\n radius: feature.properties.stocking_full / 2,\n fillColor: '#EF9A9A',\n fillOpacity: 0.5,\n color: '#E57373',\n opacity: 1,\n weight: 1.5\n })\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"md`### Existing Bike Facilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"bikeFacilitesLayer = L.esri.featureLayer({\n url: 'https://services.arcgis.com/v400IkDOw1ad7Yad/arcgis/rest/services/Existing_Bike_Facilities/FeatureServer/7',\n style: (feature) => {\n return {\n color: '#ffffff',\n dashArray: \"2, 5\",\n weight: 1.5\n }\n } \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"md`### Greenway Trails`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"ralGreenwaysLayer = L.esri.featureLayer({\n url: 'https://services.arcgis.com/v400IkDOw1ad7Yad/arcgis/rest/services/Greenway_Trails_All/FeatureServer/0',\n where: \"STATUS='Existing'\",\n style: feature => {\n return {\n color: '#FFB300',\n weight: 1,\n dashArray: \"2, 5\"\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"md`### Load Leaflet and plugins\nWhile loading libraries using Observable is generally straightforward, extending Leaflet with plugins was less clear to me. See [this thread](https://talk.observablehq.com/t/extending-leaflet-with-plugins/2006?u=maptastik) for some explanation on how and why to do it the way below\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"L = {\n const r = require.alias({leaflet: 'leaflet@1.4.0'});\n const L = await r('leaflet');\n if (!L._css) {\n document.head.appendChild(L._css = html`\n \n `);\n }\n L.esri = await r('esri-leaflet');\n L.esri.Heat = await r('esri-leaflet-heatmap');\n await r('leaflet.heat').catch(() => L.heatLayer);\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"md`### moment.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1249,"value":"md`### turf`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"turf = require('https://npmcdn.com/@turf/turf/turf.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"md`### Observable color input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"