2c:null 2d:["$","title",null,{"children":"Mapping Indego Bike #2679 w/ Mapbox GL | Ben Garvey | Observable"}] 32:T40c,html`

Bike #2679 Stats

Trips

${mostPopularBike.stats.trips}

Longest Trip

${mostPopularBike.stats.longestDistance.toFixed(2)} miles

Average Trip Length

${mostPopularBike.stats.avgDistance.toFixed(2)} miles

Total Distance Travelled

${mostPopularBike.stats.totalDistance.toFixed(2)} miles

Longest Trip Duration

${(((mostPopularBike.stats.longestDuration)/60)/60).toFixed(2)} hours

Average Trip Duration

${(((mostPopularBike.stats.avgDuration)/60)).toFixed(2)} minutes

Total Time in Use

${((((mostPopularBike.stats.totalDuration)/60)/60)/24).toFixed(2)} days

Most Common Stops

${mostPopularBike.stats.topStations[0].name} - ${mostPopularBike.stats.topStations[0].trips}
${mostPopularBike.stats.topStations[1].name} - ${mostPopularBike.stats.topStations[1].trips}
${mostPopularBike.stats.topStations[2].name} - ${mostPopularBike.stats.topStations[2].trips}

`33:[] 30:{"id":"9302dfe7d009fbce","slug":"mapping-indego-bike-2679","title":"Mapping Indego Bike #2679 w/ Mapbox GL","thumbnail":"d1a446729f05a9538073a9546b645750db8e4ec852b4c7956b33172b5ba16411","access_level":"public","create_time":"$D2018-03-04T13:36:39.684Z","update_time":"$D2018-03-06T03:28:33.861Z","view_time":null,"first_public_time":"$D2018-03-04T15:42:11.006Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4a7a81c4b995a82f","login":"bengarvey","name":"Ben Garvey","avatar_url":"https://avatars-next.observableusercontent.com/67019b2433e6482edcefba53f1b1768d9be40c20121c9ea154a755a28e23483a","tier":"starter_2024","bio":""},"version":671,"publish_version":671,"role":null,"authored":false,"authors":[{"type":"individual","id":"b15d593d6d699aa9","login":"bengarvey","name":"Ben Garvey","avatar_url":"https://avatars-next.observableusercontent.com/67019b2433e6482edcefba53f1b1768d9be40c20121c9ea154a755a28e23483a","tier":null,"bio":""}],"members":[{"type":"individual","id":"b15d593d6d699aa9","login":"bengarvey","name":"Ben Garvey","avatar_url":"https://avatars-next.observableusercontent.com/67019b2433e6482edcefba53f1b1768d9be40c20121c9ea154a755a28e23483a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mapping Indego Bike #2679 w/ Mapbox GL","cells":[{"id":0,"value":"md`# Mapping Indego Bike #2679 w/ Mapbox GL\n\nWe recently created a new front end engineering challenge project at [Magento BI](https://magento.com/products/business-intelligence) and it uses the [Philly's Indego bike service](https://www.rideindego.com/about/data/) as the dataset. \n\nI'm obsessed, so I [wrote a script](https://github.com/bengarvey/popular-bike) to parse the data and find the most popular bike.\n\nBelow is a trip history of the most frequently rode bike (#2679) from 2015-2017. It's been everywhere!\n\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"map = {\n let map = new mapboxgl.Map({\n container,\n center: [\n -75.172859, 39.950481\n ],\n zoom: 13,\n style: 'mapbox://styles/mapbox/streets-v9',\n scrollZoom: false\n });\n \n if (showNavigationControl) {\n map.addControl(new mapboxgl.NavigationControl(), 'top-right');\n }\n\n try {\n yield map;\n yield invalidation;\n } finally {\n map.remove();\n }\n}\t\t","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"viewof showNavigationControl = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuZ2FydmV5IiwiYSI6ImNqZWYyMzEwYTFiYm0yd29kcjdiaWMxbjEifQ.GMvsUiauokXd-E-klQAlHw';\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"url = 'https://raw.githubusercontent.com/bengarvey/popular-bike/master/data/popular-bike.json'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"mostPopularBike = (await fetch(url)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"map.on('load', function () {\n \tconsole.log(map);\n map.addLayer({\n \"id\": \"\" + Math.round(Math.random()*100),\n \"type\": \"line\",\n \"source\": {\n \"type\": \"geojson\",\n \"data\": {\n \"type\": \"Feature\",\n \"properties\": {},\n \"geometry\": {\n \"type\": \"LineString\",\n \"coordinates\": mostPopularBike.trips\n }\n }\n },\n \"layout\": {\n \"line-join\": \"round\",\n \"line-cap\": \"round\"\n },\n \"paint\": {\n \"line-color\": \"#333\",\n \"line-width\": 1,\n \t\"line-opacity\":0.1\n }})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"html``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"html`\n\n`\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`\nForked from [this excellent Mapbox example](https://beta.observablehq.com/@tmcw/using-mapbox-gl-js) by [Tom MacWright](https://beta.observablehq.com/@tmcw)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"