2f:Tafe,{ 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("style", "background-color: #91aae6;") // #5d6fb5 .attr("fill", "#e2e1e1") .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) .append("title") .text(d => d.properties.name); 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":"1244dfce6d2dc29a618258263eb47142d8cf927c75d7beed87c0d4b18934d8550214eabe61e4450535f0666d7a9bac2681b0cfb26f4fe899474c12aeb97d0bee","href":"https://static.observableusercontent.com/files/1244dfce6d2dc29a618258263eb47142d8cf927c75d7beed87c0d4b18934d8550214eabe61e4450535f0666d7a9bac2681b0cfb26f4fe899474c12aeb97d0bee","name":"country ratings data.csv","type":"text/csv","lastModified":1763485814110.435,"size":5453},{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1763483306082.277,"size":756420}] 2d:{"title":"Climate Action Tracker ratings as a watercolour-style map","cells":[{"id":0,"value":"md`## #30DayMapsChallenge 2025 - Day 9: Analog\n# Climate Action Tracker ratings as a watercolour-style map\n## see more at [climateactiontracker.org/cat-data-explorer/country-ratings](https://climateactiontracker.org/cat-data-explorer/country-ratings/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"Swatches(d3.scaleOrdinal([\"CRITICALLY INSUFFICIENT\", \"HIGHLY INSUFFICIENT\", \"INSUFFICIENT\", \"ALMOST SUFFICIENT\", \"NO DATA\"],\n ['#833563', '#fa5252', '#fd7e14', '#e6ef7b', '#e2e1e1']));","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"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: 1,\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":555,"value":"countries = {\n const countries = topojson.feature(world, world.objects.countries).features;\n const neighbors = topojson.neighbors(world.objects.countries.geometries);\n\n countries.forEach((d, i) => {\n const color = ratingsColors.get(d.properties.name);\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":743,"value":"ratingsColors = new Map();","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"{\n for (let i = 0; i < countryRatingsData.length; i++) {\n var row = countryRatingsData[i]; var r = row['Overall rating'];\n var rColor = r === \"Critically insufficient\" ? '#833563'\n : r === \"Highly insufficient\" ? '#fa5252' \n : r === \"Insufficient\" ? '#fd7e14'\n : '#e6ef7b';\n ratingsColors.set(row['Country'], rColor);\n }\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":762,"value":"countryRatingsData = FileAttachment(\"country ratings data.csv\").csv();","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 {Swatches} 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"}