31: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}

`32:[] 2f:{"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"},{"id":246,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":310,"value":"viewof showNavigationControl = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":475,"value":"url = 'https://raw.githubusercontent.com/bengarvey/popular-bike/master/data/popular-bike.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"mostPopularBike = (await fetch(url)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":439,"value":"html``\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"html`\n\n`\n ","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}