30:T781,viewof View = { let view = d3 .select(DOM.svg(width, height * 1.4)) .style('background', 'white') .attr('id', DOM.uid().id) .attr('viewBox', [0, 0, width, height * 1.4]) .node(); let intialPattern = patterns[Math.floor(Math.random() * patterns.length)]; view.value = intialPattern; yield view; let PatternMenu = d3 .select(view) .selectAll('.menu') .data(patterns, (d, i) => i) .join("rect") .attr("x", (d, i) => i * (width / patterns.length)) .attr("y", (d, i) => height) .attr("height", d => 100) .attr("width", d => width / patterns.length) .attr("stroke", "black") .attr("stroke-width", 3) .attr("class", "menu") .attr('fill', d => d.fill.url()); let PatternMenu2 = d3 .select(view) .selectAll('.menu2') .data(more_patterns, (d, i) => i) .join("rect") .attr("x", (d, i) => i * (width / more_patterns.length)) .attr("y", (d, i) => height + 100) .attr("height", d => 100) .attr("width", d => width / more_patterns.length) .attr("stroke", "black") .attr("stroke-width", 3) .attr("class", "menu2") .attr('fill', d => d.fill.url()); let activePattern = d3 .select(view) .selectAll('.active-pattern') .data([intialPattern]) .join('circle') .attr('class', 'active-pattern') .attr("r", r) .attr("fill", d => d.fill.url()) .attr("stroke", "black") .attr("stroke-width", 8) .attr("transform", "translate(" + width / 3 + "," + height / 2 + ")"); PatternMenu2.on("click", function(d) { view.value = d; view.dispatchEvent(new CustomEvent("input")); d3.select(view) .select('.active-pattern') .attr("fill", d.fill.url()); }); PatternMenu.on("click", function(d) { view.value = d; view.dispatchEvent(new CustomEvent("input")); d3.select(view) .select('.active-pattern') .attr("fill", d.fill.url()); }); }31:T690,patterns = [ { type: 'stripes', fill: pattern .stripe() .fill(d3.schemeTableau10) .width(38), options: ["width"] }, { type: "stripe", fill: pattern .stripe() .fill(["crimson", "yellow", "steelblue"]) .width([10, 4, 12]), options: ["width"] }, { type: "circle", fill: pattern.circle().fill(getColor()), options: ["spacing", "radius", "strokeWidth"], grid: ["hex", "square"] }, { type: "square", fill: pattern.square().fill(getColor()), options: ["spacing", "length", "strokeWidth"], grid: ["hex", "square"] }, { type: "hexagon", fill: pattern.hexagon(), options: ["spacing", "radius", "strokeWidth"], grid: ["hex", "square"] }, { type: "symbol", fill: pattern.symbol().fill(getColor()), options: ["spacing", "strokeWidth"], grid: ["hex", "square"] }, { type: "checker", fill: pattern.checker(), options: ["width"] }, { type: "letter", fill: pattern.text(), options: ["spacing", "strokeWidth", "fontSize"], grid: ["hex", "square"] }, { type: "sine", fill: pattern.sine().stroke(getColor()), options: ["amplitude", "period", "strokeWidth", "sampling"] }, { type: "stripe", fill: pattern.stripe(), options: ["width"] }, { type: "octagon", fill: pattern.octagon(), options: ["strokeWidth", "length"] }, { type: "plaid", fill: pattern.plaid(), options: ["width"] }, { type: "cairo", fill: pattern.cairo(), options: ["length", "strokeWidth"] }, { type: "fish", fill: pattern.fish().fill(getColor()), options: ["spacing", "scale"], grid: ["hex", "square"] } ]32:T41c,texture_lines = [ textures.lines(), textures.lines().heavier(), textures.lines().lighter(), textures.lines().thicker(), textures.lines().thinner(), textures .lines() .heavier(10) .thinner(1.5), textures .lines() .size(4) .stroke(getColor()) .strokeWidth(1), textures .lines() .size(8) .stroke(getColor()) .strokeWidth(2), textures .lines() .orientation("vertical") .strokeWidth(1) .stroke(getColor()) .shapeRendering("crispEdges"), textures .lines() .orientation("3/8") .stroke(getColor()) .stroke("darkorange"), textures .lines() .stroke(getColor()) .orientation("3/8", "7/8") .stroke("darkorange"), textures .lines() .orientation("vertical", "horizontal") .size(4) .strokeWidth(1) .stroke(getColor()) .shapeRendering("crispEdges") .stroke("darkorange"), textures .lines() .orientation("diagonal") .size(40) .strokeWidth(26) .stroke(getColor()) .background("firebrick") ]33:T99d9,//lichen.js pattern = { function pt(S, I) { const p = {}; // basic set up: p.sel = S || d3.select("svg"); // attempt to select SVG by default if (p.sel.node() && p.sel.node().nodeName != "svg") console.log("no svg found"); if (I) p.id = I; else p.id = patternGetNextClass(p.sel); // basic pattern info: p.bg = "none"; p.sw = 0; p.s = "#000"; p.o = 1; p.a = 0; p.background = function(_) { if (!arguments.length) return p.bg; p.bg = _; return p; }; p.strokeWidth = function(_) { if (!arguments.length) return p.sw; p.sw = _; return p; }; p.stroke = function(_) { if (!arguments.length) return p.s; p.s = _; return p; }; p.opacity = function(_) { if (!arguments.length) return p.o; p.o = _; return p; }; p.angle = function(_) { if (!arguments.length) return p.a; p.a = _; return p; }; p.url = () => { p.add(); return `url(#${p.id})`; }; return p; } ////////////////////////////////////////////////////////////////////// // Master Pattern for Centered Shape function ptCentered(S, I) { const p = pt(S, I); p.f = "steelblue"; p.hx = true; p.sp = 2; p.fill = function(_) { if (!arguments.length) return p.f; p.f = _; return p; }; p.hex = function(_) { if (!arguments.length) return p.hx; p.hx = _; return p; }; p.spacing = function(_) { if (!arguments.length) return p.sp; p.sp = _; return p; }; return p; } ////////////////////////////////////////////////////////////////////// // Single Square Pattern function ptSquare(S, I) { const p = ptCentered(S, I); p.l = 10; p.length = function(_) { if (!arguments.length) return p.l; p.l = _; return p; }; p._sq = pt => { wh(pt, p.l + p.sp, p.l + p.sp); applyBG(pt, p.bg, p.l + p.sp, p.l + p.sp); const d = [[p.sp / 2, p.sp / 2]]; const r = pt.selectAll(".rect").data(d); r.exit().remove(); r.enter() .append("rect") .attr("class", "rect"); }; p._hx = pt => { const d = hxCentroids(p.sp + p.l); wh(pt, d.w, d.h); applyBG(pt, p.bg, d.w, d.h); pt.selectAll(".rect") .data(d.c) .enter() .append("rect") .attr("class", "rect"); }; p._style = pt => { pt.selectAll(".rect") .attr("x", d => { return d[0]; }) .attr("y", d => { return d[1]; }) .attr("width", p.l) .attr("height", p.l) .attr("fill", p.f) .attr("stroke", p.s) .attr("stroke-width", p.sw); }; p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); if (p.hx) p._hx(pt); else p._sq(pt); p._style(pt); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Single Circle Pattern function ptCircle(S, I) { const p = ptCentered(S, I); p.r = 10; p.radius = function(_) { if (!arguments.length) return p.r; p.r = _; return p; }; p._sq = pt => { wh(pt, p.r * 2 + p.sp, p.r * 2 + p.sp); applyBG(pt, p.bg, p.r * 2 + p.sp, p.r * 2 + p.sp); const d = [[p.sp / 2 + p.r, p.sp / 2 + p.r]]; const c = pt.selectAll("circle").data(d); c.exit().remove(); c.enter().append("circle"); }; p._hx = pt => { const d = hxCentroids((p.sp / 2 + p.r) / 0.866); wh(pt, d.w, d.h); applyBG(pt, p.bg, d.w, d.h); pt.selectAll("circle") .data(d.c) .enter() .append("circle"); }; p._style = pt => { pt.selectAll("circle") .attr("cx", d => { return d[0]; }) .attr("cy", d => { return d[1]; }) .attr("r", p.r) .attr("fill", p.f) .attr("stroke", p.s) .attr("stroke-width", p.sw); }; p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); if (p.hx) p._hx(pt); else p._sq(pt); p._style(pt); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Single Hexagon Pattern function ptHexagon(S, I) { const p = ptCentered(S, I); p.r = 10; p.radius = function(_) { if (!arguments.length) return p.r; p.r = _; return p; }; p._sq = pt => { wh(pt, p.r * 2 + p.sp, p.r * 2 + p.sp); applyBG(pt, p.bg, p.r * 2 + p.sp, p.r * 2 + p.sp); const d = [[p.sp / 2 + p.r, p.sp / 2 + p.r]]; const c = pt.selectAll("path").data(d); c.exit().remove(); c.enter().append("path"); }; p._hx = pt => { const d = hxCentroids(p.sp / 2 + p.r); wh(pt, d.w, d.h); applyBG(pt, p.bg, d.w, d.h); pt.selectAll("path") .data(d.c) .enter() .append("path"); }; p._style = pt => { pt.selectAll("path") .attr("d", d => { return hexPath(d[0], d[1], p.r); }) .attr("fill", p.f) .attr("stroke", p.s) .attr("stroke-width", p.sw); }; p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); if (p.hx) p._hx(pt); else p._sq(pt); p._style(pt); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Single Letter Pattern function ptLetter(S, I) { const p = ptCentered(S, I); p.t = "\u03B1"; p.dy = 5; p.k = 14; p.offsetY = function(_) { if (!arguments.length) return p.dy; p.dy = _; return p; }; p.text = function(_) { if (!arguments.length) return p.t; p.t = _; return p; }; p.fontSize = function(_) { if (!arguments.length) return p.k; p.k = _; return p; }; p.sp = 20; p._sq = pt => { wh(pt, p.sp, p.sp); // set width/height applyBG(pt, p.bg, p.sp, p.sp); // set background rect const d = [[p.sp / 2, p.sp / 2]]; // middle of each path. const c = pt.selectAll("text").data(d); c.exit().remove(); c.enter().append("text"); }; p._hx = pt => { const d = hxCentroids(p.sp / 2); // get hex info, wh(pt, d.w, d.h); // set width/height applyBG(pt, p.bg, d.w, d.h); // set background rect pt.selectAll("text") .data(d.c) .enter() .append("text"); }; p._style = pt => { pt.selectAll("text") .text(p.t) .style("text-anchor", "middle") .attr("fill", p.f) .attr("stroke", p.s) .attr("stroke-width", p.sw) .attr("x", d => { return d[0]; }) .attr("y", d => { return d[1]; }) .style("font-size", p.k) .attr("dy", p.dy); }; p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); if (p.hx) p._hx(pt); else p._sq(pt); p._style(pt); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Single Symbol Pattern function ptSymbol(S, I) { const p = ptCentered(S, I); p.sym = d3 .symbol() .type(d3.symbolWye) .size(100); p.r = 14; p.symbol = function(_) { if (!arguments.length) return p.sym; p.sym = _; return p; }; p.dx = 0; p.dy = 0; p.center = function(_) { if (!arguments.length) return [p.dx, p.dy]; p.dx = _[0]; p.dy = _[1]; return p; }; p.sc = 1; p.scale = function(_) { if (!arguments.length) return p.sc; p.sc = _; return p; }; p.sp = 16; p._sq = pt => { wh(pt, p.sp, p.sp); applyBG(pt, p.bg, p.sp, p.sp); const d = [[p.sp / 2, p.sp / 2]]; const c = pt.selectAll("path").data(d); c.exit().remove(); c.enter().append("path"); }; p._hx = pt => { const d = hxCentroids((p.sp / 2) * 1.414); wh(pt, d.w, d.h); applyBG(pt, p.bg, d.w, d.h); pt.selectAll("path") .data(d.c) .enter() .append("path"); }; p._style = pt => { pt.selectAll("path") .attr("d", p.sym) .attr("transform", d => { return `translate(${[d[0] - p.dx * p.sc, d[1] - p.dy * p.sc]})scale(${ p.sc })`; }) .attr("r", p.r) .attr("fill", p.f) .attr("stroke", p.s) .attr("stroke-width", p.sw); }; p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); if (p.hx) p._hx(pt); else p._sq(pt); p._style(pt); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Common Symbols // Symbols from Maki: https://www.mapbox.com/maki-icons/ const ptWetland = (S, I) => { const pt = ptSymbol(S, I); pt.background("lightblue") .fill("darkgreen") .stroke("black") .scale(0.8) .strokeWidth(0) .spacing(30) .center([12, 12]) .symbol( "M 2.6181942,7.0403716 C 3.2611586,6.454134 4.0830945,6.157614 4.9177382,6.2107118 6.7744687,6.0665089 8.4206096,7.5109538 8.699883,9.5293512 L 9.8799123,17.294968 C 8.912591,16.814927 7.7983711,16.845458 6.8541964,17.377933 L 5.64391,9.5293512 C 5.2012477,8.0935415 3.9988281,7.1045871 2.6181942,7.0403716 Z M 11.695343,18.224187 c 0.577305,-0.510407 1.248106,-0.878278 1.966714,-1.078557 L 15.507745,4.5513921 C 15.950405,3.1155825 17.152827,2.126628 18.53346,2.0624123 17.898363,1.4841395 17.088681,1.1881167 16.264172,1.2327526 14.407443,1.0885575 12.761302,2.532995 12.482028,4.5513921 L 10.515313,17.477493 c 0.421482,0.191155 0.818154,0.442211 1.18003,0.746694 z m 6.535546,-0.82966 0,0 c 0.236762,-0.211896 0.489864,-0.400559 0.756429,-0.56417 l 1.059,-7.3010058 C 20.488982,8.0935415 21.691399,7.1045871 23.072034,7.0403716 22.436936,6.462098 21.627254,6.1660758 20.802747,6.2107118 18.946017,6.0665089 17.299875,7.5109538 17.020603,9.5293512 l -1.013615,6.6372778 c 0.821632,0.204099 1.585173,0.625564 2.223901,1.227898 z m 3.328289,2.090743 0,0 c -0.657491,-0.0166 -1.297883,0.231308 -1.800303,0.696914 l -0.711042,0.68032 c -0.430713,0.422465 -1.082149,0.422465 -1.512861,0 -0.226928,-0.199119 -0.438726,-0.431422 -0.665655,-0.647135 -1.070499,-0.990281 -2.636005,-0.990281 -3.706504,0 -0.242056,0.215713 -0.468985,0.464611 -0.711042,0.680322 -0.43071,0.422464 -1.082147,0.422464 -1.512859,0 -0.242056,-0.215711 -0.468985,-0.464609 -0.711042,-0.680322 -1.0679267,-0.980989 -2.6234473,-0.980989 -3.6913739,0 C 6.3095677,20.431082 6.0977674,20.663385 5.8708388,20.862504 5.735892,20.981147 5.5820341,21.071246 5.4169813,21.127998 4.974924,21.236186 4.5139564,21.078058 4.206695,20.713167 3.8322624,20.358071 3.4325654,20.036328 3.0115371,19.750761 2.6992833,19.555125 2.3419462,19.462869 1.9827937,19.48527 l -0.090771,0 c -0.4177004,0 -0.7564291,0.371522 -0.7564291,0.829659 0,0.45814 0.3387287,0.82966 0.7564289,0.82966 l 0,0 c 0.3721631,0.02406 0.7204229,0.209075 0.9682291,0.514388 l 0.5446289,0.431425 c 1.0161869,0.912624 2.4671689,0.95361 3.524959,0.09956 0.2874433,-0.232304 0.5446289,-0.530982 0.8320721,-0.779879 0.4307105,-0.422462 1.0821469,-0.422462 1.5128579,0 l 0.5900146,0.580762 c 1.0494699,1.026953 2.6205729,1.075904 3.7216299,0.11614 0.226929,-0.182526 0.408472,-0.414832 0.635402,-0.61395 0.450227,-0.5041 1.187744,-0.512231 1.64735,-0.0184 0.0055,0.0061 0.01112,0.01222 0.0168,0.0184 l 0.590014,0.580763 c 0.736158,0.684303 1.737519,0.915281 2.662632,0.613948 0.578668,-0.171904 1.102269,-0.516545 1.512857,-0.995593 0.234342,-0.29403 0.555823,-0.48784 0.907718,-0.547574 l 0,0 c 0.417697,0 0.756426,-0.371521 0.756426,-0.82966 0,-0.458138 -0.338729,-0.829658 -0.756426,-0.829658 z" ); return pt; }; const ptHoundstooth = (S, I) => { const pt = ptSymbol(S, I); pt.background("#0077BE") .fill("black") .stroke("black") .strokeWidth(0) .scale(3) .spacing(36) .center([6, 6]) .symbol( "M0,0L6,0 L12,6L9,6L6,3L6,6L3,6L6,9L6,12L0,6L0,0 M9,0L12,0L12,3L9,0 M0,9L0,12L3,12L0,9z" ); return pt; }; const ptLV = (S, I) => { const pt = ptSymbol(S, I); pt.text(d3.select(LV_star).html()); return pt; }; const ptFish = (S, I) => { const pt = ptSymbol(S, I); pt.background("#0077BE") .fill("orange") .stroke("black") .strokeWidth(1) .scale(0.8) .spacing(30) .center([12, 12]) .symbol( "m 17.055085,18.852887 c -0.444915,-0.983199 -0.444915,-3.768927 0,-4.588259 0.593221,-0.983198 5.042373,2.294129 5.042373,2.294129 1.334746,0.655466 1.334746,-9.9958486 0,-9.3403831 0,0 -4.597458,3.4411941 -5.042373,2.2941292 -0.444915,-1.1470646 -0.444915,-3.4411939 0,-4.5882585 C 17.5,3.9410464 23.135594,3.77718 23.135594,3.77718 c 0,-1.1470646 -4.300848,-2.2941292 -6.080509,-2.2941292 -1.779661,0 -3.707627,0.1638664 -6.080508,1.310931 C 8.6016949,3.77718 6.6737288,5.4158438 4.8940678,7.3822402 3.1144068,9.3486367 0.88983051,13.28143 0.88983051,14.428495 c 0,1.147064 2.22457629,4.588258 5.48728809,6.063055 3.2627119,1.474798 4.8940684,1.80253 6.6737294,2.130263 1.631356,0.163866 3.855932,0 5.783898,-0.491599 1.483051,-0.327733 4.300848,-1.147065 4.300848,-1.80253 0,-0.327733 -5.635594,-0.491599 -6.080509,-1.474797 z M 7.5635593,15.08396 c -1.1864407,0 -2.2245763,-1.147065 -2.2245763,-2.457996 0,-1.310931 1.0381356,-2.457995 2.2245763,-2.457995 1.1864407,0 2.2245763,1.147064 2.2245763,2.457995 0,1.310931 -1.0381356,2.457996 -2.2245763,2.457996 z" ); return pt; }; const ptFire = (S, I) => { const fire = ptSymbol(S, I); fire .background("yellow") .fill("orange") .stroke("black") .scale(0.6) .spacing(30) .center([12, 12]) .symbol( "M 12.108051,0.7923729 7.9588913,7.0366745 5.4693956,3.9145237 C 4.5486141,5.4370405 0.99427797,9.0542083 0.99427797,12.974381 c 0,5.773481 4.97583813,10.453585 11.11377303,10.453585 6.137935,0 11.113773,-4.680104 11.113773,-10.453585 0,-3.9201727 -3.554336,-7.5373405 -4.475118,-9.0598573 L 16.25721,7.0366745 12.108051,0.7923729 Z m 0,10.1469901 c 0,0 4.149159,3.999163 4.149159,7.024839 0,1.306776 -1.370716,3.122151 -4.149159,3.122151 -2.7784433,0 -4.1491597,-1.815375 -4.1491597,-3.122151 0,-2.921865 4.1491597,-7.024839 4.1491597,-7.024839 z" ); return fire; }; const ptDanger = (S, I) => { const danger = ptSymbol(S, I); danger .background("darkorange") .fill("black") .stroke("black") .strokeWidth(0) .scale(0.8) .spacing(40) .center([12, 12]) .symbol( "m 22.723729,22.613369 c -0.126052,0.290777 -0.44093,0.481882 -0.790981,0.479633 -0.100135,0.01604 -0.202793,0.01604 -0.302928,0 l -9.744214,-3.657207 -9.7610432,3.657207 c -0.4328517,0.150636 -0.9209039,-0.03987 -1.0898709,-0.425375 -0.00135,-0.0032 -0.00269,-0.0062 -0.00404,-0.0093 -0.2172674,-0.365871 -0.060249,-0.819425 0.3507243,-1.012776 0.043925,-0.02068 0.089868,-0.03792 0.1373278,-0.05141 L 9.6809563,18.596436 1.518705,15.598725 C 1.0740726,15.478367 0.82314655,15.059736 0.95828658,14.663738 1.0934264,14.267742 1.5634712,14.044262 2.0081035,14.16462 c 0.039885,0.01079 0.078762,0.02428 0.1164593,0.04017 l 9.7610432,3.612242 9.761043,-3.612242 c 0.419724,-0.177614 0.921745,-0.01858 1.121173,0.355229 0.199428,0.373815 0.02087,0.820924 -0.398856,0.998538 -0.0377,0.01604 -0.07658,0.02938 -0.116459,0.04017 l -8.179081,2.997711 8.162251,2.997711 c 0.438742,0.136395 0.670315,0.563719 0.517335,0.95447 -0.0086,0.02203 -0.01835,0.04361 -0.02928,0.06475 z m -3.2649,-15.6630409 0,0.6744849 c -0.0035,0.3191064 -0.121508,0.6289199 -0.336588,0.8843248 -0.940089,0.9267424 -1.952377,1.7932322 -3.029289,2.5930212 l 0,1.738672 c 0.0025,0.311761 -0.21205,0.592198 -0.53854,0.704462 l -3.635147,1.304004 -0.117806,0 -3.6519766,-1.304004 c -0.3002362,-0.1307 -0.4851911,-0.40709 -0.4712228,-0.704462 l 0,-1.738672 C 6.5890619,10.304018 5.5654987,9.4373789 4.6153117,8.5091378 4.4121811,8.2501355 4.3061559,7.9406219 4.3123827,7.624813 l 0,-0.6744849 C 4.5932652,3.625417 7.5055902,0.95595549 11.22926,0.61016949 l 0.605858,0 0,0 0.656346,0 c 3.746557,0.31940607 6.689344,2.99726121 6.967365,6.34015861 z M 9.361198,6.6055913 c 0,-0.8278179 -0.7534515,-1.4988554 -1.6829384,-1.4988554 -0.9294868,0 -1.6829384,0.6710375 -1.6829384,1.4988554 0,0.8278179 0.7534516,1.4988555 1.6829384,1.4988555 0.9294869,0 1.6829384,-0.6710376 1.6829384,-1.4988555 z m 1.682938,4.4965677 c 0,-0.413835 -0.376809,-0.749428 -0.841469,-0.749428 -0.4646591,0 -0.841469,0.335593 -0.841469,0.749428 l 0,0.749427 c 0,0.413834 0.3768099,0.749427 0.841469,0.749427 0.46466,0 0.841469,-0.335593 0.841469,-0.749427 l 0,-0.749427 z m 3.365878,0 c 0,-0.413835 -0.376811,-0.749428 -0.84147,-0.749428 -0.464659,0 -0.841469,0.335593 -0.841469,0.749428 l 0,0.749427 c 0,0.413834 0.37681,0.749427 0.841469,0.749427 0.464659,0 0.84147,-0.335593 0.84147,-0.749427 l 0,-0.749427 z m 3.365877,-4.4965677 c 0,-0.8278179 -0.753452,-1.4988554 -1.682939,-1.4988554 -0.929487,0 -1.682938,0.6710375 -1.682938,1.4988554 0,0.8278179 0.753451,1.4988555 1.682938,1.4988555 0.929487,0 1.682939,-0.6710376 1.682939,-1.4988555 z" ); return danger; }; ////////////////////////////////////////////////////////////////////// // Checker function ptChecker(S, I) { const p = pt(S, I); p.w = 10; p.f = ["steelblue", "white"]; p.width = function(_) { if (!arguments.length) return p.w; p.w = _; return p; }; p.fill = function(_) { if (!arguments.length) return p.f; p.f = arr(_); return p; }; p.a = 45; // go about drawing: p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); p.o = arr(p.o); if (p.f.length == 1) p.f.push("white"); const totalWidth = p.w * 2; pt.attr("width", totalWidth) .attr("height", totalWidth) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", `rotate(${p.a})`) .attr("id", p.id); const rects = pt .selectAll("rect") .data([[0, 0], [0, p.w], [p.w, p.w], [p.w, 0]]); rects.exit().remove(); const enter = rects.enter().append("rect"); enter .merge(rects) .attr("width", p.w) .attr("height", p.w) .attr("x", (d, i) => { return d[0]; }) .attr("y", (d, i) => { return d[1]; }) .attr("fill", (d, i) => { return p.f[i % 2]; }) .attr("opacity", (d, i) => { return p.o[i % p.o.length]; }); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Stripe function ptStripe(S, I) { const p = pt(S, I); p.w = [10]; p.f = ["steelblue", "white"]; p.width = function(_) { if (!arguments.length) return p.w; p.w = arr(_); return p; }; p.fill = function(_) { if (!arguments.length) return p.f; p.f = arr(_); return p; }; p.a = 45; // go about drawing: p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); p.o = arr(p.o); if (p.f.length == 1) p.f.push("white"); let totalWidth = 0; let currentX = 0; p.f.forEach((d, i) => { totalWidth += p.w[i % p.w.length]; }); pt.attr("width", totalWidth) .attr("height", 20) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", `rotate(${p.a})`) .attr("id", p.id); const rects = pt.selectAll("rect").data(p.f); rects.exit().remove(); const enter = rects.enter().append("rect"); enter .merge(rects) .attr("width", (d, i) => { return p.w[i % p.w.length]; }) .attr("height", 20) .attr("x", (d, i) => { currentX += p.w[i % p.w.length]; return currentX - p.w[i % p.w.length]; }) .attr("y", 0) .attr("fill", (d, i) => { return p.f[i]; }) .attr("opacity", (d, i) => { return p.o[i % p.o.length]; }); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Plaid function ptPlaid(S, I) { const p = pt(S, I); p.w = [[10, 5], [12, 6]]; p.f = [["crimson", "red"], ["steelblue", "white"]]; p.o = [[0.5, 0.8], [0.6, 0.4]]; p.width = function(_) { if (!arguments.length) return p.w; p.w = _; return p; }; p.fill = function(_) { if (!arguments.length) return p.f; p.f = _; return p; }; p.a = 45; // go about drawing: p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); p.o = arr(p.o); p.w = arr(p.w); if (Array.isArray(p.w[0]) && p.w.length == 1) p.w.push(p.w[0]); else if (!Array.isArray(p.w[0])) { p.w = [p.w, p.w]; } if (Array.isArray(p.o[0]) && p.o.length == 1) p.o.push(p.o[0]); else if (!Array.isArray(p.o[0])) { p.o = [p.o, p.o]; } if (Array.isArray(p.f[0]) && p.f.length == 1) p.f.push(p.f[0]); else if (!Array.isArray(p.f[0])) { p.f = [p.f, p.f]; } let totalWidth = 0; let totalHeight = 0; let currentX = 0; let currentY = 0; p.f[0].forEach((d, i) => { totalWidth += p.w[0][i % p.w[0].length]; }); p.f[1].forEach((d, i) => { totalHeight += p.w[1][i % p.w[1].length]; }); pt.attr("width", totalWidth) .attr("height", totalHeight) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", `rotate(${p.a})`) .attr("id", p.id); const r0 = pt.selectAll(".x").data(p.f[0]); const r1 = pt.selectAll(".y").data(p.f[1]); r0.exit().remove(); r1.exit().remove(); const e0 = r0 .enter() .append("rect") .attr("class", "x"); const e1 = r1 .enter() .append("rect") .attr("class", "y"); e0.merge(r0) .attr("width", (d, i) => { return p.w[0][i % p.w[0].length]; }) .attr("height", totalHeight) .attr("x", (d, i) => { currentX += p.w[0][i % p.w[0].length]; return currentX - p.w[0][i % p.w[0].length]; }) .attr("y", 0) .attr("fill", (d, i) => { return p.f[0][i]; }) .attr("opacity", (d, i) => { return p.o[0][i % p.o.length]; }); e1.merge(r1) .attr("height", (d, i) => { return p.w[1][i % p.w[1].length]; }) .attr("width", totalWidth) .attr("y", (d, i) => { currentY += p.w[1][i % p.w[1].length]; return currentY - p.w[1][i % p.w[1].length]; }) .attr("x", 0) .attr("fill", (d, i) => { return p.f[1][i]; }) .attr("opacity", (d, i) => { return p.o[1][i % p.o.length]; }); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Cairo Pentagonal function ptCairo(S, I) { const p = pt(S, I); p.base = [ [ [0.7071067811865476, 1.224744871391589], [0.2981726899245648, 2.750907676928317], [1.1165716605051963, 3.560304443015607], [2.641768897701186, 3.161464390300587], [2.2332695867232757, 1.6336789626535717] ], [ [0.7071067811865476, 1.224744871391589], [1.1160408724485302, -0.30141793414513884], [0.29764190186789885, -1.1108147002324285], [-1.4190814287039564, 0.0028104639365018613], [-0.8190560243501803, 0.8158107801296063] ], [ [3.0426663528105653, 0.8152799920729403], [2.6438263000955455, -0.7099172451230495], [4.159364279028645, -1.1113454882890943], [4.977763249609277, -0.3019487222018049], [4.5688291583472935, 1.224214083334923] ], [ [2.641768897701186, 3.161464390300587], [4.15989506708531, 2.750376888871651], [4.978294037665942, 3.5597736549589403], [4.56935994640396, 5.0859364604956685], [3.043197140867232, 4.677002369233686] ], [ [-1.2296127377224502, 3.1594069879062276], [0.2981726899245648, 2.750907676928317], [1.1165716605051963, 3.560304443015607], [0.7076375692432135, 5.086467248552335], [-0.8185252362935145, 4.677533157290352] ], [ [1.1160408724485302, -0.30141793414513884], [2.6438263000955455, -0.7099172451230495], [3.0426663528105653, 0.8152799920729403], [2.2332695867232757, 1.6336789626535717], [0.7071067811865476, 1.224744871391589] ], [ [1.1165716605051963, 3.560304443015607], [2.641768897701186, 3.161464390300587], [3.043197140867232, 4.677002369233686], [2.2338003747799418, 5.495401339814318], [0.7076375692432135, 5.086467248552335] ], [ [-0.8190560243501803, 0.8158107801296063], [0.7071067811865476, 1.224744871391589], [0.2981726899245648, 2.750907676928317], [-1.2296127377224502, 3.1594069879062276], [-1.62845279043747, 1.6342097507102378] ], [ [3.0426663528105653, 0.8152799920729403], [4.5688291583472935, 1.224214083334923], [4.15989506708531, 2.750376888871651], [2.641768897701186, 3.161464390300587], [2.2332695867232757, 1.6336789626535717] ] ]; p.l = 20; p.f = ["#2b8cbe", "#a8ddb5", "#7bccc4", "#ccebc5"]; p.a = 15; p.sw = 1; p.length = function(_) { if (!arguments.length) return p.l; p.l = _; return p; }; p.fill = function(_) { if (!arguments.length) return p.f; p.f = _; return p; }; p.a = 45; // go about drawing: p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); const k = p.l / 2; const w = k * 3.864; const c = [0, 1, 1, 1, 1, 2, 2, 3, 3]; const l = d3 .line() .x(d => { return d[0] * k; }) .y(d => { return d[1] * k; }); pt.attr("width", w) .attr("height", w) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", `rotate(${p.a})`) .attr("id", p.id); pt.selectAll("path") .data(p.base) .enter() .append("path"); pt.selectAll("path") .attr("d", l) .attr("fill", (d, i) => { return p.f[c[i]]; }) .attr("stroke", p.s) .attr("stroke-width", p.sw) .attr("opacity", p.o); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Octagon + Square function ptOctagon(S, I) { const p = pt(S, I); p.base = [ [[0.707, 0], [0, -0.707], [-0.707, 0], [0, 0.707]], [[0.707, 2.41], [0, 1.717], [-0.707, 2.41], [0, 3.12]], [[3.12, 2.41], [2.41, 1.71], [1.71, 2.41], [2.41, 3.12]], [[3.12, 0], [2.41, -0.707], [1.71, 0], [2.41, 0.707]], [ [0, 0.707], [0, 1.717], [0.71, 2.41], [1.71, 2.41], [2.41, 1.71], [2.41, 0.71], [1.71, 0], [0.707, 0], [0, 0.707] ] ]; p.l = 32; p.f = ["steelblue", "white"]; p.a = 15; p.sw = 1; p.length = function(_) { if (!arguments.length) return p.l; p.l = _; return p; }; p.fill = function(_) { if (!arguments.length) return p.f; p.f = _; return p; }; p.a = 0; p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); const k = p.l / 2.41; const w = k * 2.41 + p.sw / 2; const c = [1, 1, 1, 1, 0]; const l = d3 .line() .x(d => { return d[0] * k; }) .y(d => { return d[1] * k; }); pt.attr("width", w) .attr("height", w) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", `rotate(${p.a})`) .attr("id", p.id); pt.selectAll("path") .data(p.base) .enter() .append("path"); pt.selectAll("path") .attr("d", l) .attr("fill", (d, i) => { return p.f[c[i]]; }) .attr("stroke", p.s) .attr("stroke-width", p.sw) .attr("opacity", p.o); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Sine function ptSine(S, I) { const p = pt(S, I); p.amp = 10; p.sam = 1; p.per = 100; p.sw = 10; p.s = "steelblue"; p.f = "none"; p.sp = 4; p.amplitude = function(_) { if (!arguments.length) return p.amp; p.amp = _; return p; }; p.period = function(_) { if (!arguments.length) return p.per; p.per = _; return p; }; p.sampling = function(_) { if (!arguments.length) return p.sam; p.sam = _; return p; }; p.spacing = function(_) { if (!arguments.length) return p.sp; p.sp = _; return p; }; p.add = () => { const defs = checkDefs(p.sel); const pt = checkPattern(p.sel, defs, p.id); ptProps(pt, p.a, p.id); const points = []; let x, y; const width = p.per; const samples = width / p.sam; for (let i = 0; i < samples + 20; i++) { x = (i - 10) * p.sam; y = Math.sin((i / samples) * Math.PI * 8) * p.amp; if (i == 0) points.push(`M${x} ${y}`); else points.push(` L${x} ${y}`); } const path = points.join(" "); pt.attr("width", width) .attr("height", (p.amp + p.sw / 4 + p.sp) * 2) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", `rotate(${p.a})`) .attr("stroke-width", p.sw) .attr("stroke", p.s) .attr("id", p.id) .attr("fill", p.f); const paths = pt.selectAll("path").data([path]); paths.exit().remove(); const enter = paths.enter().append("path"); enter .merge(paths) .attr("transform", `translate(0,${p.amp + p.sw / 4 + p.sp})`) .attr("d", path); return p; }; p.add(); return p; } ////////////////////////////////////////////////////////////////////// // Scheme const ptSchemeCategory10 = S => { const sel = S || d3.select("svg"); // attempt to select SVG by default if (sel.node() && sel.node().nodeName != "svg") console.log("no svg found"); return [ ptCircle(sel) .radius(2) .spacing(2) .fill("black"), ptCircle(sel) .radius(6) .fill("none") .strokeWidth(1) .spacing(2), ptCircle(sel) .radius(5) .spacing(4) .fill("black"), ptCircle(sel) .radius(1) .spacing(1) .fill("black"), ptCircle(sel) .radius(3) .fill("none") .strokeWidth(1) .spacing(2), ptCircle(sel) .radius(2) .spacing(5) .hex(false) .fill("black"), ptCircle(sel) .radius(10) .spacing(1) .fill("black"), ptCircle(sel) .radius(10) .spacing(1) .fill("none") .strokeWidth(2), ptCircle(sel) .radius(7) .spacing(4) .fill("none") .strokeWidth(5), ptCircle(sel) .radius(6) .hex(false) .spacing(5) .fill("black") ]; }; ////////////////////////////////////////////////////////////////////// // Scheme Generator const ptCircles = S => { const c = {}; c.bg = ["none"]; c.f = ["black"]; c.r = [1]; c.s = [16, 8, 4, 2]; c.spacings = function(_) { if (!arguments.length) return c.s; c.s = arr(_); return c; }; c.fills = function(_) { if (!arguments.length) return c.f; c.f = arr(_); return c; }; c.radii = function(_) { if (!arguments.length) return c.r; c.r = arr(_); return c; }; c.backgrounds = function(_) { if (!arguments.length) return c.bg; c.bg = arr(_); return c; }; c.get = () => { console.log(c); const max = Math.max(c.s.length, c.f.length, c.r.length, c.bg.length); const a = []; for (let i = 0; i < max; i++) { const p = ptCircle(S); if (c.s) p.spacing(c.s[i % c.s.length]); if (c.f) p.fill(c.f[i % c.f.length]); if (c.r) p.radius(c.r[i % c.r.length]); if (c.bg) p.background(c.bg[i % c.bg.length]); p.add(); a.push(p); } return a; }; return c; }; ////////////////////////////////////////////////////////////////////// // Stripes Manager const ptManager = S => { const m = {}; m.keys = []; m.f = d3.schemeCategory20; m.combos = []; m.comboIds = []; m.totalWidth = 12; m.a = 45; m.sel = S; m.values = () => { const values = []; m.keys.forEach((d, i) => { values.push({ key: d, color: m.f[i] }); }); return values; }; m.fills = _ => { if (!_) return m.f; m.f = _; return m; }; m.width = _ => { if (!_) return m.totalWidth; m.totalWidth = _; return m; }; m.datum = d => { let bStriped = false; // add new keys to key array: if (Array.isArray(d)) { d.forEach(e => { if (m.keys.indexOf(e) < 0) m.keys.push(e); }); if (d.length > 1) bStriped = true; } else { if (m.keys.indexOf(d) < 0) m.keys.push(d); } // Return a fill - solid or stripe pattern: if (!bStriped) { if (Array.isArray(d)) return m.f[m.keys.indexOf(d[0])]; else return m.f[m.keys.indexOf(d)]; } // requires stripes: else { // ensure same order for areas with same stripes: d.sort(); // don't create duplicate patterns let existing = null; m.combos.forEach((c, i) => { if ( c.length == d.length && c.every((e, j) => { return d[j] === e; }) ) existing = i; }); if (existing != null) { return m.comboIds[existing]; } // create a new pattern: else { m.combos.push(d); const stripeColors = []; d.forEach(e => { stripeColors.push(m.f[m.keys.indexOf(e)]); }); const w = m.totalWidth / stripeColors.length; const str = ptStripe(m.sel) .fill(stripeColors) .angle(m.a) .width(w); m.comboIds.push(str.use()); return str.use(); } } return m; }; return m; }; ////////////////////////////////////////////////////////////////////// // Pattern Helper Functions: // width and height: function wh(e, w, h) { e.attr("width", w); e.attr("height", h); } function checkDefs(s) { let defs = s.select("defs"); if (defs.empty()) defs = s.append("defs"); return defs; } function checkPattern(s, d, id) { let pt = s.select(`#${id}`); if (pt.empty()) pt = d.append("pattern"); return pt; } function ptProps(p, a, id) { p.attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", `rotate(${a})`) .attr("id", id); } // takes radius, stroke width, and spacing additional spacing to return length,width of pattern and pattern object centroids. function hxCentroids(r) { // units: const h = r * 2; const w = (Math.sqrt(3) / 2) * h; // dimensions: const dy = h * 1.5; const dx = w; return { h: dy, w: dx, c: [[w / 2, 0], [w / 2, dy], [0, (h * 3) / 4], [dx, (h * 3) / 4]] }; } // draws background for pattern (p) with fill (f) and dimensions x,y function applyBG(p, f, x, y) { let r = p.select(".ptBackground"); r.remove(); r = p.append("rect"); r.attr("width", x) .attr("height", y) .attr("fill", f) .attr("x", 0) .attr("y", 0) .lower() .attr("class", "ptBackground"); } // draws background color for canvas patterns, c is context, f is fill, and dimensions are x,y function patternApplyCanvasBackground(c, f, x, y) { c.beginPath(); c.fillStyle = f; c.fillRect(0, 0, x, y); } // returns a hexagon path centered at [x,y] with r function hexPath(x, y, r) { const x1 = x; const y1 = y - r; const x2 = x + Math.cos(Math.PI / 6) * r; const y2 = y - Math.sin(Math.PI / 6) * r; const x3 = x + Math.cos(Math.PI / 6) * r; const y3 = y + Math.sin(Math.PI / 6) * r; const x4 = x; const y4 = y + r; const x5 = x - Math.cos(Math.PI / 6) * r; const y5 = y + Math.sin(Math.PI / 6) * r; const x6 = x - Math.cos(Math.PI / 6) * r; const y6 = y - Math.sin(Math.PI / 6) * r; const path = `M${x1} ${y1} L${x2} ${y2} L${x3} ${y3} L${x4} ${y4} L${x5} ${y5} L${x6} ${y6}z`; return path; } // ensure a is an array. function arr(a) { if (Array.isArray(a)) return a; else return [a]; } // Get the next free class for a pattern: function patternGetNextClass(svg) { function increment() { const selection = svg.select(`#d3Pattern-${i}`); if (!selection.empty()) { return false; } return true; } var i = 0; while (!increment(i)) { i++; if (i > 1000) break; // upper limit of patterns } return `d3Pattern-${i}`; } return { circle: ptCircle, square: ptSquare, hexagon: ptHexagon, text: ptLetter, symbol: ptSymbol, wetland: ptWetland, fish: ptFish, houndstooth: ptHoundstooth, LV: ptLV, fire: ptFire, danger: ptDanger, checker: ptChecker, stripe: ptStripe, plaid: ptPlaid, cairo: ptCairo, octagon: ptOctagon, sine: ptSine, circles: ptCircles, stripeManager: ptManager, circleSchemeCategory10: ptSchemeCategory10 }; }34:T1d62,TurnDial = { const constant$1 = x => { return function constant() { return x; }; }; function chevronArcInnerRadius(d) { return d.innerRadius; } function chevronArcOuterRadius(d) { return d.outerRadius; } function chevronArcStartAngle(d) { return d.startAngle; } function chevronArcEndAngle(d) { return d.endAngle; } function chevronEndIndent(d) { return d.endIndent; } function chevronStartIndent(d) { return d.startIndent; } const chevronArc = () => { let innerRadius = chevronArcInnerRadius, outerRadius = chevronArcOuterRadius, startAngle = chevronArcStartAngle, endAngle = chevronArcEndAngle, endIndent = chevronEndIndent, startIndent = chevronStartIndent, context = null; function chevronArc(...args) { let buffer; let r; let r0 = +innerRadius.apply(this, args); let r1 = +outerRadius.apply(this, args); const a0 = startAngle.apply(this, args) - Math.PI / 2; const a1 = endAngle.apply(this, args) - Math.PI / 2; const e1 = +endIndent.apply(this, args); const e0 = +startIndent.apply(this, args); const da = Math.abs(a1 - a0); const cw = a1 > a0; if (!context) context = buffer = d3.path(); // Ensure that the outer radius is always larger than the inner radius. if (r1 < r0) (r = r1), (r1 = r0), (r0 = r); // Or is it a circular or annular sector? else { ///////// get main coordinates: const tailOuter = {}; tailOuter.x = Math.cos(a0) * r1; // a0 = starting angle tailOuter.y = Math.sin(a0) * r1; // r1 = outer radius const headOuter = {}; headOuter.x = r1 * Math.cos(a1); headOuter.y = r1 * Math.sin(a1); const headInner = {}; headInner.x = r0 * Math.cos(a1); headInner.y = r0 * Math.sin(a1); const tailInner = {}; tailInner.x = Math.cos(a0) * r0; tailInner.y = Math.sin(a0) * r0; const rDifference = e1; const headMidpoint = {}; headMidpoint.x = (headInner.x + headOuter.x) / 2; headMidpoint.y = (headInner.y + headOuter.y) / 2; const tailMidpoint = {}; tailMidpoint.x = (tailInner.x + tailOuter.x) / 2; tailMidpoint.y = (tailInner.y + tailOuter.y) / 2; let m0 = (headInner.y - headOuter.y) / (headInner.x - headOuter.x); m0 = 1 / m0; const k0 = e1 / Math.sqrt(1 + m0 * m0); const headPoint = {}; if (Math.abs(m0) > 1000 * Math.PI) { if (cw) { headPoint.x = headMidpoint.x; if (headInner.x < 0) { headPoint.y = headMidpoint.y - e1; } else { headPoint.y = headMidpoint.y + e1; } } else { headPoint.x = headMidpoint.x; if (headInner.x < 0) { headPoint.y = headMidpoint.y + e1; } else { headPoint.y = headMidpoint.y - e1; } } } else { let headAngle = a1; while (headAngle < 0) { headAngle += Math.PI * 2; } if (headAngle % (Math.PI * 2) < Math.PI) { if (cw) { headPoint.x = headMidpoint.x - k0; headPoint.y = headMidpoint.y + m0 * k0; } else { headPoint.x = headMidpoint.x + k0; headPoint.y = headMidpoint.y - m0 * k0; } } else { if (cw) { headPoint.x = headMidpoint.x + k0; headPoint.y = headMidpoint.y - m0 * k0; } else { headPoint.x = headMidpoint.x - k0; headPoint.y = headMidpoint.y + m0 * k0; } } } // tail indent: let m1 = (tailInner.y - tailOuter.y) / (tailInner.x - tailOuter.x); m1 = 1 / m1; const k1 = e0 / Math.sqrt(1 + m1 * m1); const tailPoint = {}; if (Math.abs(m1) > 1000 * Math.PI) { if (cw) { tailPoint.x = tailMidpoint.x; if (tailInner.x < 0) { tailPoint.y = tailMidpoint.y - e0; } else { tailPoint.y = tailMidpoint.y + e0; } } else { tailPoint.x = tailMidpoint.x; if (tailOuter.x < 0) { tailPoint.y = tailMidpoint.y + e0; } else { tailPoint.y = tailMidpoint.y - e0; } } } else { if (a0 > 0 && a0 < Math.PI) { if (cw) { tailPoint.x = tailMidpoint.x - k1; tailPoint.y = tailMidpoint.y + k1 * m1; } else { tailPoint.x = tailMidpoint.x + k1; tailPoint.y = tailMidpoint.y - k1 * m1; } } else { if (cw) { tailPoint.x = tailMidpoint.x + k1; tailPoint.y = tailMidpoint.y - k1 * m1; } else { tailPoint.x = tailMidpoint.x - k1; tailPoint.y = tailMidpoint.y + k1 * m1; } } } ///////// // 1. start at outer curve tail // 2. curve to outer curve head // 3. line to head point // 4. line to inner curve head // 5. curve to inner curve tail // 6. line to tail indent. // 1, 2 context.moveTo(tailOuter.x, tailOuter.y), context.arc(0, 0, r1, a0, a1, !cw); // 3 context.lineTo(headPoint.x, headPoint.y); // 4, 5 context.arc(0, 0, r0, a1, a0, cw); // 6 context.lineTo(tailPoint.x, tailPoint.y); } context.closePath(); if (buffer) return (context = null), `${buffer}` || null; } chevronArc.centroid = function(...args) { const r = (+innerRadius.apply(this, args) + +outerRadius.apply(this, args)) / 2, a = (+startAngle.apply(this, args) + +endAngle.apply(this, args)) / 2 - Math.PI / 2, e1 = +endAngle.apply(this, args); return [Math.cos(a) * r, Math.sin(a) * r]; }; chevronArc.innerRadius = function(_) { return arguments.length ? ((innerRadius = typeof _ === "function" ? _ : constant$1(+_)), chevronArc) : innerRadius; }; chevronArc.outerRadius = function(_) { return arguments.length ? ((outerRadius = typeof _ === "function" ? _ : constant$1(+_)), chevronArc) : outerRadius; }; chevronArc.startAngle = function(_) { return arguments.length ? ((startAngle = typeof _ === "function" ? _ : constant$1(+_)), chevronArc) : startAngle; }; chevronArc.endAngle = function(_) { return arguments.length ? ((endAngle = typeof _ === "function" ? _ : constant$1(+_)), chevronArc) : endAngle; }; chevronArc.endIndent = function(_) { return arguments.length ? ((endIndent = typeof _ === "function" ? _ : constant$1(+_)), chevronArc) : endIndent; }; chevronArc.startIndent = function(_) { return arguments.length ? ((startIndent = typeof _ === "function" ? _ : constant$1(+_)), chevronArc) : startIndent; }; chevronArc.context = function(_) { return arguments.length ? ((context = _ == null ? null : _), chevronArc) : context; }; return chevronArc; }; return chevronArc; }35:[] 2e:{"title":" \nPattern Printing\n","cells":[{"id":0,"value":"md`

\nPattern Printing\n

Playing with...

\nTextures.jsLichen.js\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2249,"value":"md`## Textures.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2482,"value":"NotebookBackground = d3\n .select('body')\n .selectAll('.body-background')\n .data(['body-background'])\n .join('svg')\n .attr('class', d => d)\n .attr('height', () => d3.select('body').style('height'))\n .style('position', 'absolute')\n .style('z-index', -100)\n .style('top', 0)\n .style('left', '10px')\n .attr('width', width)\n .style('border', '3px double black')\n .call(g =>\n g\n .selectAll('rect')\n .data(['_'])\n .join('rect')\n .attr('height', () => d3.select('body').style('height'))\n .attr('width', width)\n .attr('fill', 'transparent')\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"Showcase = {\n let view = html`

\n${PatternSwatch(\n texture_circles\n )}\n${PatternSwatch(texture_paths)}\n${PatternSwatch(texture_lines)}\n

\n`;\n yield view;\n d3.select(view)\n .selectAll('.textures')\n .on('click', function() {\n let selectedTexture = d3.select(this).attr('fill');\n d3.select('.body-background')\n .select('rect')\n .attr('fill', selectedTexture)\n .attr('opacity', 0.2);\n\n d3.select(view)\n .select('.selection-display')\n // .call(selectedTexture_\n .selectAll('.selected-texture')\n .data(['_'], (d, i) => i)\n .join('rect')\n .attr('class', 'selected-texture')\n .attr('x', 0)\n .attr('y', 0)\n .attr('height', 100)\n .attr('width', width)\n .attr('fill', selectedTexture);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2252,"value":"md`## Lichen.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"viewof Grid = {\n if (View.grid != undefined) {\n let grid = new radio({ options: [\"Hex\", \"Square\"], value: 'Hex' });\n\n yield grid;\n } else {\n let view = html``;\n view.value = null;\n yield view;\n }\n \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2230,"value":"View","pinned":false,"hidden":false,"mode":"ojs"},{"id":1610,"value":"{\n if (Grid) {\n Grid === 'Hex'\n ? View.fill.hex(true).add()\n : Grid === 'Square'\n ? View.fill.hex(false).add()\n : null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"mutable scales = ({\n spacing: d3\n .scaleLinear()\n .range([0, 200])\n .domain([-5, 40]),\n radius: d3\n .scaleLinear()\n .range([0, 200])\n .domain([0, 40]),\n length: d3\n .scaleLinear()\n .range([0, 200])\n .domain([0, 40]),\n strokeWidth: d3\n .scaleLinear()\n .range([0, 200])\n .domain([0, 10]),\n width: d3\n .scaleLinear()\n .range([0, 200])\n .domain([0, 80]),\n amplitude: d3\n .scaleLinear()\n .range([0, 200])\n .domain([0, 80]),\n period: d3\n .scaleLinear()\n .range([0, 200])\n .domain([0, 200]),\n sampling: d3\n .scaleLinear()\n .range([0, 200])\n .domain([0.01, 5]),\n scale: d3\n .scaleLinear()\n .range([0, 200])\n .domain([0.1, 5]),\n fontSize: d3\n .scaleLinear()\n .range([0, 200])\n .domain([8, 32])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"mutable rotatorData = [\n { a: 120, currentA: 40, f: \"#eaeaea\", o: 0.5 },\n { a: 80, currentA: 30, f: \"#eee\", o: 0.15 },\n { a: 40, f: \"#222\", o: 0.20 },\n { a: 20, f: \"#cacaca\", o: 0.25 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2127,"value":"SelectedPattern = d3\n .select(viewof View)\n .selectAll('.pattern-name')\n .data([View], (d, i) => d.type)\n .join(\"text\")\n .attr(\"class\", \"pattern-name\")\n .attr(\"x\", width * 0.75)\n .attr(\"y\", 100)\n .attr(\"opacity\", 1e-6)\n .attr('font-size', 35)\n .attr('fill', 'blue')\n .attr('stroke', 'hotpink')\n .text(d => \"pattern.\" + d.type + \"()\")\n .transition()\n .attr(\"opacity\", 1)\n .duration(200)\n .delay(200)","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"PatternOptions = {\n // let p = mutable currentPattern;\n let svg = d3.select(viewof View);\n svg.selectAll('.options').remove();\n var options = svg\n .selectAll(\".options\")\n .data(View.options)\n .join('g')\n .attr('class', 'options')\n .attr(\"transform\", (d, i) => `translate(${width * 0.75},${i * 80 + 180})`);\n options\n .append(\"line\")\n .attr(\"x1\", 100)\n .attr(\"x2\", 100)\n .attr(\"stroke-width\", 3)\n .attr(\"stroke\", \"grey\")\n .transition()\n .delay(200)\n .attr(\"x1\", 0)\n .attr(\"x2\", 200)\n .duration(400);\n\n options\n .append(\"text\")\n .attr(\"x\", 100)\n .attr(\"y\", -20)\n .style(\"text-anchor\", \"middle\")\n .text(d => d);\n\n options\n .append(\"circle\")\n .attr(\"cy\", 0)\n .attr(\"r\", 8)\n .attr(\"cx\", d => scales[d](View.fill[d]()))\n .attr(\"opacity\", 0)\n .call(d3.drag().on(\"drag\", dragValue))\n .style(\"cursor\", \"pointer\")\n .transition()\n .duration(2000)\n .attr(\"opacity\", 1)\n .delay(250)\n .duration(300);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2448,"value":"more_patterns = [\n {\n type: \"houndsTooth\",\n fill: pattern.houndstooth(),\n options: [\"spacing\", \"scale\"],\n grid: [\"square\"]\n },\n {\n type: \"wetland\",\n fill: pattern.wetland(),\n options: [\"spacing\", \"strokeWidth\"],\n grid: [\"hex\", \"square\"]\n },\n {\n type: \"fire\",\n fill: pattern.fire(),\n options: [\"spacing\", \"strokeWidth\"],\n grid: [\"hex\", \"square\"]\n },\n {\n type: \"danger\",\n fill: pattern.danger(),\n options: [\"spacing\", \"strokeWidth\"],\n grid: [\"hex\", \"square\"]\n }\n // { type: \"checker\", fill: pattern.checker() },\n // { type: \"stripe\", fill: pattern.stripe() },\n // { type: \"plaid\", fill: pattern.plaid() },\n // {\n // type: \"stripeManager\",\n // fill: pattern.stripeManager(),\n // options: [\"spacing\", \"strokeWidth\"],\n // grid: [\"hex\", \"square\"]\n // }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"turner = TurnDial()\n .outerRadius(r + 60)\n .innerRadius(r)\n .startAngle(d => (-d.a / 180) * Math.PI)\n .endAngle(d => (d.a / 180) * Math.PI)\n .startIndent(-12)\n .endIndent(12)","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"Rotator = d3\n .select(viewof View)\n .selectAll('.drag-group')\n .data(['_'], (d, i) => i)\n .join('g')\n .attr('class', 'drag-group')\n .attr(\"transform\", `translate(${width / 3},${height / 2})`)\n .call(g =>\n g\n .selectAll(\".chevrons\")\n .data(rotatorData)\n .join(\"path\")\n .attr(\"d\", turner)\n .attr(\"class\", \"chevrons\")\n .attr(\"fill\", \"#555\")\n .attr(\"opacity\", d => d.o)\n .on(\"mouseover\", mouseover)\n .on(\"mouseout\", mouseout)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2068,"value":"d3\n .drag()\n .on(\"drag\", dragged)\n .on(\"start\", mouseover)\n .on(\"end\", mouseout)(Rotator)","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`## Interaction \n### 1. Mouse`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"function mouseout(d) {\n d3.selectAll(\".chevrons\")\n .filter(function(d) {\n return d.o < 0.2;\n })\n .transition()\n .attr(\"fill\", \"#555\")\n .attrTween(\"d\", function(d) {\n var node = this;\n var interpolate = d3.interpolate(d.currentA, d.a);\n return function(t) {\n var v = interpolate(t);\n d.currentA = v;\n return turner({ a: v });\n };\n })\n .duration(2000);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"function mouseover(d) {\n d3.selectAll(\".chevrons\")\n .filter(function(d) {\n return d.o < 0.2;\n })\n .transition()\n .attr(\"fill\", \"orange\")\n .attrTween(\"d\", function(d) {\n var node = this;\n var interpolate = d3.interpolate(d.currentA, 90);\n return function(t) {\n var v = interpolate(t);\n d.currentA = v;\n return turner({ a: v });\n };\n })\n .duration(2000);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`### 2. DRAG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"function dragValue(d) {\n var circle = d3.select(this);\n var x = d3.event.x;\n\n if (x < 0) x = 0;\n if (x > 200) x = 200;\n\n circle.attr(\"cx\", x);\n\n var f = d3.format(\".2f\");\n\n var text = d3\n .select(this.parentNode)\n .select(\"text\")\n .text(d + \"(\" + f(scales[d].invert(x)) + \")\");\n\n View.fill[d](scales[d].invert(x)).add();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"function dragged(d) {\n var x = d3.event.x;\n var y = d3.event.y;\n var r = 170;\n x = x - width / 2;\n y = y - height / 2;\n\n var a = Math.atan(y / x);\n\n var x1 = Math.cos(a) * r;\n var y1 = Math.sin(a) * r;\n\n if (a < 0) a = -a + Math.PI * 2;\n if (x < 0) (y1 = -y1), (x1 = -x1);\n\n var theta = getAngle([x1, y1], [0, 0], [100, 0]);\n\n if (y < 0) theta = 2 * Math.PI - theta;\n\n View.fill.angle((theta * 180) / Math.PI + Math.PI / 2).add();\n Rotator.attr(\n \"transform\",\n \"translate(\" + width / 3 + \",\" + height / 2 + \")rotate(\" + 90 + \")\"\n );\n\n d3.select(this).attr(\n \"transform\",\n \"translate(\" +\n width / 3 +\n \",\" +\n height / 2 +\n \")rotate(\" +\n ((theta * 180) / Math.PI + 90) +\n \")\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"md`## DATA\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"texture_circles = [\n textures.circles().fill(getColor()),\n textures\n .circles()\n .heavier()\n .fill(getColor()),\n textures\n .circles()\n .lighter()\n .fill(getColor()),\n textures\n .circles()\n .thicker()\n .fill(getColor()),\n textures\n .circles()\n .thinner()\n .fill(getColor()),\n textures\n .circles()\n .complement()\n .fill(getColor()),\n textures\n .circles()\n .size(5)\n .fill(getColor()),\n textures\n .circles()\n .radius(4)\n .fill(getColor()),\n textures\n .circles()\n .radius(4)\n .fill(\"transparent\")\n .strokeWidth(2),\n textures\n .circles()\n .radius(4)\n .fill(\"darkorange\")\n .strokeWidth(2)\n .stroke(\"firebrick\")\n .complement()\n .fill(getColor()),\n textures\n .circles()\n .size(10)\n .radius(2)\n .fill(\"firebrick\")\n .background(\"darkorange\")\n .fill(getColor())\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"texture_paths = [\n textures\n .paths()\n .d(\"hexagons\")\n .size(8)\n .strokeWidth(2)\n .fill(getColor())\n .stroke(d3.shuffle(d3.schemeTableau10)[0]),\n textures\n .paths()\n .d(\"crosses\")\n .lighter()\n .fill(getColor())\n .thicker(),\n textures\n .paths()\n .d(\"caps\")\n .lighter()\n .thicker()\n .fill(getColor())\n .stroke(\"darkorange\"),\n textures\n .paths()\n .d(\"woven\")\n .lighter()\n .fill(getColor())\n .thicker(),\n textures\n .paths()\n .d(\"waves\")\n .thicker()\n .fill(getColor())\n .stroke(\"firebrick\"),\n textures\n .paths()\n .d(\"nylon\")\n .lighter()\n .fill(getColor())\n .shapeRendering(\"crispEdges\"),\n textures\n .paths()\n .d(\"squares\")\n .fill(getColor())\n .stroke(\"darkorange\")\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2350,"value":"md`### UTILITY`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"PatternSwatch = arr => {\n let view = DOM.svg(width, 100);\n let svg = d3.select(view);\n let data = arr;\n data.forEach(x => svg.call(x));\n\n svg\n .selectAll('.textures')\n .data(data, (d, i) => i)\n .join('rect')\n .attr('x', (d, i) => (width / data.length) * i)\n .attr('y', 0)\n .attr('height', 100)\n .attr('width', width / data.length)\n .attr('stroke', 'white')\n .attr('fill', d => d.url())\n .attr(\"class\", \"textures\");\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"function getAngle(A, B, C) {\n var AB = Math.sqrt(Math.pow(B[0] - A[0], 2) + Math.pow(B[1] - A[1], 2));\n var BC = Math.sqrt(Math.pow(B[0] - C[0], 2) + Math.pow(B[1] - C[1], 2));\n var AC = Math.sqrt(Math.pow(C[0] - A[0], 2) + Math.pow(C[1] - A[1], 2));\n return Math.acos((BC * BC + AB * AB - AC * AC) / (2 * BC * AB));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"function tweenArc(a) {\n return function(d) {\n var interpolate = d3.interpolate(d.a, Math.PI / 2);\n return function(t) {\n var dd = {};\n dd.a = interpolate(t);\n return turner(dd);\n };\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`## SETUP `","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"r = width / 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"margin = ({top: 50, right: 50, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2540,"value":"html`${LV_star}, ${LV}, ${LV_flower}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2543,"value":"d3.select(LV_star).html()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2533,"value":"import { LV_star, LV, LV_flower } from '@stroked/lv-branding'","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2409,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"import { radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2112,"value":"getColor = () =>\n turboColorScheme[Math.floor(Math.random() * turboColorScheme.length)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2110,"value":"import { turboColorScheme } from '@stroked/how-to-slice-a-sphere'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"textures = require('textures')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}