31:[] 2f:{"title":"Get the latest London Bike Hire situation, now","cells":[{"id":0,"value":"# Get the latest London Bike Hire situation, now\n\nHere's a map of how full bike hire stations in Central London. It's from TFL's **live API**. Station dots are **sized by their capacity** (how many bikes they hold) and **coloured by how full they are**. Blue indicates full; red indicates empty; white indicates half-full. These data are of **now** (when this page was last refreshed) and **changes dramatically depending between different times of the day**.","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"viewof update = Inputs.button(\"Update\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"vlEmbed({\n data: { values: data },\n mark: { type: \"point\", filled: true },\n width: 600,\n height: 400,\n title: \"Situation at \" + lastRetrieved,\n encoding: {\n longitude: { field: \"lon\" },\n latitude: { field: \"lat\" },\n size: { field: \"capacity\", type: \"quantitative\" },\n color: {\n field: \"proportionFull\",\n aggregate: \"mean\",\n scale: { domain: [0, 1], scheme: \"redblue\" }\n },\n tooltip: [{ field: \"commonName\" }, { field: \"area\" }]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"The data are here. You can use in your notebook with
`import {data} from \"@aidans/latest-london-bike-hire-data-now\"`.","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"data.filter((row) => row.name == \"Rampayne Street, Pimlico\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"slippymap={\n const container = yield html`

`;\n const map = new maplibregl.Map({\n boxZoom: true,\n pitch: 0,\n bearing: 0,\n maplibreLogo: true,\n container: container,\n bounds: turf.bbox(jsonStations),\n style: \"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json\",\n scrollZoom: true\n });\n\n map.on(\"load\", function () {\n map.addSource(\"stations\", {\n type: \"geojson\",\n data: jsonStations\n });\n map.addLayer({\n id: \"stations-layer\",\n type: \"circle\",\n source: \"stations\"\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"## How to do it\n### Getting the data\n\nThe public API provides JSON which I retrieve below.","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"mutable lastRetrieved = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"rawData = {\n update;\n const dateParser = d3.timeFormat(\"%A %d %B at %H:%M:%S\");\n mutable lastRetrieved = dateParser(new Date());\n return await (await fetch(\"https://api.tfl.gov.uk/BikePoint/\")).json();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"This gives us an array of stations, but some of the data such as the number of bike available at bike stations are buried in the JSON. Here, I extract the data I need using JavaScript's `map()` function.\n\nThe number of available bikes are buried inside an array of \"additionalProperties\" properties. We extract then and use these to calculate how full/empty they are and their bike capacity.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"data = rawData.map((item) => {\n let numBikes = 0;\n let numEmpty = 0;\n let terminalName = 0;\n //loop through the additionalProperties and find the one that has the number of docks\n for (let additionalProperties of item.additionalProperties) {\n if (additionalProperties.key == \"NbDocks\")\n numBikes = additionalProperties.value;\n if (additionalProperties.key == \"NbEmptyDocks\")\n numEmpty = additionalProperties.value;\n if (additionalProperties.key == \"TerminalName\")\n terminalName = additionalProperties.value;\n }\n //return an object for this station\n return {\n id: +terminalName,\n name: item.commonName,\n area: item.commonName.split(\",\")[1].trim(),\n lon: item.lon,\n lat: item.lat,\n numBikes: parseInt(numBikes), //convert to an integer\n numEmpty: parseInt(numEmpty), //convert to an integer\n capacity: parseInt(numBikes) + parseInt(numEmpty),\n proportionFull:\n parseInt(numBikes) / (parseInt(numBikes) + parseInt(numEmpty))\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"jsonStations = turf.featureCollection(\n data.map((item) =>\n turf.point([item.lon, item.lat], {\n name: item.commonName\n })\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"### Visually summarising the data\n\nI used Vega-Lite (JSON version) to visually summarise the data (see top of page).\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"vlEmbed = require(\"vega-embed\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"turf = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"{\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return href;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}