30:T494,let svg = viz.create({ projection: "EqualEarth" }); await svg.plot({ type: "typo", data: world, var: "region", id: "pays" }); let svgElement = svg.render(); let rc = rough.svg(svgElement); // Roughjs options const roughOptions = { stroke: "transparent", strokeWidth: 0, fillStyle: "hachure", hachureAngle: 60, hachureGap: 2, fillWeight: 0.3, roughness: 2, bowing: 5 }; // Apply options function applyRough(selector, drawFn) { svgElement.querySelectorAll(selector).forEach((el) => { const fill = el.getAttribute("fill") || "#ddd"; const roughEl = drawFn(el, fill); el.replaceWith(roughEl); }); } // Countries applyRough("#pays path", (path, fill) => rc.path(path.getAttribute("d"), { ...roughOptions, fill }) ); // Legend applyRough("#leg_pays rect", (rect, fill) => { const x = +rect.getAttribute("x"); const y = +rect.getAttribute("y"); const w = +rect.getAttribute("width"); const h = +rect.getAttribute("height"); return rc.rectangle(x, y, w, h, { ...roughOptions, fill }); }); display(svgElement)31:[] 2e:{"title":"Sketch","cells":[{"id":0,"value":"# Sketch","pinned":false,"hidden":false,"mode":"md"},{"id":790,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":208,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"## Sketch maps","pinned":false,"hidden":false,"mode":"md"},{"id":311,"value":"The sketch mark it possible to draw the outlines of a base map as if they were hand-drawn.","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"let svg = viz.create({ projection: \"EqualEarth\", zoomable: \"versor\" });\n svg.plot({ type: \"sketch\", data: world });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":325,"value":"You can adjust the precision of the shapes using the `simplify` parameter.","pinned":false,"hidden":false,"mode":"md"},{"id":349,"value":"let simplify = view(Inputs.range([0.007, 0.2], {\n label: \"simplify\",\n value: 0.007,\n step: 0.001\n}))","pinned":false,"hidden":false,"mode":"js"},{"id":357,"value":"{\n let svg = viz.create({ projection: \"EqualEarth\", zoomable: \"versor\" });\n svg.plot({ type: \"sketch\", data: world, simplify });\n return svg.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"NB: To customize the layer, you can use parameters such as `bowing`, `roughness`, `hachureGap`, and others, which control the visual style of the sketch effect","pinned":false,"hidden":false,"mode":"md"},{"id":383,"value":"## Play with roughjs","pinned":false,"hidden":false,"mode":"md"},{"id":727,"value":"To achieve a fully hand-drawn style, you can use the [roughjs](https://roughjs.com/) library, a JavaScript tool that allows you to create graphics with a “sketchy” or hand-sketched appearance. It generates SVG shapes or canvas drawings by adding subtle irregularities to lines, strokes, and fills, simulating the natural imperfections of a pencil or pen.","pinned":false,"hidden":false,"mode":"md"},{"id":796,"value":"let rough = (await import(\"npm:roughjs\")).default","pinned":true,"hidden":false,"mode":"js"},{"id":730,"value":"Here an example:","pinned":false,"hidden":false,"mode":"md"},{"id":388,"value":"let svg = viz.create({ projection: \"EqualEarth\" });\n\n svg.plot({ type: \"sketch\", data: world, id: \"pays\" });\n\n let svgElement = svg.node();\n let rc = rough.svg(svgElement);\n let path = svgElement.querySelector(\"#pays path\");\n\n let roughPath = rc.path(path.getAttribute(\"d\"), {\n stroke: \"transparent\", // makes the path outline invisible\n strokeWidth: 0, // ensures no stroke is drawn\n fill: \"#193c75\", // fill color for the area\n fillStyle: \"cross-hatch\", // hatching style to create a sketchy, hand-drawn look\n hachureAngle: 60, // angle of the hatching lines\n hachureGap: 2, // distance between each hatching line\n fillWeight: 0.3, // thickness of each hatch line (“pencil” stroke)\n roughness: 3, // how irregular/rough the hatching lines are\n bowing: 10 // how much the lines curve or “bow” for a scribbled effect\n });\n\n path.replaceWith(roughPath);\n\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":733,"value":"It works on any SVG drawing, allowing you to apply the hand-drawn, sketchy style to existing shapes, paths, or graphics regardless of how they were created. Here is an example on a typology map.","pinned":false,"hidden":false,"mode":"md"},{"id":492,"value":"$30","pinned":true,"hidden":false,"mode":"js"},{"id":617,"value":"## A final example","pinned":false,"hidden":false,"mode":"md"},{"id":737,"value":"Now, here is an example of a map with a sketchy base layer and circles modified using Rough.js. We also changed the font. It looks like a hand-drawn map, doesn’t it?","pinned":false,"hidden":false,"mode":"md"},{"id":789,"value":"previews([\n {\n path: \"https://observablehq.com/@neocartocnrs/lets-draw-a-sketch-map\",\n thumbnail:\n \"9dfb6945f9de13be65b4d263e93321fbfe02f7c3f18353a16c80d79ce3eab3ed\",\n title: \"Hand-drawn map\"\n }\n])","pinned":false,"hidden":false,"mode":"js"},{"id":30,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":296,"value":"import {\n style,\n world,\n world_noATA,\n disclaimer,\n france,\n europe,\n viz,\n previews\n} from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":298,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"2","titling":"auto"}