2f:T967,{ const size = 600; const svg = DOM.svg(size * 1.62, size); 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 regions.forEach((d, i) => { d.filterUid = DOM.uid("filter" + i); }); const groups = d3 .select(svg) .selectAll(".region") .data(regions) .enter() .append("g") .attr("class", "region") .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(".region") .data(regions) .enter() .append("filter") .attr("id", (d) => d.filterUid.id) .html( (d) => ` ` ); return svg; }30:[] 2d:{"title":"Watercolor Atlas","cells":[{"id":0,"value":"# Watercolor Atlas\n*Based on Tyler Hobbs's [generative approach to simulating watercolor paints](https://tylerxhobbs.com/essays/2017/a-generative-approach-to-simulating-watercolor-paints).*","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"## Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"viewof map = Inputs.select(\n [\n \"https://unpkg.com/jpn-atlas@latest/japan/japan.json\",\n \"https://unpkg.com/us-atlas@2/us/10m.json\"\n ],\n { label: \"Country\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof entity_name = Inputs.select(Object.keys(atlas.objects), {\n value: Object.keys(atlas.objects)[1],\n label: \"Map Depth\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"viewof palette = Inputs.select(Object.keys(palettes), {\n label: \"Color Palette\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"viewof drawMesh = Inputs.toggle({ label: \"Draw Outlines\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof deviation = Inputs.range([0, 5], { label: \"Shape Deviation\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof strokeWidth = Inputs.range([0, 8], {label: \"Outline Width\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"viewof blur = Inputs.range([0, 5], {label: \"Blur Indensity\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"viewof noise = Inputs.range([0, 0.03], { label: \"Fractal Noise\", precision: 3 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"topojson = require(\"topojson-client@latest\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@latest\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"simplify = require(\"simplify-js@latest\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"atlas = d3.json(map)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"## Variables and Objects","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"### Constant","pinned":false,"hidden":false,"mode":"md"},{"id":61,"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":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"simplification = 1.8","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"tension = 0.6","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"### Computed","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"spline = d3.line().curve(d3.curveCardinal.tension(tension))","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"blurScale = d3\n .scaleLinear()\n .domain([0, 2000])\n .range([deviation, deviation * 3.5])\n .clamp(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"regions = {\n const entities = topojson.feature(atlas, atlas.objects[entity_name]).features;\n const neighbors = topojson.neighbors(atlas.objects[entity_name].geometries);\n const colors = d3.shuffle(palettes[palette].slice(0));\n\n entities.forEach((d, i) => {\n const color =\n colors.find(\n (c) => !neighbors[i].some((n) => entities[n].properties.color === c)\n ) || colors[0];\n\n colors.push(colors.shift());\n\n d.properties.color = color;\n });\n\n return entities;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"mesh = {\n return topojson\n .mesh(atlas, atlas.objects[entity_name])\n .coordinates.map((line) =>\n simplify(\n line.map((d) => ({ x: d[0], y: d[1] })),\n simplification,\n true\n ).map((d) => [d.x, d.y])\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}