30:Tf68,{ 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(); const outlinePath = d3.geoPath(); defs .append("filter") .attr("id", splotch.id) .html( `${ noise ? ` ` : `` }` ); const shadow = DOM.uid("dropshadow"); defs .append("filter") .attr("id", "dropshadow") .html( ` `) // 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 subgroups = groups .append("g") // .attr("filter",d => { // return (d.id === '39' ? shadow : '') // }); const paths = subgroups .append("path") .attr("d", path) .attr("fill", d => d.properties.color) .attr("stroke", d => d.properties.color) .attr("stroke-width", 0.5) .attr("filter", d => d.filterUid) const pencil = DOM.uid("pencil"); defs.append("filter").attr("id", pencil.id) .html(` `); const lines = d3 .select(svg) .selectAll(".lines") .data(states) .enter() .append("g") .attr("class", "lines") .attr("filter", pencil); const outlines = lines .append("path") .attr("d", path) .attr("stroke", "#ffffff") .attr("stroke-width", strokeWidth) .attr("stroke-dasharray","0,10,0") .attr("fill", "none") .attr("transform", function(d) { var centroid = path.centroid(d), x = centroid[0], y = centroid[1]; return "translate(" + x + "," + y + ")" + "scale(0.9)" + "translate(" + -x + "," + -y + ")"; }) // .attr("filter", d => d.filterUid); // d3.select(svg) // .append("g") // .attr("class", "mesh") // .attr("filter", pencil) // .data(states) // .enter() // .append("path") // .attr("d", path) // .attr("stroke-dasharray","0,5,0") defs .selectAll(".state") .data(states) .enter() .append("filter") .attr("id", d => d.filterUid.id) .html( d => ` ` ); return svg; }31:[] 2e:{"title":"Felt","cells":[{"id":0,"value":"md`# Felt\n\nQuick example for postgraphics mappy hour\n\nNoise + dashed lines`","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 \"felt\",\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":306,"value":"viewof deviation = slider({\n min: 0,\n max: 5,\n step: 0.5,\n value: 0,\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: 1,\n value: 0.245,\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 = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"tension = 1","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 felt:[\"#dddddd\",\"#cccccc\",\"#be98ad\", \"#77d7e3\",\"#aaaaaa\"],\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":648,"value":"outlineData = {\n let array = []\n let stateFeatures = topojson.feature(us, us.objects.states).features\n for(let x = 0,n = stateFeatures.length; x < n; x++){\n console.log(x)\n console.log(stateFeatures[x])\n// if (stateFeatures[x].geometry.type === 'MultiPolygon') {\n \n// for (var i = 0; i < stateFeatures[x].geometry.coordinates.length; i++) {\n// let polyCoord = stateFeatures[x].geometry.coordinates[i];\n// let polyGeom = {\n// type: 'Polygon',\n// coordinates: polyCoord\n// };\n// console.log(`buffer: ${turf.buffer(polyGeom,-50,{units:'miles'})}`)\n// array.push(turf.buffer(polyGeom,-50,{units:'miles'}))\n// }\n// }\n try{\n array.push(turf.buffer(stateFeatures[x], -5, {units: 'miles'}))\n } catch(e){\n console.log(e)\n }\n \n }\n // console.log(array)\n return array\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":666,"value":"topojson.feature(us, us.objects.states)","pinned":true,"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\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"turf = require(\"@turf/turf\")","pinned":true,"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"}