30:T94c,{ const svg = DOM.svg(960, 600); const defs = d3 .select(svg) .attr("class", "watercolor") .append("defs"); const splotch = DOM.uid("splotch"); const path = d3.geoPath(); defs .append("filter") .attr("id", splotch.id) .html( `${ noise ? ` ` : `` }` ); // Generate Observable-friendly IDs states.forEach((d, i) => { d.filterUid = DOM.uid("filter" + i); }); const groups = d3 .select(svg) .selectAll(".state") .data(states) .enter() .append("g") .attr("class", "state") .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", mesh.map(spline).join("")); } defs .selectAll(".state") .data(states) .enter() .append("filter") .attr("id", d => d.filterUid.id) .html( d => ` ` ); return svg; }31:[] 2e:{"title":"Watercolor","cells":[{"id":0,"value":"md`# Watercolor\n\nSome pseudo-watercolor effects with blurs, thresholds, and fractal noise.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$30","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 \"Wes Anderson\",\n \"Blues\",\n \"verena\",\n \"iiso_daily\",\n \"iiso_zeitung\",\n \"present-correct\",\n \"rag-taj\",\n \"rag-mysore\"\n ]\n})","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: 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":16,"value":"states = {\n randomize;\n const states = topojson.feature(us, us.objects.states).features;\n const neighbors = topojson.neighbors(us.objects.states.geometries);\n const colors = d3.shuffle(palettes[palette].slice(0));\n\n states.forEach((d, i) => {\n const color =\n colors.find(\n c => !neighbors[i].some(n => states[n].properties.color === c)\n ) || colors[0];\n\n colors.push(colors.shift());\n\n d.properties.color = color;\n });\n\n return states;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"mesh = {\n return topojson\n .mesh(us, us.objects.states)\n .coordinates.map(line =>\n simplify(line.map(d => ({ x: d[0], y: d[1] })), simplification, true).map(\n d => [d.x, d.y]\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"us = await d3.json(\"https://unpkg.com/us-atlas@1/us/10m.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":281,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}