2f:Ta6a,{ const width = 928; const marginTop = 46; const height = width / 2 + marginTop; const svg = DOM.svg(width, height); const defs = d3 .select(svg) .attr("style", "width: 100%; height: 100%;") .attr("class", "watercolor") .append("defs"); const splotch = DOM.uid("splotch"); const projection = d3.geoEqualEarth().fitExtent([[2, marginTop + 2], [width - 2, height]], {type: "Sphere"}); const path = d3.geoPath(projection); defs .append("filter") .attr("id", splotch.id) .html( `${ noise ? ` ` : `` }` ); // Generate Observable-friendly IDs countries.forEach((d, i) => { d.filterUid = DOM.uid("filter" + i); }); const groups = d3 .select(svg) .selectAll(".country") .data(countries) .enter() .append("g") .attr("class", "country") .attr("filter", splotch); const paths = groups .append("path") .attr("d", path) .attr("fill", d => d.properties.color) .attr("stroke", d => d.properties.color) .attr("stroke-width", strokeWidth) .attr("filter", d => d.filterUid); if (drawMesh) { const pencil = DOM.uid("pencil"); defs.append("filter").attr("id", pencil.id) .html(` `); d3.select(svg) .append("g") .attr("class", "mesh") .attr("filter", pencil) .append("path") .attr("d", countrymesh.map(spline).join("")); } defs .selectAll(".country") .data(countries) .enter() .append("filter") .attr("id", d => d.filterUid.id) .html( d => ` ` ); return svg; }30:[{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1732986949079.621,"size":756420}] 2d:{"title":"Watercolor 🖌️ but make it worldwide","cells":[{"id":0,"value":"md`## #30DayMapsChallenge\n# Watercolor 🖌️ but make it worldwide\n\nSome pseudo-watercolor effects with blurs, thresholds, and fractal noise.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"viewof randomize = button(\"Randomize colors\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"viewof palette = select({\n title: \"Color palette\",\n options: [\n \"present-correct\",\n \"Wes Anderson\",\n \"Blues\",\n \"verena\",\n \"iiso_daily\",\n \"iiso_zeitung\",\n \"rag-taj\",\n \"rag-mysore\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"viewof drawMesh = checkbox([\n { value: \"drawMesh\", label: \"Draw pencil outlines\" }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"viewof deviation = slider({\n min: 0,\n max: 5,\n step: 0.5,\n value: 2,\n title: \"Shape deviation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"viewof strokeWidth = slider({\n min: 0,\n max: 8,\n step: 0.1,\n value: 3.5,\n title: \"Stroke width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"viewof blur = slider({\n min: 0,\n max: 5,\n step: 0.1,\n value: 0.8,\n title: \"Outer blur amount\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"viewof noise = slider({\n min: 0,\n max: 0.03,\n value: 0.01,\n precision: 3,\n title: \"Fractal noise\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"md`## See also\n[Oil paint](https://observablehq.com/@veltman/scribble-paint) \n[Pencil/watercolor map style](https://bl.ocks.org/veltman/2f2aa947772afa095a620dfe5e5486cb) \n[Tyler Hobbs' generative watercolor](https://tylerxhobbs.com/essays/2017/a-generative-approach-to-simulating-watercolor-paints)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"simplification = 1.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"tension = 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"blurScale = d3\n .scaleLinear()\n .domain([0, 2000])\n .range([deviation, deviation * 3.5])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"spline = d3.line().curve(d3.curveCardinal.tension(tension))","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"palettes = ({\n \"Wes Anderson\": [\"#ff4848\", \"#00cdb1\", \"#ffc638\", \"#ffa641\", \"#a0d8e7\"],\n Blues: [\"#0c96da\", \"#be98ad\", \"#77d7e3\", \"#f4cdcd\", \"#01ccd9\", \"#f4e2c6\"],\n \"rag-taj\": [\"#73d5c1\", \"#e29ba0\", \"#ba1e6b\", \"#ffbe45\"],\n \"rag-mysore\": [\"#e8ac52\", \"#639aa0\", \"#ec6c26\", \"#613a53\"],\n iiso_zeitung: [\"#f3df76\", \"#00a9c0\", \"#f7ab76\", \"#ee8067\"],\n \"present-correct\": [\"#fe7646\", \"#ffbb51\", \"#7356ac\", \"#fe737a\", \"#a0ccbb\"],\n verena: [\"#936ead\", \"#3e78e1\", \"#f37265\", \"#f6bc25\", \"#16b069\"],\n iiso_daily: [\"#7f8cb6\", \"#f0d967\", \"#ef9640\", \"#1daeb1\", \"#e76c4a\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"countries = {\n randomize;\n const countries = topojson.feature(world, world.objects.countries).features;\n const neighbors = topojson.neighbors(world.objects.countries.geometries);\n const colors = d3.shuffle(palettes[palette].slice(0));\n\n countries.forEach((d, i) => {\n const color =\n colors.find(\n c => !neighbors[i].some(n => countries[n].properties.color === c)\n ) || colors[0];\n\n colors.push(colors.shift());\n\n d.properties.color = color;\n });\n\n return countries;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"simplify = require(\"simplify-js@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"import { checkbox, button, select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}