27:null 28:["$","title",null,{"children":"Climate Action Tracker ratings as a watercolour-style map | Éléonore | Observable"}] 2d: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; }2e:[{"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}] 2b:{"id":"9787e7ad97b892c0","slug":null,"title":"Climate Action Tracker ratings as a watercolour-style map","thumbnail":"a7dcbde7748c232baa267700a59f77148d3afbad047b5a9de92aec33b47770e5","access_level":"public","create_time":"$D2025-11-18T16:28:26.082Z","update_time":"$D2025-11-18T19:58:18.715Z","view_time":null,"first_public_time":"$D2025-11-18T19:32:31.439Z","has_unpublished_edits":null,"fork":{"id":"69ddca8acee61aa4","slug":null,"title":"Watercolor 🖌️ but make it worldwide","owner":{"id":"5a9a75a747cb01fe","login":"eleonore9","name":"Éléonore"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5a9a75a747cb01fe","login":"eleonore9","name":"Éléonore","avatar_url":"https://avatars-next.observableusercontent.com/f02bb17abd0c6c5bf2635bef76a16323ef091dbd4e41cbb1a5ed10e3ea21fbb5","tier":"starter_2024"},"version":853,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0524eb6eebd4534","login":"eleonore9","name":"Éléonore","avatar_url":"https://avatars-next.observableusercontent.com/f02bb17abd0c6c5bf2635bef76a16323ef091dbd4e41cbb1a5ed10e3ea21fbb5","tier":null}],"members":[{"type":"team","id":"5a9a75a747cb01fe","login":"eleonore9","name":"Éléonore","avatar_url":"https://avatars-next.observableusercontent.com/f02bb17abd0c6c5bf2635bef76a16323ef091dbd4e41cbb1a5ed10e3ea21fbb5","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b0524eb6eebd4534","login":"eleonore9","name":"Éléonore","avatar_url":"https://avatars-next.observableusercontent.com/f02bb17abd0c6c5bf2635bef76a16323ef091dbd4e41cbb1a5ed10e3ea21fbb5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"14dff1b80168870c","slug":"maps","title":"Maps🌍","owner":{"id":"5a9a75a747cb01fe","login":"eleonore9","name":"Éléonore"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"viewof drawMesh = checkbox([\n { value: \"drawMesh\", label: \"Draw pencil outlines\" }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"simplification = 1.8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"tension = 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"spline = d3.line().curve(d3.curveCardinal.tension(tension))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"ratingsColors = new Map();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"countryRatingsData = FileAttachment(\"country ratings data.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"simplify = require(\"simplify-js@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"import { checkbox, button, select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"