2e:null 2f:["$","title",null,{"children":"30 Day Map Challenge: 22. Two Colours | Jo Wood | Observable"}] 34:T47b,35:T41e,{ const [w, h] = [640, 200]; const svg = d3.create("svg").attr("width", w).attr("height", h); const [nRows, nCols] = [h / 10, w / 10]; const [maxR, rot] = [6.5, (-5 * Math.PI) / 180]; const xScale = d3 .scaleLinear() .domain([0, nCols - 1]) .range([0, maxR]); const extraRows = Math.ceil((Math.hypot(w, h) - h) / (h / nRows)); // Account for rotation of rect const extraCols = Math.ceil((Math.hypot(w, h) - w) / (w / nCols)); const gridSpacing = w / nCols; for (let row = -extraRows; row < nRows + extraRows; row++) { for (let col = -extraCols; col < nCols + extraCols; col++) { const offset = row % 2 !== 0 ? gridSpacing / 2 : 0; const x = (col + 0.5) * gridSpacing - w / 2 + offset; const y = (row + 0.5) * (h / nRows) - h / 2; svg .append("circle") .attr("cx", x * Math.cos(rot) - y * Math.sin(rot) + w / 2) .attr("cy", x * Math.sin(rot) + y * Math.cos(rot) + h / 2) .attr("r", xScale(col)) .attr("fill", "black"); } } display(svg.node()); }36:T41a,function drawMoon(options = {}) { const {title = "", subtitle = "", rotate = 0} = options; return Plot.plot({ style: "background:black", width: 480, height: 540, insetTop: 70, inset: 20, projection: {type: "orthographic", rotate: [rotate, 0, 0]}, length: {type: "identity"}, // Overload length channel as rotation angle marks: [ moonMark(albedoData, { x: "x", y: "y", phase: (d) => d.albedo, r: 2.5, light: "yellow" }), Plot.text([title], { frameAnchor: "top-left", fill: "yellow", textAnchor: "start", lineAnchor: "top", fontSize: 30, fontFamily: "Orbitron", dx: 15, dy: 15 }), Plot.text([subtitle], { frameAnchor: title.length > 0 ? "top-left" : "top", fill: "yellow", textAnchor: title.length > 0 ? "start" : "middle", lineAnchor: "top", fontSize: 15, fontFamily: "Orbitron", dx: 15, dy: 45 }) ] }); }37:[{"id":"5e5bce1ba1a00d30634a56bf45b74e6ed22ec4133885559f7eff758d6c6f5183d6641d2981a801fcc15368af4d60a13fabd05d4648e049379429371973d0209d","href":"https://static.observableusercontent.com/files/5e5bce1ba1a00d30634a56bf45b74e6ed22ec4133885559f7eff758d6c6f5183d6641d2981a801fcc15368af4d60a13fabd05d4648e049379429371973d0209d","name":"lroc_color_poles_1k.jpg","type":"image/jpeg","lastModified":1732289502138.314,"size":139068}] 32:{"id":"61d0fa33d88d39ae","slug":"tdmc2024_day22","title":"30 Day Map Challenge: 22. Two Colours","thumbnail":"5d0c25b9bb366f992bc5bb898957abdf1444f16952a4753283a7439bbb8399ff","access_level":"public","create_time":"$D2024-11-22T05:51:49.244Z","update_time":"$D2026-09-07T16:06:51.101Z","view_time":null,"first_public_time":"$D2024-11-22T19:42:47.257Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":617,"publish_version":617,"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":0,"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: 22. Two Colours","cells":[{"id":0,"value":"# 30 Day Map Challenge: 22. Two Colours","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":556,"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":155,"value":"## Inspiration\n\nThinking about working with only two colours, I was inspired by [halftone printing](https://en.wikipedia.org/wiki/Halftone) as a technique for working with limited core colours but blended in such a way that new colours are simulated when viewed from a distance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"But CMYK printing relies on four colours (or three if you don't count the black 'key'), not two as this challenge theme suggests. But it is possible to to use monochrome half-tone, so perhaps that might be useful for a two-colour map design, especially as it keeps strictly to the idea of two colours (no grey-levels).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"$35","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"Rather than vary the size of dots to imply a grey-level, I was taken by Mike Bostock's [phases of the moon](https://observablehq.com/@mbostock/phases-of-the-moon) design. This could be used to control the degree of light/dark in a symbol pattern (adapted from Mike's [Bees and Bombs example](https://observablehq.com/d/a741f9a27e8c0e73)): ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"function moonMark(data, options = {}) {\n const {phase = 0.5, dark = \"black\", light = \"white\", r = 10} = options;\n const circle = d3.geoCircle()();\n const projection = d3.geoOrthographic().translate([0, 0]).scale(r);\n const path = d3.geoPath(projection);\n\n return [\n Plot.dot(data, {...options, r: r, fill: light}),\n Plot.vector(data, {\n ...options,\n fill: dark,\n length: (d) => (typeof phase === \"function\" ? phase(d) : phase) * 180,\n shape: {\n draw: (ctx, l) => (\n projection.rotate([0, l, -l]),\n path.context(ctx)(circle)\n )\n },\n anchor: \"start\" // Disable default translate along length\n })\n ];\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"{\n const [w, h] = [640, 200];\n const radius = w / 100;\n const xTicks = d3.ticks(-1, 1, 50);\n const yTicks = d3.ticks(-1, 1, 25);\n const xStep = xTicks[1] - xTicks[0];\n const data = yTicks.flatMap((y, row) =>\n xTicks.map((x) => ({x: row % 2 === 0 ? x : x + xStep / 2, y: y}))\n );\n display(\n Plot.plot({\n width: w,\n height: h,\n axis: null,\n length: {type: \"identity\"}, // Overload length channel as rotation angle\n marks: [\n moonMark(data, {\n x: \"x\",\n y: \"y\",\n r: w / 100,\n phase\n })\n ]\n })\n );\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"const phase = view(\n Inputs.range([0, 1], {\n label: \"Moon phase\",\n step: 0.01,\n value: 0.5\n })\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"This in turn led me to thinking about mapping the lunar surface using this technique...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"## Data Preparation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"As input data I used a greyscale image of lunar reflectance from [NASA](https://svs.gsfc.nasa.gov/4720/):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":530,"value":"FileAttachment(\"lroc_color_poles_1k.jpg\").image({width: 640})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"const bounds = (() => {\n const [x1, y1] = [-180, -90];\n const [x2, y2] = [180, 90];\n return {\n x1: -180,\n y1: -90,\n x2: 180,\n y2: 90,\n width: 1024,\n height: 512,\n cellSize: (x2 - x1) / width,\n\n feature: new GeoJSON()\n .points([\n [x1, y1],\n [x2, y2]\n ])\n .boundingRect()\n };\n})()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"But as this is in greyscale I needed to symbolise surface reflectance with monochrome marks. So I converted the image into an array of normalised values in the range [0,1] (this is the same approach I took to extracting shaded relief values from images in [previous days](https://observablehq.com/@jwolondon/tdmc2024_day05)):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"const lunarAlbedo = FileAttachment(\"lroc_color_poles_1k.jpg\")\n .image()\n .then((d) => TDMC.toBitmap(d))\n .then((d) => ({\n values: TDMC.gRaster(d).values,\n nRows: bounds.height,\n nCols: bounds.width\n }));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"The goal was to use the small moon marks to symbolise the albedo value directly, where the phase of each small moon represented the amount of surface reflectance. The symbols needed to be large enough to distinguish, but small enough that they produced a halftone effect. I therefore sampled the image raster at 1.5 degree intervals to generate a coarser geogreferenced grid suitable for encoding as moon marks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"const albedoData = (() => {\n const step = 1.5;\n const data = [];\n for (let lat = -90; lat < 90; lat += step) {\n const row = Math.round((lunarAlbedo.nRows * (lat + 90)) / 180);\n for (let lng = -180; lng < 180; lng += step) {\n const col = Math.round((lunarAlbedo.nCols * (lng + 180)) / 360);\n data.push({\n x: lng,\n y: lat,\n albedo: lunarAlbedo.values[row * lunarAlbedo.nCols + col]\n });\n }\n }\n return data;\n})();","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"## The Map\n\nIt was then a simple task to project and map the reflectance values as moon marks, just as we would any other Plot mark. Given the comparatively low resolution offered by the moon marks grid and the colour constraint, I decided to give the final map a retro-feel with an acid-yellow colour and suitably spacey font. The result: A moon of moons in strictly two colours!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"$36","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"

\n${drawMoon({\n title: \"Lunar Albedo\",\n subtitle: \"Surface reflectance indicated by small moon symbols\"\n})} \n${drawMoon({ rotate: 180, subtitle: \"'Dark' side of the moon\" })} \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"_For image to grid conversion:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"import {TDMC} from \"observable:@jwolondon/30-day-map-challenge-utilities\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"_For boundary feature object generation:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"import {GeoJSON} from \"observable:@jwolondon/geojson-generator\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"_For the Orbitron font:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":486,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W37","stdlib":"2","titling":"auto"}} 33:"$32:body"