30:T551,pointMap = () => Plot.plot({ width: 600, height: 1160, style: { padding: "42px" }, projection: { type: "reflect-y", domain: bounds.feature }, color: { range: clrs }, marks: [ pointSym(nameData, { fill: "rgb(30,30,100)", opacity: 0.009, r: 40 }), pointSym(nameData, { opacity: 0.004, r: 20 }), pointSym(nameData, { opacity: 0.004, r: 10 }), pointSym(nameData, { opacity: 0.2, symbol: "cross", r: 4 }), pointSym(nameData, { stroke: "white", strokeWidth: 0.1, r: 1, tip: true, title: (d) => `${d.name} (${d.subtype})` }), Plot.text(["Points of Britain"], { x: 38000, y: 1200000, fill: "white", fontSize: 44, fontFamily: "Source Serif Pro", textAnchor: "start" }), Plot.text(["Placenames including the word 'point'"], { x: 38000, y: 1160000, fill: "#fffc", fontSize: 18.5, fontFamily: "Source Serif Pro", textAnchor: "start" }), Plot.text( [ "Contains Ordnance Survey data © Crown copyright and database right 2024." ], { x: 47000, y: 0, dy: 50, fill: "#fffa", fontFamily: "Roboto Condensed", textAnchor: "start" } ) ] })31:[{"id":"2de4d94816b62b347c02f98b45caba04db5970c06e500fcaebc9101bf00da27f14fc49ef02c13f27d1954d047d5f03ea0ba5395706c68c3d64372733d7bfec73","href":"https://static.observableusercontent.com/files/2de4d94816b62b347c02f98b45caba04db5970c06e500fcaebc9101bf00da27f14fc49ef02c13f27d1954d047d5f03ea0ba5395706c68c3d64372733d7bfec73","name":"pointNames@2.csv","type":"text/csv","lastModified":1730384655944.489,"size":113057},{"id":"c1b98be491ebe734e295a9b44dcf4aef2637b46609552e56774f055b6ad0e3dc438110e90919ebf92c0a7fdab92c5f4a8dd5fdad92acb51d748c4c807bf22e22","href":"https://static.observableusercontent.com/files/c1b98be491ebe734e295a9b44dcf4aef2637b46609552e56774f055b6ad0e3dc438110e90919ebf92c0a7fdab92c5f4a8dd5fdad92acb51d748c4c807bf22e22","name":"openNamesExtract.sh","type":"application/octet-stream","lastModified":1730385606182.272,"size":2252}] 2e:{"title":"30 Day Map challenge: 1. Points","cells":[{"id":0,"value":"# 30 Day Map challenge: 1. Points","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"The obvious way to interpret the theme 'points' is to create some kind of point symbolisation, but I also wanted to think about 'point' as a theme. It is quite common for coastal headlands in English speaking regions to be referred to as points, so was curious to see where all the points around the British coast are. But then it then occurred to me that there may be inland 'points' so chose to widen the map to include any British place names containing the word 'point'.","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"## Data Source and Processing","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"The Ordnance Survey [Open Names](https://osdatahub.os.uk/downloads/open/OpenNames) dataset contains the names of all place names, their locations and feature types included in their database. The full dataset is large (1.8Gb) and is split across over 800 CSV files (one per 20km grid square), but it was a relatively easy job to create a script to extract the relevant entries with place names containing the word 'Point':\n","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"FileAttachment(\"openNamesExtract.sh\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"This generated 2051 'Point' names with locations, of which 149 were transport links such as 'Point road', which were excluded. The remaining values were stored in `nameData` to be used as the basis for the map.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"nameData = FileAttachment(\"pointNames@2.csv\")\n .csv({ typed: true })\n .then((data) => data.filter((d) => d.type !== \"transportNetwork\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"Inputs.table(nameData, { layout: \"auto\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"For custom legend generation I extracted the distinct feature types:","pinned":false,"hidden":false,"mode":"md"},{"id":780,"value":"types = d3.sort(new Set(nameData.map((d) => d.type)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"From the data file, the minimum enclosing rectangle defining the map domain can be extracted from the `easting` and `northing fields`:","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"bounds = TDMC.boundsFromData(nameData, { inset: 20000 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"## Map Design","pinned":false,"hidden":false,"mode":"md"},{"id":301,"value":"Keeping things simple, we could plot the location of all 'point' places in the dataset:","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"Plot.plot({\n width: 200,\n height: 400,\n projection: { type: \"reflect-y\", domain: bounds.feature },\n marks: [\n Plot.dot(nameData, { x: \"easting\", y: \"northing\", fill: \"black\", r: 1 })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"But I wanted to create a more compelling design, so took as inspiration, points of light from stars in astronomical images such as those from the [Hubble space telescope](https://hubblesite.org/home). As well as a dark background, each point is symbolised with several overlaid point symbols of different sizes and opacity to give a 'glow' effect:","pinned":false,"hidden":false,"mode":"md"},{"id":791,"value":"clrs = [\n \"oklch(0.99 0.225 112)\",\n \"rgb(185,245,255)\",\n \"rgb(246,245,155)\",\n \"oklch(0.99 0.04 330)\",\n \"oklch(0.86 0.34 142)\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"function pointSym(data, options) {\n const { fill = \"type\", opacity = 1, r = 1 } = options;\n return Plot.dot(data, {\n x: \"easting\",\n y: \"northing\",\n fill: fill,\n opacity: opacity,\n ...options\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"{\n const data = [{ easting: 350000, northing: 600000 }];\n return Plot.plot({\n width: 200,\n height: 200,\n style: { background: \"black\" },\n projection: { type: \"reflect-y\", domain: bounds.feature },\n color: { range: clrs },\n marks: [\n pointSym(data, { fill: \"rgb(30,30,100)\", opacity: 0.5, r: 80 }),\n pointSym(data, { opacity: 0.08, r: 50 }),\n pointSym(data, { opacity: 0.08, r: 30 }),\n pointSym(data, { opacity: 0.2, symbol: \"cross\", r: 12 }),\n pointSym(data, { stroke: \"white\", strokeWidth: 0.5, r: 4 })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"By making the overlaid symbols highly transparent the 'glow' accumulates in areas of higher point density.","pinned":false,"hidden":false,"mode":"md"},{"id":873,"value":"I was also curious as to how common the 'point names' were. The frequency of names is easily calculable from the names dataset:","pinned":false,"hidden":false,"mode":"md"},{"id":876,"value":"freqData = TDMC.buildFTable(nameData, \"name\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"Inputs.table(freqData, { width: 250, layout: \"auto\", rows: 7.5 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"From this table a simple frequency histogram can be constructed. Given the number of entries with at least a frequency of two (115 of them) this suggested a vertical arrangement adjacent to the full GB map.","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"histo = () =>\n Plot.plot({\n title: htl.html`

Points with two or more occurrences

`,\n width: 360,\n height: 1400,\n x: { axis: null },\n y: { axis: null },\n // -- Mark and channel specification\n marks: [\n Plot.rectX(freqData.slice(0, 115), {\n y: \"category\",\n x: \"freq\",\n sort: { y: \"x\", reverse: true },\n fill: \"oklch(0.28 0.1 266)\",\n tip: true,\n title: (d) => `${d.category} (${d.freq} occurrences)`\n }),\n Plot.text(freqData.slice(0, 150), {\n x: 0,\n textAnchor: \"start\",\n dx: 4,\n y: \"category\",\n text: \"category\",\n fill: \"white\",\n fontFamily: \"Roboto Condensed\",\n fontSize: 7\n }),\n Plot.gridX({\n interval: 1,\n stroke: \"black\",\n strokeOpacity: 1,\n strokeWidth: 1\n })\n ]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"legend = () =>\n Plot.legend({\n style: {\n paddingLeft: \"30px\",\n color: \"#fffc\",\n fontFamily: \"Roboto Condensed\"\n },\n swatchSize: 8,\n color: { type: \"categorical\", domain: types, range: clrs }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"## The final map\n\nBringing these elements together in a single map required a custom positioning of the legend so I added each part (map, legend, histogram) within a `

` element where I could specify its relative location.\n\nGiven the number of points and small size of each, I added tooltips to both the map and histogram elements.","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"

${legend()}

${pointMap()}

${histo()}

","pinned":false,"hidden":false,"mode":"html"},{"id":15,"value":"---\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":900,"value":"_For general utilities including building a frequency table:_","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"import { TDMC } from \"@jwolondon/30-day-map-challenge-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"_For the Roboto Condensed font:_","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}