2d:null 2e:["$","title",null,{"children":"Mapping Indego Bike #2679 w/ Google Maps | Ben Garvey | Observable"}] 33:T40b,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}

`34:[] 31:{"id":"3d69c39587ae16e8","slug":"mapping-indego-bike-2679-w-google-maps","title":"Mapping Indego Bike #2679 w/ Google Maps","thumbnail":"a1ca8407fa32ccda4baa71dfd92cb22686a2d5d4c9cdb74821db2795d364935c","access_level":"public","create_time":"$D2018-03-06T02:59:00.670Z","update_time":"$D2018-09-30T00:35:45.618Z","view_time":null,"first_public_time":"$D2018-03-06T03:24:55.467Z","has_unpublished_edits":null,"fork":{"id":"9302dfe7d009fbce","slug":"mapping-indego-bike-2679","title":"Mapping Indego Bike #2679 w/ Mapbox GL","owner":{"id":"4a7a81c4b995a82f","login":"bengarvey","name":"Ben Garvey"}},"stars":1,"starred":false,"owner":{"type":"team","id":"4a7a81c4b995a82f","login":"bengarvey","name":"Ben Garvey","avatar_url":"https://avatars-next.observableusercontent.com/67019b2433e6482edcefba53f1b1768d9be40c20121c9ea154a755a28e23483a","tier":"starter_2024"},"version":934,"publish_version":934,"role":null,"authored":false,"authors":[{"type":"individual","id":"b15d593d6d699aa9","login":"bengarvey","name":"Ben Garvey","avatar_url":"https://avatars-next.observableusercontent.com/67019b2433e6482edcefba53f1b1768d9be40c20121c9ea154a755a28e23483a","tier":null}],"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":{"title":"Mapping Indego Bike #2679 w/ Google Maps","cells":[{"id":0,"value":"md`# Mapping Indego Bike #2679 w/ Google Maps\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\nRead more about it on [billypenn.com](https://billypenn.com/2018/03/12/this-sexy-mural-arts-bike-is-the-most-popular-ride-in-all-philly-bike-share/).\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"html`

Philadelphia, PA

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"\ndiv = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"map = new google.maps.Map(div, {\n center: {lat: 39.950481, lng: -75.172859},\n zoom: 14\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"// Get your own key\ngoogleApiKey = 'AIzaSyDoo0aVszzleQ4gp3qKfhNRfHhvRK80tUU'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"// This embeds my key. Get your own key - this one will be cycled out very soon!\ngoogle = require(`https://maps.googleapis.com/maps/api/js?key=${googleApiKey}`)\n .catch(() => window.google)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":473,"value":"mostPopularBike = (await fetch(url)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":" flightPlanCoordinates = [\n {lat: 37.772, lng: -122.214},\n {lat: 21.291, lng: -157.821},\n {lat: -18.142, lng: 178.431},\n {lat: -27.467, lng: 153.027}\n ]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"coordinates = mostPopularBike.trips.map( (pair) => { return {lat: parseFloat(pair[1]), lng: parseFloat(pair[0])} } )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":" path = new google.maps.Polyline({\n path: coordinates,\n geodesic: true,\n strokeColor: '#000000',\n strokeOpacity: 0.3,\n strokeWeight: 0.3\n })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"\npath.setMap(map)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"microSecondsPerDay = 1000 * 60 * 60 * 24","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"percentMoreTrips = (((mostPopularBike.stats.overall.avgTripsPerDay.muralArts - mostPopularBike.stats.overall.avgTripsPerDay.normal) / mostPopularBike.stats.overall.avgTripsPerDay.normal)*100).toFixed(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"percentMoreService = (((mostPopularBike.stats.overall.avgTimeInService.muralArts - mostPopularBike.stats.overall.avgTimeInService.normal)/mostPopularBike.stats.overall.avgTimeInService.normal)*100).toFixed(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"avgTripsPerDay = [\n {name: \"Normal\", value: mostPopularBike.stats.overall.avgTripsPerDay.normal},\n {name: \"Mural Arts\", value: mostPopularBike.stats.overall.avgTripsPerDay.muralArts}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"avgTimeInService = [\n {name: \"Normal\", value: mostPopularBike.stats.overall.avgTimeInService.normal/microSecondsPerDay},\n {name: \"Mural Arts\", value: mostPopularBike.stats.overall.avgTimeInService.muralArts/microSecondsPerDay}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"html`\n

Are Mural Arts Bikes More Frequently Ridden?

One surprising thing we found was that bike #2679 was painted a with a special design as part of the Mural Arts program. Was this the mostly frequenly used bike because it stood out from the rest? To find out, I calculated statistics on the 10 mural arts bikes and compared them to the normal bikes.

\n\n

Total Bikes

Normal: ${mostPopularBike.stats.overall.bikes.normal}
Mural Arts: ${mostPopularBike.stats.overall.bikes.muralArts}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"html`\n

Avg Trips Per Day Per Bike

Mural Arts: ${mostPopularBike.stats.overall.avgTripsPerDay.muralArts.toFixed(2)} trips (+${percentMoreTrips}%)
Normal: ${mostPopularBike.stats.overall.avgTripsPerDay.normal.toFixed(2)} trips

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"avgTripsPerDayChart = {\n const x = d3.scaleLinear()\n .domain([0, d3.max(avgTripsPerDay, d => d.value)]).nice()\n .range([margin.left, width - margin.right])\n \n const y = d3.scaleBand()\n .domain(avgTripsPerDay.map(d => d.name))\n .range([height - margin.bottom, margin.top])\n .padding(0.1)\n \n const xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n \n const yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))\n \n const svg = d3.select(DOM.svg(width, height));\n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\").data(avgTripsPerDay).enter().append(\"rect\")\n .attr(\"x\", d => x(0))\n .attr(\"y\", d => y(d.name))\n .attr(\"height\", y.bandwidth())\n .attr(\"width\", d => x(d.value) - x(0));\n \n svg.append(\"g\")\n .call(xAxis);\n \n svg.append(\"g\")\n .call(yAxis);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"html`\n

Avg Time In Service Per Bike

Mural Arts: ${(mostPopularBike.stats.overall.avgTimeInService.muralArts/microSecondsPerDay).toFixed(2)} days (+${percentMoreService}%)
Normal: ${(mostPopularBike.stats.overall.avgTimeInService.normal/microSecondsPerDay).toFixed(2)} days

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"avgTimeInServiceChart = {\n const x = d3.scaleLinear()\n .domain([0, d3.max(avgTimeInService, d => d.value)]).nice()\n .range([margin.left, width - margin.right])\n \n const y = d3.scaleBand()\n .domain(avgTimeInService.map(d => d.name))\n .range([height - margin.bottom, margin.top])\n .padding(0.1)\n \n const xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n \n const yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))\n \n const svg = d3.select(DOM.svg(width, height));\n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\").data(avgTimeInService).enter().append(\"rect\")\n .attr(\"x\", d => x(0))\n .attr(\"y\", d => y(d.name))\n .attr(\"height\", y.bandwidth())\n .attr(\"width\", d => x(d.value) - x(0));\n \n svg.append(\"g\")\n .call(xAxis);\n \n svg.append(\"g\")\n .call(yAxis);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"html`\n

Conclusion

The Mural Arts bikes were more frequently ridden because they were chosen slightly more often (9.55%) than the other bikes, but also because they have been in service longer than the other bikes (28.15% longer).

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"height = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"margin = ({top: 20, right: 0, bottom: 30, left: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"html`\n\n`\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`\nForked from [this excellent Google Maps example](https://beta.observablehq.com/@tmcw/using-google-maps) by [Tom MacWright](https://beta.observablehq.com/@tmcw)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"