30:T456,### Data query Once set up the following query was issued to extract data within a bounding box of the UK, selecting point features with names starting with either `Greggs` or `Pret A Manger`: ```sql COPY( SELECT id, names.primary AS name, categories.primary AS category, geometry FROM read_parquet('s3://overturemaps-us-west-2/release/2024-11-13.0/theme=places/type=place/*', filename=true, hive_partitioning=1) WHERE bbox.xmin BETWEEN -10.568848 AND 1.867676 AND bbox.ymin BETWEEN 49.496675 AND 60.887700 AND (names.primary LIKE 'Greggs%' OR names.primary LIKE 'Pret A Manger%') ) TO 'greggsAndPret.geojson' WITH (FORMAT GDAL, DRIVER 'GeoJSON'); ``` With the downloaded GeoJSON format results I used [MapShaper](https://mapshaper.org) to reproject the longitude/latitude coordinate system to Ordnance Survey national grid (`-proj +init=EPSG:27700`); remove the few points not in Britain; and convert into a slightly more compact TopoJSON format, attaching the resulting file to this page:31:T64f,function cityMap(type, options = {}) { const { w = 640, title = "", dist = 14000 } = options; const [cx, cy, river, mst, clr] = type === "Pret" ? [centres.london.x, centres.london.y, thames, mstLondon(dist), clrs.pret] : [ centres.newcastle.x, centres.newcastle.y, tyne, mstNewcastle(dist), clrs.greggs ]; const data = greggsAndPret.filter( (d) => d.type === type && Math.hypot(d.x - cx, d.y - cy) < dist ); const innerCircle = TDMC.boundsCircular(cx, cy, { r: dist }).feature; const outerCircle = TDMC.boundsCircular(cx, cy, { r: dist * 1.1 }).feature; return Plot.plot({ width: w, height: w, projection: { type: "reflect-y", domain: outerCircle }, color: { range: [clrs.greggs, clrs.pret] }, marks: [ Plot.voronoi(greggsAndPret, { x: "x", y: "y", fill: "type", opacity: 0.3, stroke: "white", strokeWidth: w / 640, clip: innerCircle }), Plot.geo(river, { fill: clrs.river, clip: outerCircle }), Plot.arrow(mst, { x1: "x1", y1: "y1", x2: "x2", y2: "y2", headLength: 0, strokeWidth: w / 160, stroke: clr }), Plot.dot(data, { x: "x", y: "y", stroke: "type", strokeWidth: w / 320, fill: "white", r: 3 }), Plot.geo(innerCircle, { strokeWidth: w / 160, opacity: 0.6 }), Plot.text([title], { frameAnchor: "top-right", fontSize: w / 20, fill: clr }) ] }); }32:T9a0,function mainMap() { const [w, h] = [900, 900]; return Plot.plot({ style: `background: oklch(70% 0.1 70deg / 5%); box-shadow: inset 0 0 8em 8em oklch(60% 0.2 90deg /5%);`, width: w, height: h, insetRight: w / 3, insetTop: h / 6, insetBottom: h / 20, projection: { type: "reflect-y", domain: land }, color: { range: [clrs.greggs, clrs.pret] }, marks: [ // Nearest outlet type Plot.voronoi(greggsAndPret, { x: "x", y: "y", fill: "type", opacity: 0.3, stroke: "white", strokeWidth: w / 900, clip: land }), Plot.geo(land, { opacity: 0.2 }), // Outlet location Plot.dot(greggsAndPret, { x: "x", y: "y", fill: "type", r: h / 800 }), // Annotation text Plot.text( [ "Given a choice of two, is my closest food outlet a Greggs or a Pret A Manger? Regions coloured red if their closest food outlet is a Pret or blue if it is a Greggs. The outlets themselves are shown as coloured dots." ], { x: 48000, y: 1055000, textAnchor: "start", lineAnchor: "top", fontSize: w / 70, lineWidth: 39 } ), Plot.text( [ "Newcastle is known as Britain's 'Sausage roll capital'. Greggs was founded here in 1951 in Gosforth High Street and the stores remain popular and are seen as part of the city's identity. The region has over 70 Greggs outlets. There are just two Pret A Manger shops here." ], { x: 595000, y: 700000, textAnchor: "middle", lineAnchor: "top", fontSize: w / 70, lineWidth: 15, fontFamily: "Noto Sans", fontWeight: 600, fill: clrs.greggs } ), Plot.text( [ "The first Pret A Manger was opened in Hampstead, London in 1983 but traded for just 18 months. Other branches opened up in the late 1980s specialising in handmade 'natural' food. Today there are over 290 of them in London." ], { x: 720000, y: 60000, textAnchor: "middle", lineAnchor: "top", fontSize: w / 70, lineWidth: 30, fontFamily: "OM Serif Display", fontWeight: 600, fill: clrs.pret } ), TDMC.drawBorder() ] }); }33:[{"id":"004970940f9522fddf25ea3da434eab37ee6cb404199e096b43503eca4427046c6a2121b8d35234b38c5cd48ba5dcfff18fc8d0a5eda132f3984cdb9c105baf4","href":"https://static.observableusercontent.com/files/004970940f9522fddf25ea3da434eab37ee6cb404199e096b43503eca4427046c6a2121b8d35234b38c5cd48ba5dcfff18fc8d0a5eda132f3984cdb9c105baf4","name":"thames.json","type":"application/json","lastModified":1732920697737.062,"size":8153},{"id":"05af7f7e8c755abc527c31519dda6ce969646f665a9545722c4d9e2e953baa53ac52e112c3f8e0cf844baad641b21acba5c9a930c31acf4561ed68d5bd5dec61","href":"https://static.observableusercontent.com/files/05af7f7e8c755abc527c31519dda6ce969646f665a9545722c4d9e2e953baa53ac52e112c3f8e0cf844baad641b21acba5c9a930c31acf4561ed68d5bd5dec61","name":"tyne.json","type":"application/json","lastModified":1732921238792.323,"size":6934},{"id":"06f4502e37c08920e89294033c205af2cfbfcf31408ee78f3213b89588a7ce5ee48e75ac0247e50736def482a029991832fca99ddc5401af9b5afec112d7fdfd","href":"https://static.observableusercontent.com/files/06f4502e37c08920e89294033c205af2cfbfcf31408ee78f3213b89588a7ce5ee48e75ac0247e50736def482a029991832fca99ddc5401af9b5afec112d7fdfd","name":"greggsAndPret.json","type":"application/json","lastModified":1732879489656.206,"size":449658},{"id":"3adbdd10588c8c217c86edbfbae4ec7c3d6e4f28216f65446d628d6f03f42e068a4b67c9b0a698ec1d3a43c0fb1708b98d5236ab63f3429ffd5ca4f900d817c8","href":"https://static.observableusercontent.com/files/3adbdd10588c8c217c86edbfbae4ec7c3d6e4f28216f65446d628d6f03f42e068a4b67c9b0a698ec1d3a43c0fb1708b98d5236ab63f3429ffd5ca4f900d817c8","name":"land.json","type":"application/json","lastModified":1732880720653.846,"size":25996}] 2e:{"title":"30 Day Map Challenge: 29. Data: Overture","cells":[{"id":0,"value":"# 30 Day Map Challenge: 29. Data: Overture","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"I'd not used [Overture](https://overturemaps.org) data before today's challenge, so it provided a good excuse to explore it's [API querying mechanism](https://docs.overturemaps.org/getting-data) and to have some fun with the results.\n\nOverture claims a rich set of points of interest and its API provides a convenient way of selecting subsets of the POIs. I though't I'd have a look at the distribution of [Pret A Manger](https://www.pret.co.uk/en-GB) and [Greggs](https://www.greggs.co.uk) outlets as places commonly used in Britain for lunchtime sustenance. The comparison between the two outlets, serving a similar function but loaded with very different cultural associations was first suggested over a decade ago by [Mike Bird and Tom Forth](https://www.tomforth.co.uk/eatmap)","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"## Using the Overture API\n\nThis involved installing a local copy of [DuckDB](https://duckdb.org/#quickinstall) and starting a DuckDB session from the command line:","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"### Setup\n\nThis involves activating the spatial extension to allow bounding box queries; activating httpfs for file transfer and using the Amazon S3 cloud server for retrieving data:\n\n```sql\nINSTALL SPATIAL;\nINSTALL httpfs;\nLOAD spatial;\nSET s3_region='us-west-2';\n```","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"Inputs.table(greggsAndPret, { layout: \"auto\", width: 320, rows: 6.5 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"greggsAndPret = FileAttachment(\"greggsAndPret.json\")\n .json()\n .then((d) => topojson.feature(d, \"greggsAndPret\"))\n .then((fc) =>\n d3.sort(\n fc.features.map((d) => ({\n type: d.properties.name.startsWith(\"Greggs\") ? \"Greggs\" : \"Pret\",\n x: Math.round(d.geometry.coordinates[0]),\n y: Math.round(d.geometry.coordinates[1])\n })),\n (d) => d.type\n )\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"prets = greggsAndPret.filter((d) => d.type === \"Pret\").map((d) => [d.x, d.y])","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"greggs = greggsAndPret.filter((d) => d.type === \"Greggs\").map((d) => [d.x, d.y])","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"Given the stereotypical cultural-geographic associations of the two brands (Greggs seen as \"northern\" and down-to-earth; Pret seen as London-based office worker fodder), it might be interesting to filter both point sets to be within a fixed distance of the centre of London and centre of Newcastle (more on this later):","pinned":false,"hidden":false,"mode":"md"},{"id":473,"value":"centres = ({\n london: { x: 531331, y: 179645 },\n newcastle: { x: 424907, y: 564134 }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"bounds = ({\n london: TDMC.boundsFromData([\n {\n easting: centres.london.x - distance.london / 2,\n northing: centres.london.y - distance.london / 2\n },\n {\n easting: centres.london.x + distance.london / 2,\n northing: centres.london.y + distance.london / 2\n }\n ]),\n newcastle: TDMC.boundsFromData([\n {\n easting: centres.newcastle.x - distance.newcastle / 2,\n northing: centres.newcastle.y - distance.newcastle / 2\n },\n {\n easting: centres.newcastle.x + distance.newcastle / 2,\n northing: centres.newcastle.y + distance.newcastle / 2\n }\n ])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"To keep the background of the city maps simple, I chose just to use just the major river running through each. For this I downloaded the water features from Overture from which I selected the Thames and Tyne polygons:\n\n```sql\nCOPY( \n SELECT\n id,\n geometry \n FROM read_parquet('s3://overturemaps-us-west-2/release/2024-11-13.0/theme=base/type=water/*', filename=true, hive_partitioning=1)\n WHERE bbox.xmin BETWEEN -10.568848 AND 1.867676 \n AND bbox.ymin BETWEEN 49.496675 AND 60.887700\n) TO 'rivers.geojson' WITH (FORMAT GDAL, DRIVER 'GeoJSON');\n```","pinned":false,"hidden":false,"mode":"md"},{"id":632,"value":"thames = FileAttachment(\"thames.json\")\n .json()\n .then((d) => topojson.feature(d, \"thames\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"tyne = FileAttachment(\"tyne.json\")\n .json()\n .then((d) => topojson.feature(d, \"tyne\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"## Where's my nearest lunch spot?\n\nIf you walk around the centre of London' you'd get the impression that _Pret A Manger_ is far more ubiquitous than Greggs. In Newcastle or Glasgow, you'd more likely get the opposite impression. To explore whether this is indeed the case, I could just map the outlet locations of both directly. But perhaps more interesting is to map which of the two brands is closer to any given location in Britain. Something easily achieved by calculating the [Voronoi diagram](https://en.wikipedia.org/wiki/Voronoi_diagram) with Plot's [Voronoi mark](https://observablehq.com/plot/marks/delaunay#voronoi):","pinned":false,"hidden":false,"mode":"md"},{"id":736,"value":"clrs = ({\n pret: \"rgb(121,21,38)\",\n greggs: \"rgb(0,141,203)\",\n river: \"oklch(20% 0.1 240deg)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"{\n return Plot.plot({\n width: 360,\n height: 640,\n projection: { type: \"reflect-y\", domain: land },\n color: { legend: true, range: [clrs.greggs, clrs.pret] },\n marks: [\n Plot.voronoi(greggsAndPret, {\n x: \"x\",\n y: \"y\",\n fill: \"type\",\n opacity: 0.3,\n stroke: \"white\",\n strokeWidth: 0.4,\n clip: land\n }),\n\n Plot.dot(greggsAndPret, {\n x: \"x\",\n y: \"y\",\n fill: \"type\",\n r: 1\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"It's clear there are many more Greggs than Pret outlets, and that for most places across the country, the nearest lunch spot of the two will be a Greggs.","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"## Connecting lunch spots\n\nThe use of Voronoi diagrams got me thinking about their dual - [Delaunay triangulations](https://en.wikipedia.org/wiki/Delaunay_triangulation) as a way to connect point locations. \n\nPerhaps, after grabbing a quick lunch at your nearest Greggs, you are still feeling hungry and would like to visit another branch. And after that another one. Can we construct a series of routes that connects all branches of each brand? \n\nThe Delaunay triangulation will do that, but is gives a rather wasteful network of paths, not to mention some wet ones.","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"function delaunayGraph(pts) {\n const delaunay = d3.Delaunay.from(pts);\n const g = Graph();\n g.setLookup(pts);\n pts.forEach((_, i) =>\n [...delaunay.neighbors(i)].forEach((j) =>\n g.addEdge(i, j, Math.hypot(pts[i][0] - pts[j][0], pts[i][1] - pts[j][1]))\n )\n );\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"

\n${showEdgeMap(getEdgeData(delaunayGraph(prets)), { clr: clrs.pret, title:\"Pret Delaunay\" })}\n${showEdgeMap(getEdgeData(delaunayGraph(greggs)), { clr: clrs.greggs, title:\"Greggs Delaunay\" })}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":785,"value":"A more efficient network of paths to construct a grand tour of all branches can be found by solving the [Travelling Salesperson Problem (TSP)](https://en.wikipedia.org/wiki/Travelling_salesman_problem). I didn't have time to write an efficient TSP solver for this challenge, so instead used the [Minimum Spanning Tree (MST)](https://en.wikipedia.org/wiki/Minimum_spanning_tree), as I had already written a function to do this in my [Graph library](https://observablehq.com/@jwolondon/gds-graph). If a TSP network is _graph_ that minimises the distance walked in order to visit each outlet, the MST is the _tree_ that does the same. This involves more back tracking along previously visited paths, but does give some minimal representation of the connections.","pinned":false,"hidden":false,"mode":"md"},{"id":589,"value":"function mstLondon(dist) {\n return getEdgeData(\n delaunayGraph(\n prets.filter(\n (d) =>\n Math.hypot(d[0] - centres.london.x, d[1] - centres.london.y) < dist\n )\n ).mst()\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"function mstNewcastle(dist) {\n return getEdgeData(\n delaunayGraph(\n greggs.filter(\n (d) =>\n Math.hypot(d[0] - centres.newcastle.x, d[1] - centres.newcastle.y) <\n dist\n )\n ).mst()\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"function getEdgeData(graph) {\n const edges = [];\n const pts = graph.getLookup();\n\n pts.forEach(([x, y], i) =>\n graph.adjacent(i).forEach((j) => {\n if (i < j) {\n edges.push({\n x1: pts[i][0],\n y1: pts[i][1],\n x2: pts[j][0],\n y2: pts[j][1]\n });\n }\n })\n );\n\n return edges;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"function showEdgeMap(edges, options = {}) {\n const { clr = \"black\", title = \"\", w = 400, r = 0.5 } = options;\n return Plot.plot({\n width: w,\n height: (7 * w) / 4,\n projection: { type: \"reflect-y\", domain: land },\n marks: [\n Plot.arrow(edges, {\n x1: \"x1\",\n y1: \"y1\",\n x2: \"x2\",\n y2: \"y2\",\n headLength: 0,\n strokeWidth: w / 200,\n stroke: clr\n }),\n Plot.dot(edges, { x: \"x1\", y: \"y1\", fill: clr, r: r }),\n Plot.geo(land, { strokeWidth: 0.2 }),\n Plot.text([title], {\n frameAnchor: \"top-right\",\n fill: clr,\n fontSize: w / 25\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"

\n${showEdgeMap(getEdgeData(delaunayGraph(prets).mst()), { clr: clrs.pret, title:\"Pret Minimum Spanning Tree\" })}\n${showEdgeMap(getEdgeData(delaunayGraph(greggs).mst()), { clr: clrs.greggs, title:\"Greggs Minimum Spanning Tree\" })}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":805,"value":"To explore these networks with City maps, I experimented with changing the map scale, centring a circle on the centres of London and Newcastle:","pinned":false,"hidden":false,"mode":"md"},{"id":759,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"

\n${cityMap(\"Pret\", { w: 420, dist:distance.london, title: \"London's Prets\" })}\n${cityMap(\"Greggs\", { w: 420, dist:distance.newcastle, title: \"Newcastle's Greggs\" })}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":478,"value":"viewof distance = Inputs.form({\n london: Inputs.range([1000, 42000], {\n label: \"London distance (km)\",\n step: 1,\n value: 14000,\n format: (d) => d / 1000\n }),\n newcastle: Inputs.range([1000, 14000], {\n label: \"Newcastle distance (km)\",\n step: 1,\n value: 14000,\n format: (d) => d / 1000\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"## The Combined Map\n\nI like being able to use insets in maps although it is not easy to do directly in Plot. But some simple CSS allows me to overlay the two city insets in the same space as the national map. This leaves some space for explanatory text. I was pleased to be able to get the rivers Tyne and Thames to 'break out' of their inset circle. Both insets have a 14km radius. I did experiment with putting in a scale or scale annotation, but in the end, I don't think the map needs the extra clutter to get the main point across.","pinned":false,"hidden":false,"mode":"md"},{"id":860,"value":"

Steak Bake or Avo and Herb Wrap?

${mainMap()}

\n\n

${cityMap(\"Greggs\", { w: 420, dist:14000, title: \"Newcastle's Greggs\" })}

${cityMap(\"Pret\", { w: 420, dist:14000, title: \"London's Prets\" })}

\n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":836,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":833,"value":"_Britain basemap boundary:_","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"land = FileAttachment(\"land.json\")\n .json()\n .then((d) => topojson.feature(d, \"land\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"_For boundary calculations:_","pinned":false,"hidden":false,"mode":"md"},{"id":484,"value":"import { TDMC } from \"@jwolondon/30-day-map-challenge-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"_For graph representation and analysis:_","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"import { Graph } from \"@jwolondon/gds-graph\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"_At the time of writing, polygon clipping in Plot is only available in the development version, which I've loaded here:_","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"import { Plot } from \"@fil/multiscale-density-spatial-interpolator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"_For brand-adjacent fonts:_","pinned":false,"hidden":false,"mode":"md"},{"id":878,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}