30:T642,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 }) ] }); }31: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" })}

32:[{"id":"95c0e770e90e8fffbf49ba429d29af6e28684d277e48c9232e0e1d7fc8c72a5e2370df2758d0c3e7c5dc59c20279a0e0ca3137cb6b53c56b6829d3e3f5c9dd35","href":"https://static.observableusercontent.com/files/95c0e770e90e8fffbf49ba429d29af6e28684d277e48c9232e0e1d7fc8c72a5e2370df2758d0c3e7c5dc59c20279a0e0ca3137cb6b53c56b6829d3e3f5c9dd35","name":"travelTimes.csv","type":"text/csv","lastModified":1731431196805.036,"size":12777}] 2e:{"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"},{"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"},{"id":32,"value":"londonGrid = d3.csv(\n \"https://gicentre.github.io/data/geoTutorials/londonCentroidsAndGrid.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"{\n const w = 640;\n return 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}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":110,"value":"ttMessy = FileAttachment(\"travelTimes.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"Inputs.table(ttMessy, { layout: \"auto\", width: 900, rows: 6.5 })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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":"ojs"},{"id":143,"value":"Inputs.table(createTidy(\"average\"), { layout: \"auto\", width: 900, rows: 6.5 })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":166,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":7,"value":"---\n ### Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"_For shaping data tables:_","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"T = require(\"@tidyjs/tidy@2.5/dist/umd/tidy.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}