2c:null 2d:["$","title",null,{"children":"Get the latest London Bike Hire situation, now | aidans | Observable"}] 32:[] 30:{"id":"6c0805f7e45377f8","slug":"latest-london-bike-hire-data-now","title":"Get the latest London Bike Hire situation, now","thumbnail":"0812032b831a1849f1dc9edf721d3df35fd1aabdee5beec300ba83bca60ada02","access_level":"public","create_time":"$D2022-10-18T12:39:32.154Z","update_time":"$D2023-07-27T14:07:10.787Z","view_time":null,"first_public_time":"$D2022-10-18T13:04:17.937Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"91260bf4cff523bb","login":"aidans","name":"","avatar_url":"https://avatars-next.observableusercontent.com/463f6574e67836b406b827afbae44ee2d630edd05f4c02684726a1b801179c67","tier":"starter_2024"},"version":125,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"11e4ed645deef121","login":"aidans","name":"","avatar_url":"https://avatars-next.observableusercontent.com/463f6574e67836b406b827afbae44ee2d630edd05f4c02684726a1b801179c67","tier":null}],"members":[{"type":"individual","id":"11e4ed645deef121","login":"aidans","name":"","avatar_url":"https://avatars-next.observableusercontent.com/463f6574e67836b406b827afbae44ee2d630edd05f4c02684726a1b801179c67","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"ee4b9b66566f0490","slug":"how-to","title":"how-to","owner":{"id":"91260bf4cff523bb","login":"aidans","name":""}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"viewof update = Inputs.button(\"Update\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"data.filter((row) => row.name == \"Rampayne Street, Pimlico\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"mutable lastRetrieved = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"vlEmbed = require(\"vega-embed\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"turf = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"