2e:null 2f:["$","title",null,{"children":"Colors & Patterns | Michael Bricknell | Observable"}] 34:T6c2,function createThemedMap(theme) { // Plot now uses the properties from the 'theme' object const myMap = Plot.plot({ style: { background: theme.background }, marginTop: 15, margin: 10, width: 900, height: 900, projection: { type: "orthographic", rotate: globeRotations[Math.floor(Math.random() * globeRotations.length)] }, //marks: layers.map(([shape, styles]) => Plot.geo(shape, styles)) marks: [ Plot.sphere({ fill: theme.oceanFill, stroke: theme.oceanStroke }), Plot.geo(ocean, { fill: `url(#${oceanPattern?.id})`, stroke: theme.oceanStroke, strokeWidth: 0.33 }), Plot.graticule({ stroke: gc.value, strokeWidth: 0.4, strokeOpacity: 1 }), Plot.sphere({ fill: highlight.url, mixBlendMode: "multiply", fillOpacity: 0.9 }), Plot.geo(countries, { fill: theme.landFill, stroke: theme.landStroke, strokeWidth: 0.33 }), Plot.geo(countries, { fill: "none", stroke: borderColor, strokeWidth: 0.25 }), Plot.sphere({ fill: "transparent", stroke: color.grayutility }), ...createMarks(myPins) ] }); // Inject SVG definitions let defs = d3.select(myMap).select("defs"); if (defs.empty()) defs = d3.select(myMap).insert("defs", ":first-child"); /* // 3. Append all definitions if (pattern1) defs.append(() => landPattern.fill.clone(true).node()); if (pattern2) defs.append(() => oceanPattern.fill.clone(true).node()); if (pattern3) defs.append(() => highlightPattern.fill.clone(true).node()); if (pinheadPattern) defs.append(() => pinheadPattern.fill.clone(true).node()); */ return myMap; }35:[] 32:{"id":"8255c68c3e9fde61","slug":"colors-patterns","title":"Colors & Patterns","thumbnail":"7f1df7d3af88fdc2aee1e85b997c31b7fec58480d14e80c8cf572cbbd77cb8d9","access_level":"public","create_time":"$D2025-09-14T01:04:40.632Z","update_time":"$D2025-10-12T22:52:17.894Z","view_time":null,"first_public_time":"$D2025-09-14T15:28:57.825Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":1094,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f71d064e45acb0b","slug":"carto","title":"Carto","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Colors & Patterns","cells":[{"id":0,"value":"# Colors & Patterns","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1087,"value":"https://www.c82.net/werner/#colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":745,"value":"demo1 = renderColorPalette(color)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"import {\n pattern,\n linePattern,\n backgroundPattern,\n getPatternFill,\n viewof selectedBase,\n viewof formPattern\n} from \"@mbrickmaps/create-a-pattern\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"import {\n color,\n colorArray,\n getNameHex,\n renderColorPalette\n} from \"@mbrickmaps/werners-nomenclature-of-colours\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"import {\n readShp,\n m_cultural,\n m_physical,\n culturalArray,\n physicalArray\n} from \"@mbrickmaps/size-of-110m\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"import {\n boundary_lines_land,\n tiny_countries,\n countries_lakes,\n countries,\n pacific_groupings,\n ocean\n} from \"@mbrickmaps/adjusting-the-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"import {\n createMarks,\n createPinGenerator,\n createPinData3D\n} from \"@mbrickmaps/map-pins\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"import {\n viewof gradientControls,\n gradient,\n gradientSwatch\n} from \"@mbrickmaps/map-shading\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"- do we just use symbols but no stroke width, to always be building with pattern `url()`\n- setting white stroke with 0.5 vs the full sat at 1\n- or diagnoal, size 1.5, and width 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":313,"value":"demo2 = linePattern","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"I like diagonal, size 4, width 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"viewof formPattern","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"Controls the stroke color below","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":776,"value":"I like the dune overlay","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":316,"value":"demo3 = html`\n

\n ${viewof selectedBase}\n ${viewof formPattern}\n ${backgroundPattern}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"function findCountry(countryData, countryName) {\n // Searches the array for the first feature where the ADMIN property matches the given name\n return countryData.find((d) => d.properties.ADMIN === countryName);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { countries as c } from \"@mbrickmaps/ne-10m\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"france = c.find((d) => d.properties.ADMIN === \"France\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"diverse = c.filter(\n (d) => [\"GBR\", \"POL\", \"CZE\", \"CAN\"].indexOf(d.properties.ADM0_A3_US) > -1\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"rotation = [85, 0, 0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"locations = [\n { name: \"US West Coast\", longitude: -117.16, latitude: 32.71 },\n { name: \"Florida\", longitude: -80.19, latitude: 25.76 },\n { name: \"Mexico\", longitude: -99.13, latitude: 19.43 },\n { name: \"Cuba\", longitude: -82.36, latitude: 23.11 },\n { name: \"Jamaica\", longitude: -76.79, latitude: 17.97 },\n { name: \"Dominican Republic\", longitude: -69.91, latitude: 18.48 },\n { name: \"Puerto Rico\", longitude: -66.1, latitude: 18.46 },\n { name: \"Guatemala\", longitude: -90.5, latitude: 14.63 },\n { name: \"Honduras\", longitude: -87.2, latitude: 14.08 },\n { name: \"El Salvador\", longitude: -89.2, latitude: 13.7 },\n { name: \"Nicaragua\", longitude: -86.25, latitude: 12.13 },\n { name: \"Costa Rica\", longitude: -84.08, latitude: 9.93 },\n { name: \"Panama\", longitude: -79.52, latitude: 8.98 },\n { name: \"Venezuela\", longitude: -66.9, latitude: 10.48 },\n { name: \"Colombia\", longitude: -74.07, latitude: 4.71 },\n { name: \"Ecuador\", longitude: -78.46, latitude: -0.18 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"pattern2 = pattern({\n orientation: [\"3/8\", \"6/8\"],\n lineSize: 5,\n lineWidth: 0.5,\n accentColor: \"#6fb5a8\",\n backgroundColor: \"#4f638d\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"oceanPattern = getPatternFill(pattern2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"projection = d3\n .geoOrthographic()\n .rotate(rotation)\n .scale(500) // Adjust to match Plot's scale\n .translate([300, 300]) // Center in your 600x600 canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"myPins = [\n { ...createPinData3D(-74, 40.7, 2, projection), color: \"#b63e36\" }, // NYC\n {\n ...createPinData3D(-68.703056, 76.531111, 1, projection),\n color: \"red\"\n },\n { ...createPinData3D(2.3, 48.9, 2, projection), color: \"#657abb\" }, // Paris\n { ...createPinData3D(-0.1, 51.5, 2, projection), color: \"#533552\" } // London\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"layers = [\n //[Feature Collection, {style}] new\n [ocean, { fill: `url(#${oceanPattern?.id})` }],\n [d3.geoGraticule()(), { fill: \"none\", stroke: \"blue\", strokeWidth: 0.5 }],\n [countries_lakes, { fill: \"none\", stroke: \"tan\" }],\n [tiny_countries, { fill: \"none\", stroke: \"tan\" }],\n [pacific_groupings, { fill: \"none\", stroke: \"tan\" }],\n [boundary_lines_land, { stroke: \"black\", strokeWidth: 0.25 }]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"viewof gc = Inputs.select(colorArray, {\n label: \"Graticule color\",\n value: colorArray.find((c) => c.name === \"Indigo Blue\"),\n // 'c' is now an object like {name: \"copper\", value: \"#8F3602\"}.\n // We tell the format function to display the 'name' property.\n format: (c) => c.name\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"darkTheme = ({\n background: \"black\",\n oceanFill: \"white\", //`url(#${d3.select(oceanPattern).select(\"pattern\").attr(\"id\")})`, // We can override this with solid colors\n oceanStroke: \"none\",\n landFill: \"none\", // We will override this\n landStroke: \"none\", //color.earthdesigner3[0],\n graticuleStroke: gc.value,\n chinaFill: \"none\",\n indiaFill: \"none\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"globeRotations = [\n [-130, -18, 0],\n [-45, -18, 0],\n [25, -16, 0],\n [75, 5, 0]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"landColors = [\n \"#f1e9cd\",\n \"#f2e7cf\",\n \"#ece6d0\",\n \"#f2eacc\",\n \"#f3e9ca\",\n \"#f2ebcd\",\n \"#e6e1c9\",\n \"#e2ddc6\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"borderColor = \"#8a8d84\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"{\n // 1. Add a class to the inner div for reliable selection.\n const grid = html`

Testing Land Colors

`;\n\n // 2. Select the container using its class. This avoids the text node issue.\n const gridContainer = grid.querySelector(\".grid-container\");\n\n for (const color of landColors) {\n // Assuming your array is landColorsToTest\n\n // 3. Create a new theme for each iteration, overriding the landFill.\n // This is the key logic fix.\n const newTheme = { ...darkTheme, landFill: color };\n\n // 4. Create the map with the new, specific theme.\n const map = createThemedMap(newTheme);\n\n const cell = html`

${map}${getNameHex(\n colorArray,\n color\n )}
${color}

`;\n\n // 5. Append to the correct container.\n gridContainer.appendChild(cell);\n }\n\n return grid;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"viewof gradientControls","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"gradientSwatch","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"highlight = gradient({\n gradientType: \"radial\",\n angle: 330,\n centerX: 30,\n centerY: 45,\n radius: 110,\n color1: \"#fffdc7\",\n color2: \"#1b3230\",\n width: 150,\n height: 150,\n id: \"gradient-cmFkaWFsLTMz\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"overlay = gradient({\n gradientType: \"radial\",\n angle: 200,\n centerX: 34,\n centerY: 30,\n color1: \"#ffffff\",\n color2: \"#38514f\",\n width: 150,\n height: 150\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"colorArray","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"function getPatternId(patternElement) {\n if (!patternElement) return null;\n const fill = d3.select(patternElement).select(\"rect\");\n const id = fill.attr(\"id\");\n return { fill, id };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"