30:T7a8,function merism() { const data = countriesGeo.filter((d) => d.properties.name !== "Antarctica"); const box = new GeoJSON().polygon([ [-180, 0], [-170, 0], [-170, 7], [-180, 7] ]).featureCollection; return Plot.plot({ style: paper.style, width: paper.w, height: paper.h, insetTop: paper.titleSpace, projection: { type: "equal-earth" }, marks: [ // Map Plot.geo(landGeo, { fill: "rgb(120,120,120,0.2)", rough: pencilFill() }), Plot.geo( data.filter((d) => d.properties.a3 === "USA"), { fill: "rgb(0,0,0,0.6)", stroke: "rgb(0,0,0,0.3)", rough: pencilHighlight() } ), Plot.geo(landGeo, { stroke: "#0004", rough: pencilOutline() }), // Legend Plot.geo(box.features, { dx: 100, dy: 200, fill: "rgb(0,0,0,0.6)", stroke: "rgb(0,0,0,0.3)", rough: pencilHighlight() }), Plot.geo(box.features, { dx: 100, dy: 200, stroke: "#0004", rough: pencilOutline() }), Plot.text(["Countries with cars in space"], { x: -165, y: 0, dx: 100, dy: 190, opacity: 0.8, textAnchor: "start", lineAnchor: "middle", fontSize: 20, fontFamily: "Give You Glory", fontWeight: 900 }), Plot.geo(box.features, { dx: 500, dy: 200, fill: "rgb(120,120,120,0.2)", rough: pencilFill() }), Plot.geo(box.features, { dx: 500, dy: 200, stroke: "#0004", rough: pencilOutline() }), Plot.text(["Countries with universal healthcare"], { x: -165, y: 0, dx: 500, dy: 190, opacity: 0.8, textAnchor: "start", lineAnchor: "middle", fontSize: 20, fontFamily: "Give You Glory", fontWeight: 900 }) ] }); }31:T431,*The use of verbal irony where understatement or declaration of a negative is used to emphaise a positive.* >It's not unusual to be loved by anyone >It's not unusual to have fun with anyone >But when I see you hanging about with anyone >It's not unusual to see me cry >Tom Jones, It's Not Unusual Here Tom declares his unhappiness and plight by stating how common it is for his unrequited love to have fun with others. He does this by describing how rare the contrary is. Unpacking the negative serves to emphasise his point (note also several other figures of speech including *tricolon* and *antistrophe* [anyone, anyone, anyone] and *climax* [loved by, fun with, cry]). In visual terms, we might consider the use of [figure and ground](https://en.wikipedia.org/wiki/Figure–ground_(perception) and the inversion of convention in depicting each. For example, a map of global oceans where we use a [Spilhaus map projection](https://observablehq.com/@joewdavies/spilhaus-map) to centre on water rather than land and invert the colour symbolisation of each:32:T571,function litotes() { return Plot.plot({ style: paper.style, width: paper.w, height: paper.h, insetTop: paper.titleSpace, projection: spilhausSquare().fitExtent( [ [0, paper.titleSpace + 20], [paper.w, paper.h - 20] ], { type: "Sphere" } ), marks: [ Plot.geo(createSphere(), { fill: "rgb(0,0,0,0.4)", rough: pencilFill() }), Plot.graticule(), Plot.geo(landGeo, { fill: "rgb(254,252,251)", stroke: "rgb(254,252,251)", strokeWidth: 4 }), Plot.text( [ { area: "Asia", x: 100, y: 40 }, { area: "North\nAmerica", x: -115, y: 49 }, { area: "North\nAmerica", x: -103, y: 40, dx: -20 }, { area: "South\nAmerica", x: -64, y: -29 } ], { x: "x", y: "y", dx: -20, text: "area", opacity: 0.5, textAnchor: "start", lineAnchor: "middle", fontSize: 26, fontFamily: "Give You Glory", fontWeight: 900 } ), Plot.text(["Spilhaus map projection"], { x: 0, y: 0, dx: 80, dy: -160, opacity: 0.6, textAnchor: "start", lineAnchor: "middle", fontSize: 38, fontFamily: "Give You Glory", fontWeight: 900 }) ] }); }33:T613,function synecdoche() { const aus = countriesGeo.filter( (d) => d.properties.name === "Australia" || d.properties.name === "New Zealand" ); const rect = new GeoJSON() .fromFeatureCollection({ type: "FeatureCollection", features: aus }) .boundingRect({ inset: 10 }); const fBounds = new GeoJSON().polygon([ [113, -42], [113, -42], [174, -42], [174, -42], [113, -42] ]).featureCollection; const data = TDMC.facetGeo( aus, // Positions of the gridded Australia and New Zealand maps [ [0, 1], [0, 3], [1, 0], [1, 1], [1, 2], [1, 3], [2, 0], [2, 1], [2, 2], [2, 3], [2, 4], [3, 0], [3, 1], [3, 2], [3, 3], [3, 4], [4, 0], [4, 3], [4, 4], [4, 6] ], "facet" ); return Plot.plot({ style: paper.style, width: paper.w, height: paper.h, insetTop: paper.titleSpace, marginTop: paper.titleSpace, margin: 20, projection: { type: "equirectangular", domain: fBounds }, axis: null, fx: { domain: [0, 1, 2, 3, 4, 5, 6] }, marks: [ Plot.geo(data, { fx: (d) => d.properties.facet[1], fy: (d) => d.properties.facet[0], fill: "#0003" }), Plot.geo(data, { fx: (d) => d.properties.facet[1], fy: (d) => d.properties.facet[0], rough: pencilOutline() }), Plot.geo(rect.features, { rough: pencilOutline() }) ] }); }34:T6c5,function antanaclasis() { const antarctica = countriesGeo.filter( (d) => d.properties.name === "Antarctica" ); const data = [ { country: "Norway", value: 64 }, { country: "Australia", value: 92 }, { country: "France", value: 6 }, { country: "New Zealand", value: 50 }, { country: "Unowned", value: 60 }, { country: "Chile", value: 30 }, { country: "Argentina", value: 25 }, { country: "United Kingdom", value: 35 } ].reverse(); const marks = (dx, dy, msg) => [ pie(data, { value: "value", stroke: "black", dx: dx, dy: dy, rough: pencilHighlight() }), Plot.geo(antarctica, { dx: dx, dy: dy, fill: "rgb(120,120,120,0.2)", rough: pencilFill() }), Plot.geo(antarctica, { dx: dx, dy: dy, fill: "rgb(120,120,120,0.2)", rough: { stroke: "#0004", rough: pencilOutline() } }), Plot.text(toPolar(data, { theta: "value" }), { text: "country", dx: dx, dy: dy, x: "lon", y: (d) => d.lat + 28, opacity: 0.5, fontSize: 16, fontFamily: "Give You Glory", fontWeight: 900 }), Plot.text([msg], { dx: dx, dy: dy + 80, x: 180, y: -60, fontSize: 22, fontFamily: "Give You Glory", fontWeight: 900, opacity: 0.8 }) ]; return Plot.plot({ style: paper.style, width: paper.w, height: paper.h, insetTop: paper.titleSpace, marginTop: paper.titleSpace, projection: radialProj, // Creates the radial projection marks: [ ...marks(-200, -70, "A pie chart that thinks it's a map"), ...marks(220, -70, "A map that thinks it's a pie chart") ] }); }35:T620,function toGeo(inData, options = {}) { const { theta, r, inner = 0, outer = 1, rotate = 0, step = 20, domain } = options; const scale = (x, a, b) => a + Math.max(0, Math.min(1, x)) * (b - a); const baseMinLat = scale(outer, -60, -89.9); const baseMaxLat = scale(inner, -60, -89.9); const data = [...inData].reverse(); const totalVal = d3.sum(data, (d) => d[theta] || 1); const maxLen = domain ? domain[1] : d3.max(data, (d) => d[r] || 1); const cumP = d3.cumsum(data.map((d) => (d[theta] || 1) / totalVal)); const lons = [0, ...cumP.map((f) => 360 * f)]; const geometries = data.map((d, i) => { const segLen = r === undefined ? baseMinLat : Number.isFinite(r) ? scale(r, baseMaxLat, baseMinLat) : Number.isFinite(d[r]) ? scale(d[r] / maxLen, baseMaxLat, baseMinLat) : 0; // Increment in small steps of longitude to ensure curved parallels. const incLons = []; for (let lon = lons[i]; lon < lons[i + 1]; lon += step) { incLons.push(lon); } incLons.push(lons[i + 1]); const coords = [ ...incLons.map((lon) => [lon - rotate, baseMaxLat]), // Top edge ...incLons.reverse().map((lon) => [lon - rotate, segLen]), // Bottom edge (reversed) [lons[i] - rotate, baseMinLat] // Close the polygon ]; return { type: "Polygon", coordinates: [coords], ...d // Original data added as attributes (not geoJSON standard) }; }); return { type: "GeometryCollection", geometries: geometries }; }36:[{"id":"bdc05e54c1389475594e20bc74797e3162294cdce0d15f1a866e5f7b5e10190aa0c153692d279586e3eca1f3c7ba18b52ac1214d27de586b1ccf2039d9b6c1de","href":"https://static.observableusercontent.com/files/bdc05e54c1389475594e20bc74797e3162294cdce0d15f1a866e5f7b5e10190aa0c153692d279586e3eca1f3c7ba18b52ac1214d27de586b1ccf2039d9b6c1de","name":"countriesSimplified.json","type":"application/json","lastModified":1731219700080.019,"size":31939},{"id":"a039e3bf2b706b98cf4b3293161db8e9f152842e21e2ec27c6900aef1ea789c6e238119f9ccfd5fa71985fa5ebf3eb2364709552b9a75bee53fb61d0e45d47cc","href":"https://static.observableusercontent.com/files/a039e3bf2b706b98cf4b3293161db8e9f152842e21e2ec27c6900aef1ea789c6e238119f9ccfd5fa71985fa5ebf3eb2364709552b9a75bee53fb61d0e45d47cc","name":"landSimplified@1.json","type":"application/json","lastModified":1731227229700.853,"size":3713}] 2e:{"title":"30 Day Map Challenge: 10. Pen & Paper","cells":[{"id":0,"value":"# 30 Day Map Challenge: 10. Pen & Paper","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"Back in 2012 I developed a technique for rendering [sketchy graphics in Processing](https://www.gicentre.net/software#/handy/). It was subsequently ported to JavaScript as [rough.js](https://roughjs.com) by Preet Shihn. I've also implemented a sketchy option in my [stateful Renderer](https://observablehq.com/@jwolondon/renderer) for Observable. For more details on the original 'handy' design and use see [Wood et al 2012](https://openaccess.city.ac.uk/id/eprint/1274/1/wood_sketchy_2012.pdf).\n\nI thought I'd experiment with using it with Observable Plot to generate some hand-drawn looking maps for today's challenge. This is possible thanks to Gordon Tu's [Rough Plot plugin](https://observablehq.com/@tututwo/rough-js-plugin-for-observable-plot).","pinned":false,"hidden":false,"mode":"md"},{"id":348,"value":"## Drawing Styles","pinned":false,"hidden":false,"mode":"md"},{"id":1168,"value":"To set the sketchy style, various [rough style options](https://github.com/rough-stuff/rough/wiki#options) may be set for each mark. As I wanted to maintain a reasonably consistent style between several maps, I created some reusable style settings as functions. They need to be functions as each must have a unique ID, so the functions include a randomly generated hash string to keep each one separate.","pinned":false,"hidden":false,"mode":"md"},{"id":323,"value":"function pencilFill() {\n return {\n id: randomID(),\n roughness: 2,\n bowing: 10,\n strokeWidth: 0,\n fillWeight: 0.3,\n fillStyle: \"zigzag\",\n hachureGap: 0.8\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"function pencilHighlight() {\n return {\n id: randomID(),\n roughness: 2,\n fillWeight: 0.5,\n fillStyle: \"cross-hatch\",\n hachureGap: 5\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"function pencilOutline() {\n return { id: randomID(), strokeWidth: 1.5, roughness: 1.5 };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"function pencilOutlineBlank() {\n return {\n id: randomID(),\n roughness: 1.5,\n fillStyle: \"solid\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"I also set a background paper style as a very slightly off-white colour to emphasise the hand-drawn feel:","pinned":false,"hidden":false,"mode":"md"},{"id":470,"value":"paper = ({\n w: 900,\n h: 500,\n style: `background:rgba(255,254,254,0.7); box-shadow: inset 0 0 8em 8em oklch(60% 0.2 90deg /2%);`,\n titleSpace: 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"## Cartographic Rhetoric\n\nFor a while I've been building a catalogue of rhetorical _figures of visualization_ that mimic 'figures of speech' in rhetoric theory. As I had originally catalogued these with some simple pencil sketches, I thought I'd try to reproduce a few of them using a sketchy style in Observable Plot.\n\nEach is represented as a 'postcard' or comics frame, so I generated a general function for drawing the outline frame in which all the maps are drawn:","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"function captionFrame(msg, marks = []) {\n return Plot.plot({\n width: paper.w,\n height: paper.h,\n inset: 2,\n axis: null,\n marks: [\n Plot.text([msg], {\n x: 20,\n y: paper.h - 10,\n textAnchor: \"start\",\n lineAnchor: \"top\",\n fontSize: 42,\n fontFamily: \"Fredericka the Great\"\n }),\n Plot.rect([{ x1: 0, y1: 0, x2: paper.w, y2: paper.h }], {\n x1: \"x1\",\n y1: \"y1\",\n x2: \"x2\",\n y2: \"y2\",\n rough: { id: randomID(), strokeWidth: 1.5, roughness: 4, bowing: 0 }\n }),\n Plot.ruleY([paper.h - 50], {\n rough: { id: randomID(), strokeWidth: 1, roughness: 4, bowing: 0 }\n }),\n marks\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"## Merism","pinned":false,"hidden":false,"mode":"md"},{"id":1181,"value":"*The use of two contrasting parts to refer to the whole.*\n\n> Night and day, you are the one;\n> Only you beneath the moon, under the sun.\n> Whether near to me or far,\n> It's no matter darlin', where you are;\n> I think of you, night and day.\n>Cole Porter, Night and Day\n\nIn Porter's song, the first verse is packed with merism: 'night and day'; 'moon and sun'; 'near and far'. A little like _synecdoche_, merism breaks down a whole into parts, but here specifically, those parts contrast with each other without one containing the other. That contrast can serve to emphasise the breadth of the whole, or its multi-faceted nature.\n\nIn cartography and visualization we are often representing both the whole and its parts. But we might wish to characterise visual merism as a visual comparison of just two parts where their contrast is part of the rhetorical intent. For example a satirical comment on political-economic priories:","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"

${merism()}

${captionFrame(\"Priorities (merism)\")}

","pinned":false,"hidden":false,"mode":"html"},{"id":560,"value":"## Litotes","pinned":false,"hidden":false,"mode":"md"},{"id":866,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":594,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"

${litotes()}

${captionFrame(\"Figure and ground (litotes)\")}

","pinned":false,"hidden":false,"mode":"html"},{"id":566,"value":"## Synecdoche","pinned":false,"hidden":false,"mode":"md"},{"id":1197,"value":" *The whole is symobilsed by some part of it, or a part is symbolised by the whole.*\n\n>Was this the face that launched a thousand ships\n>And burnt the topless towers of Ilium?\n>Christopher Marlowe, The Tragical History of the Life and Death of Doctor Faustus\n\nHere, Helen of Troy is represented by her face; the Trojan war by one thousand ships; Troy itself by its towers. Synecdoche fulfils the role of metaphor except with a more literal and often vivid connection between the imagery and its referent.\n\nIn a mapping context we might consider nested maps (such as those used in [day 4 of this challenge](https://observablehq.com/@jwolondon/tdmc2024_day04)) as an example of synecdoche. Below is an example that nests maps of Australia and New Zealand in a grid of maps representing the shape of the two countries:","pinned":false,"hidden":false,"mode":"md"},{"id":1203,"value":"annotation = [\n Plot.text(\n [\n { country: \"Australia\", x: 740, y: 400 },\n { country: \"New Zealand\", x: 780, y: 200 }\n ],\n {\n x: \"x\",\n y: \"y\",\n text: \"country\",\n fontSize: 32,\n fontFamily: \"Give You Glory\",\n fontWeight: 900\n }\n ),\n Plot.arrow(\n [\n { x1: 740, y1: 380, x2: 550, y2: 300 },\n { x1: 700, y1: 180, x2: 750, y2: 50 }\n ],\n {\n x1: \"x1\",\n y1: \"y1\",\n x2: \"x2\",\n y2: \"y2\",\n bend: true,\n sweep: -1,\n headLength: 16,\n rough: pencilOutline()\n }\n )\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"

${synecdoche()}

${captionFrame(\"Fractal (synecdoche)\",annotation)}

","pinned":false,"hidden":false,"mode":"html"},{"id":570,"value":"## Antanaclasis","pinned":false,"hidden":false,"mode":"md"},{"id":1200,"value":"*A word or phrase that is repeated but where the meanning differs on repetition.*\n\n>Just because a record has a groove\n>Don't make it in the groove\n>Stevie Wonder, Sir Duke\n\nUnlike a more usual pun, the double meanings in antanaclasis are separated in the repetition of the word or phrase. Here Stevie Wonder uses groove to mean firstly the etchings in a vinyl record and then a funky rhythm. The rhetorical point being made that the former is common but latter a rare talent (presumably shared by Duke Ellington and Stevie Wonder).\n\nHere I use antanaclasis to acknowledge the similarity between polar coordinate systems used by pie charts, and those used by polar-centred map projections. It shows the zones of Antarctica and their territorial claims for ownership. Are these maps or pie charts?","pinned":false,"hidden":false,"mode":"md"},{"id":1048,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"

${antanaclasis()}

${captionFrame(\"Identity crisis (Antanaclasis)\")}

","pinned":false,"hidden":false,"mode":"html"},{"id":5,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"_[Gordon Tu](https://observablehq.com/@tututwo) has created a helpful plugin for [rough.js](https://roughjs.com) that intercepts the SVG calls of Observable plot and gives them the rough treatment:_","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"import { Plot } from \"@tututwo/rough-js-plugin-for-observable-plot\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"_For attribute table lookup generation:_","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"import { TDMC } from \"@jwolondon/30-day-map-challenge-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"_Geographic data:_","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"countriesGeo = topojson.feature(\n await d3.json(await FileAttachment(\"countriesSimplified.json\").url()),\n \"countries\"\n).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"landGeo = topojson.feature(\n await d3.json(await FileAttachment(\"landSimplified@1.json\").url()),\n \"land\"\n).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"_Generate a random ID string. Used by the rough plugin to keep styles unique:_","pinned":false,"hidden":false,"mode":"md"},{"id":320,"value":"function randomID() {\n return `${Math.random().toString(36).slice(2)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"_For programmatic generation of GeoJSON objects:_","pinned":false,"hidden":false,"mode":"md"},{"id":367,"value":"import { GeoJSON } from \"@jwolondon/geojson-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"_`Plot.sphere()` and `Plot.graticule` don't currently work with rough plot, so these functions create them as normal GeoJSON features so can be plotted with any rough settings:_","pinned":false,"hidden":false,"mode":"md"},{"id":628,"value":"function createSphere(options = {}) {\n const { epsilon = 1 } = options;\n return new GeoJSON().polygon([\n [-180 + epsilon, 90 - epsilon],\n [-90, 90 - epsilon],\n [0, 90 - epsilon],\n [90, 90 - epsilon],\n [180 - epsilon, 90 - epsilon],\n [180 - epsilon, 0],\n [180 - epsilon, -90 + epsilon],\n [90, -90 + epsilon],\n [0, -90 + epsilon],\n [-90, -90 + epsilon],\n [-180 + epsilon, -90 + epsilon],\n [-180 + epsilon, 0]\n ]).featureCollection.features;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"_For the Spilhaus projection:_","pinned":false,"hidden":false,"mode":"md"},{"id":589,"value":"import { spilhausSquare } from \"@toja/spilhaus-world-ocean-map-in-a-square\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"_For pie chart / polar map projection hybrids:_","pinned":false,"hidden":false,"mode":"md"},{"id":1065,"value":"radialProj = ({\n type: \"azimuthal-equidistant\",\n rotate: [0, 90, 0],\n domain: d3.geoCircle().center([9, -90]).radius(40).precision(1)()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"function pie(data, { value, inner, outer, rotate, ...options }) {\n const geoData = toGeo(data, { theta: value, inner, outer, rotate });\n return [Plot.geo(geoData, { ...options })];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"function toPolar(inData, options = {}) {\n const { theta, r = 0.75, inner = 0, outer = 1, rotate = 0, domain } = options;\n\n const scale = (x, a, b) => a + Math.max(0, Math.min(1, x)) * (b - a);\n // const baseMinLat = scale(outer, 89.9, -89.9);\n // const baseMaxLat = scale(inner, 90, -89.9);\n const baseMinLat = scale(outer, -60, -89.9);\n const baseMaxLat = scale(inner, -60, -89.9);\n\n const data = [...inData].reverse();\n const totalVal = d3.sum(data, (d) => d[theta] || 1);\n const maxLen = domain ? domain.at(-1) : d3.max(data, (d) => d[r] || 1);\n const cumP = d3.cumsum(data.map((d) => (d[theta] || 1) / totalVal));\n const lons = [0, ...cumP.map((f) => 360 * f)];\n\n return data.map((d, i) => {\n const lon = (lons[i] + lons[i + 1]) / 2 - rotate;\n const lat = scale(\n isNaN(r) ? d[r] / maxLen || 1 : r,\n baseMaxLat,\n baseMinLat\n );\n\n return { lon, lat, ...d };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"_For hand drawn / comics fonts:_","pinned":false,"hidden":false,"mode":"md"},{"id":430,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1187,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"_For fancy quote style:_","pinned":false,"hidden":false,"mode":"md"},{"id":1184,"value":"import { footer } from \"@jwolondon/fov-stylesheet\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}