2e:null 2f:["$","title",null,{"children":"30 Day Map Challenge: 12. Time & Space | Jo Wood | Observable"}] 34:T63c,function gridMap(options = {}) { const { w = 640, prefix = "average", fill = "oklch(50% 0.08 50deg)", title = "Some title here" } = options; const data = createTidy(prefix); const maxTime = Math.max( 15, d3.max(data, (d) => d.time) ); return Plot.plot({ width: w, height: 0.86 * w, axis: null, y: {domain: [0, maxTime]}, marks: [ Plot.frame({ strokeWidth: 0.5, stroke: fill, fill: fill, fillOpacity: 0.1 }), Plot.areaY(data, { fx: "gridCol", fy: "gridRow", x: "year", y: "time", curve: "basis", fill: fill, tip: true, title: (d) => `${d.fullName} ${d.year} Time to services: ${Math.floor(d.time)}m${Math.round((d.time % 1) * 60)}s` }), Plot.gridY({ interval: 1, stroke: "white", strokeOpacity: 1, strokeWidth: (0.005 * w) / maxTime }), Plot.ruleY([15], {strokeWidth: w / 120}), Plot.text( data, Plot.selectFirst({ fx: "gridCol", fy: "gridRow", frameAnchor: "bottom-left", dx: 4, dy: -4, fontSize: w / 40, text: "shortName", fill: "white" }) ), Plot.text([{gridCol: 1, gridRow: 1, label: title}], { fx: [4], fy: [7], text: "label", fontFamily: "Oswald", fontSize: w / 20, dx: w / 8, dy: 0, textAnchor: "start", frameAnchor: "left", fill: fill }) ] }); }35:T655,

Can London become a 15-minute City?

Each small grid square is a London borough. Darker areas show predicted time taken to nearest key service by bicyle. The dark horizontal line represents 15 minutes; thin light lines represent 1-minute intervals. The left of each square was 2014, the right 2019. Areas that slope down to the right representing improving travel times; sloping up, worsening times.

${gridMap({ prefix: "PSCyct", fill: "oklch(40% 0.14 260deg)", title: "Closest primary school" })} ${gridMap({ prefix: "SSCyct", fill: "oklch(40% 0.14 320deg)", title: "Closest secondary school" })} ${gridMap({ prefix: "FECyct", fill: "oklch(40% 0.14 20deg)", title: "Closest FE college" })} ${gridMap({ prefix: "5000EmpCyct", fill: "oklch(40% 0.10 80deg)", title: "Large employment centres" })} ${gridMap({ prefix: "GPCyct", fill: "oklch(40% 0.14 140deg)", title: "Closest GP surgery" })} ${gridMap({ prefix: "HospCyct", fill: "oklch(40% 0.09 200deg)", title: "Closest hospital" })}

36:[{"id":"95c0e770e90e8fffbf49ba429d29af6e28684d277e48c9232e0e1d7fc8c72a5e2370df2758d0c3e7c5dc59c20279a0e0ca3137cb6b53c56b6829d3e3f5c9dd35","href":"https://static.observableusercontent.com/files/95c0e770e90e8fffbf49ba429d29af6e28684d277e48c9232e0e1d7fc8c72a5e2370df2758d0c3e7c5dc59c20279a0e0ca3137cb6b53c56b6829d3e3f5c9dd35","name":"travelTimes.csv","type":"text/csv","lastModified":1731431196805.036,"size":12777}] 32:{"id":"8cc8d329bb0600cd","slug":"tdmc2024_day12","title":"30 Day Map Challenge: 12. Time & Space","thumbnail":"99288c546e52116038db4b0190d414b7b7a5a874ae3d474cb59011bc2bcf5a18","access_level":"public","create_time":"$D2024-11-12T06:45:13.314Z","update_time":"$D2026-09-07T12:58:15.217Z","view_time":null,"first_public_time":"$D2024-11-12T20:23:16.054Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":535,"publish_version":535,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"bf1478ed3832e63a","slug":"30-day-map-challenge-2024","title":"30 day map challenge 2024","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"30 Day Map Challenge: 12. Time & Space","cells":[{"id":0,"value":"# 30 Day Map Challenge: 12. Time & Space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":510,"value":"_This is the original page produced during the 2024 30-day map challenge but with minor edits to use the Observable 2.0 standard library._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"Space and Time are no more strongly linked than when considering movement. The UK government provides summary statistics about [journey times](https://www.gov.uk/government/statistical-data-sets/journey-time-statistics-data-tables-jts) from home residence to access some key services. These provide an interesting set of data to map.\n\nRather than show full country-wide patterns, I thought' I'd focus on London, and to keep the maps understandable, I've chosen to a gridded version of the 33 local authorities within the Greater London area. The grid layout is thanks to [After The Flood](https://aftertheflood.com/journal/we-created-a-new-data-service-to-benefit-citizens-for-future-cities-catapult).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"const londonGrid = d3.csv(\n \"https://gicentre.github.io/data/geoTutorials/londonCentroidsAndGrid.csv\",\n d3.autoType\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"{\n const w = 640;\n display(\n Plot.plot({\n width: w,\n height: 0.86 * w,\n axis: null,\n marks: [\n Plot.cell(londonGrid, {\n x: \"gridCol\",\n y: \"gridRow\",\n fill: \"oklch(50% 0.08 50deg)\"\n }),\n Plot.text(londonGrid, {\n x: \"gridCol\",\n y: \"gridRow\",\n dy: w / -100,\n fill: \"white\",\n text: (d) => d.shortName,\n fontSize: w / 25\n }),\n Plot.text(londonGrid, {\n x: \"gridCol\",\n y: \"gridRow\",\n dy: w / 30,\n fill: \"white\",\n text: (d) => d.fullName,\n fontSize: w / 70,\n lineWidth: 8\n })\n ]\n })\n );\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"The travel times for the years 2014-2019 (excluding 2018) to a range of key services – primary, secondary and tertiary education, employment, GP surgeries, pharmacies and hospitals and food stores were extracted from tables `JTS0401`, `JTS0402`, `JTS0403`, `JTS0404`, `JTS0405`, `JTS0406`, `JTS0407` and `JTS0409` available from the [Department of Transport](https://www.gov.uk/government/statistical-data-sets/journey-time-statistics-data-tables-jts#full-publication-update-history). Travel times via bicycle were selected as indicative of the potential for a [15 minute city](https://en.wikipedia.org/wiki/15-minute_city). It is important to note that these times represent an average potential travel time if people were to move by bicycle. It does not incorporate actual cycling prevalence. However it does provide a good proxy for the distance of key services for residents of each London borough.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"const ttMessy = FileAttachment(\"travelTimes.csv\").csv({typed: true});","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"Inputs.table(ttMessy, {layout: \"auto\", width: 900, rows: 6.5})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"The data are not in [tidy format](https://www.jstatsoft.org/index.php/jss/article/view/v059i10/772) so I converted them to a 'long' table and joined it to the London Grid table with calls to [tidy.js](https://pbeshai.github.io/tidy/):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"function createTidy(prefix) {\n return T.tidy(\n ttMessy,\n T.rename({\n [`${prefix}2019`]: 2019,\n [`${prefix}2017`]: 2017,\n [`${prefix}2016`]: 2016,\n [`${prefix}2015`]: 2015,\n [`${prefix}2014`]: 2014\n }),\n T.filter((d) => d.name !== \"Inner London\" && d.name !== \"Outer London\"),\n T.pivotLonger({\n cols: [2019, 2017, 2016, 2015, 2014],\n namesTo: \"year\",\n valuesTo: \"time\"\n }),\n T.select([\"code\", \"name\", \"year\", \"time\"]),\n T.leftJoin(londonGrid, {by: {GSSCode: \"code\"}})\n );\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"Inputs.table(createTidy(\"average\"), {layout: \"auto\", width: 900, rows: 6.5})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"## Map Design\n\nI chose to show time in minutes to each key service on the vertical axis of each borough square and year of travel time estimates on the horizontal axis. I wanted to emphasise the '15 minutes' time scale so used a bold black line to represent that important threshold. For some services and boroughs that exceed those 15 minutes (e.g. closest hospital) I scaled the vertical axis to accommodate the longest time.\n\nIf I had more time, I would have provided a graphical legend on the page, but for today, a text explanation will have to suffice.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"$34","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"---\n ### Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"_For shaping data tables:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"import * as T from \"npm:@tidyjs/tidy@2.6\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"2","titling":"auto"}} 33:"$32:body"