Made sketchy using Elijah Meeks' "cheap sketchy" approach (https://bl.ocks.org/emeeks/8a3a12b0327f12560b1a)
This version allows you set the start position of the sketchy fill, as some positions look better where there are concave shapes, or very long narrow shapes.
Also uses clipping to hide where the sketchy fill goes outside of the concave parts of the shapes.
Built with blockbuilder.org
forked from tomshanley's block: sketchy NZ
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: sans-serif; margin: 0; top: 0; right: 0; bottom: 0; left: 0; } path { fill: none } </style></head><body> <h2>Sketchy Bee</h2><svg class="visualization-layer" width="500" height="500" style="position: absolute;" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><defs xmlns="https://www.w3.org/1999/xhtml"><style type="text/css"><![CDATA[body { margin: auto; padding: 0px; font-family: Catamaran, sans-serif; width: 1000px; }.App-header { background-color: rgb(194, 194, 194); height: 75px; padding: 20px; }.App-intro { font-size: large; }.tooltip-content { background: rgb(140, 140, 140); border-radius: 2px; border-width: 2px; border-color: rgb(0, 0, 0); padding: 10px; }.pie-piece { opacity: 1; }.node { shape-rendering: crispEdges; }.link { stroke: lightgray; }text { text-anchor: end; }]]></style></defs><defs><filter id="paintyFilterHeavy"><feGaussianBlur id="gaussblurrer" in="SourceGraphic" stdDeviation="4" color-interpolation-filters="sRGB" result="blur"/><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 34 -7" result="gooey"/></filter><filter id="paintyFilterLight"><feGaussianBlur id="gaussblurrer" in="SourceGraphic" stdDeviation="2" color-interpolation-filters="sRGB" result="blur"/><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 34 -7" result="gooey"/></filter><clipPath id="matte-cliporframe"/></defs><g/><g transform="translate(0,0)"><g class="axis axis-tick-lines"><g class="tick-line tick left"><path stroke="black" stroke-width="1px" d="M55,384.71722827040304L500,384.71722827040304" class="tick-line tick left"/></g><g class="tick-line tick left"><path stroke="black" stroke-width="1px" d="M55,336.313522761491L500,336.313522761491" class="tick-line tick left"/></g><g class="tick-line tick left"><path stroke="black" stroke-width="1px" d="M55,287.909817252579L500,287.909817252579" class="tick-line tick left"/></g><g class="tick-line tick left"><path stroke="black" stroke-width="1px" d="M55,239.506111743667L500,239.506111743667" class="tick-line tick left"/></g><g class="tick-line tick left"><path stroke="black" stroke-width="1px" d="M55,191.10240623475494L500,191.10240623475494" class="tick-line tick left"/></g><g class="tick-line tick left"><path stroke="black" stroke-width="1px" d="M55,142.6987007258429L500,142.6987007258429" class="tick-line tick left"/></g><g class="tick-line tick left"><path stroke="black" stroke-width="1px" d="M55,94.29499521693089L500,94.29499521693089" class="tick-line tick left"/></g><g class="tick-line tick left"><path stroke="black" stroke-width="1px" d="M55,45.89128970801886L500,45.89128970801886" class="tick-line tick left"/></g></g><g class="data-visualization"><g class="connectors"/><g class="summaries"/><g class="pieces"><g class=""><rect class="" height="16" width="16" x="268.9098476982081" y="49.32564556745996" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="269.3832239374948" y="29.773918834906567" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="260.94306236927525" y="124.24805986966959" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="276.65805694901746" y="124.44413968622206" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="248.54965522515988" y="114.37395689080813" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="291.3770136038375" y="130.7172819759718" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="269.3670269898302" y="162.25297452037557" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="269.3466708973645" y="12.00000000005599" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="269.3859065322611" y="81.0445114441759" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="254.5004758973534" y="42.59283363863449" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="267.3008920468042" y="213.55617968569604" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="301.23648965434444" y="241.46557514391495" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="274.8994453839086" y="297.444312183635" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="286.52783120157557" y="244.81079141108495" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="240.66036860616225" y="319.97236409355355" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="269.36682972651454" y="100.70556877949065" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="290.77903430589475" y="297.60539913827074" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="256.2515634195132" y="322.8102377213449" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="279.88505546248524" y="229.9676098544678" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="259.85892252444944" y="293.4606634201226" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="271.810017517109" y="191.0603816361188" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="280.7572043141522" y="282.76616785112003" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="269.315173941588" y="138.8912931986489" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="264.03225302417735" y="228.79930246883902" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="284.7111497490503" y="51.08307794898417" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="256.5648527491376" y="195.580560610724" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="282.74893666225336" y="209.9243964146927" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="282.72845960120736" y="311.2794492576194" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="252.01825877880344" y="218.6583720359484" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="296.66590761441006" y="283.0251114380644" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="244.27385919371335" y="293.85328477453936" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="260.3618099160716" y="259.17328684137397" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="271.21067842132896" y="243.40720232362705" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="255.78109452351794" y="242.10289684159503" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="316.5750441968908" y="243.54756359435618" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="245.43521301385516" y="254.31588545296722" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="298.4144989524973" y="311.8264518737757" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="271.04567504536175" y="329.2298054194699" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="239.49105326956453" y="239.3831445815867" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="289.064146167599" y="269.05774161946596" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="267.07986114081683" y="311.52573261705214" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""> <rect class="" height="16" width="16" x="265.4576413659837" y="278.66985201927315" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="268.5450912241164" y="350.22154652894596" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="229.39191120365328" y="255.4786334609691" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="286.81575012894046" y="326.71868510581066" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="279.74536753749754" y="177.24029868471916" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="261.964473344942" y="393.6626291417481" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="284.40230240122526" y="349.0341078524112" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="257.9559702451878" y="338.31338879115515" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="251.447427014026" y="308.1158949907843" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="276.79412612199457" y="399.6694085210874" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="232.74560541051895" y="304.9861004228158" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="276.1938788317525" y="259.552153147016" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g><g class=""><rect class="" height="16" width="16" x="269.3819057068197" y="421.99999999999335" rx="8" ry="8" style="fill: rgb(88, 185, 71); stroke: white;"/></g></g></g><g class="axis axis-labels"><g class="axis-labels"><g><g pointer-events="none" transform="translate(45,389.71722827040304)rotate(0)"><text text-anchor="end">4</text></g><g pointer-events="none" transform="translate(45,341.313522761491)rotate(0)"><text text-anchor="end">6</text></g><g pointer-events="none" transform="translate(45,292.909817252579)rotate(0)"><text text-anchor="end">8</text></g><g pointer-events="none" transform="translate(45,244.506111743667)rotate(0)"><text text-anchor="end">10</text></g><g pointer-events="none" transform="translate(45,196.10240623475494)rotate(0)"><text text-anchor="end">12</text></g><g pointer-events="none" transform="translate(45,147.6987007258429)rotate(0)"><text text-anchor="end">14</text></g><g pointer-events="none" transform="translate(45,99.29499521693089)rotate(0)"><text text-anchor="end">16</text></g><g pointer-events="none" transform="translate(45,50.89128970801886)rotate(0)"><text text-anchor="end">18</text></g><g class="axis-title" transform="translate(15,235) rotate(-90)"><text text-anchor="middle">axis label</text></g></g></g></g></g><g><g transform="translate(0,445)"><g transform="translate(277.5,0)"><text style="text-anchor: middle;"/> </g> </g> </g> </svg> <script> //MAKE SKETCHY! d3.selectAll("rect").each(function (d,i) { let thisPath = d3.select(this); /*let r = thisCircle.attr("r"); let cx = thisCircle.attr("cx"); let cy = thisCircle.attr("cy"); let equivalentPath = "M " + cx + ", " + cy + " " + "m " + (-r) + ", 0 " + + "a " + r + "," + r + " 0 1,0 " + (2*r) + ",0 " + "a " + r + "," + r + " 0 1,0 " + (-(2*r)) + ",0 " + "z"; console.log(equivalentPath)*/ let parent = d3.select(this.parentNode); let fill = thisPath.style("fill"); let pathNode = thisPath.node(); var fillCode = cheapSketchy(pathNode); var strokeCode = cheapSketchyOutline(pathNode); //remove the original shape d3.select(this).remove(); parent.append("clipPath") .attr("id", "clip" + i) .append("path") .attr("d", strokeCode); parent.append("path") .style("stroke-width", "3px") .style("stroke", fill) .style("fill", "none") .attr("class", "sketchy-fill") .attr("d", strokeCode); //draw the sketchy path parent.append("path") .style("stroke-width", "0.5px") .style("stroke", fill) .style("fill", "none") .attr("class", "sketchy-fill") .attr("clip-path", "url(#clip" + i + ")") .attr("d", fillCode); }) //from https://bl.ocks.org/emeeks/8a3a12b0327f12560b1a function cheapSketchy(path) { var length = path.getTotalLength(); var drawCode = ""; var i = 0; var step = 2; var halfLength = length * 0.5; var startPoint = length * 0.85; var endPoint = startPoint - 1; var s, e; while (i < halfLength) { s = ((startPoint + i) >= length) ? (startPoint + i - length) : startPoint + i; e = (endPoint - i) < 0 ? length - (i - endPoint) : endPoint - i var start = path.getPointAtLength(s) var end = path.getPointAtLength(e) drawCode += " M" + (start.x + (Math.random() * step - step/2)) + " " + (start.y + (Math.random() * step - step/2)) + "L" + (end.x + (Math.random() * step - step/2)) + " " + (end.y + (Math.random() * step - step/2)); i += step + (Math.random() * step); } return drawCode; } function cheapSketchyOutline(path) { var j = 2; var i = 0; var length = path.getTotalLength(); var pointsArray = []; while (i < length) { newPoint = path.getPointAtLength(i); pointsArray.push({x: newPoint.x + (j/2 - Math.random() * j), y: newPoint.y + (j/2 - Math.random() * j)}); i += j + (Math.random() * (j)); } //Make sure to get the last point pointsArray.push(path.getPointAtLength(length)); var line = d3.line() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) .curve(d3.curveBasis); return line(pointsArray); } </script></body> https://d3js.org/d3.v4.min.js