30:T6e8,sketch = { const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`); let g = svg.append("g") .attr("transform", `translate(${width/2} ${height/2})`) //w, h, thick, repeat, arrows, offset const dat0 = starburst2(100, 50, 40, 20, 40, 400, 0, "#E0D5B1", "#FFCF40"); const dat1 = starburst(90, 50, 40, 20, 35, 300, 0.1); const dat2 = starburst(80, 50, 40, 20, 30, 200, 0.3); const dat3 = starburst(60, 40, 30, 15, 25, 150, 0.5); const dat4 = starburst(55, 40, 30, 15, 20, 125, 0.7); const dat5 = starburst(50, 40, 30, 15, 15, 100, 0.9); const dat6 = starburst(45, 30, 28, 12, 25, 75, 0); const dat7 = starburst(40, 30, 28, 12, 20, 50, 0.2); const dat8 = starburst(35, 30, 28, 12, 15, 25, 0.4); const dat9 = starburst(30, 20, 20, 10, 30, 25, 0.1); const dat10 = starburst(25, 20, 20, 10, 25, 10, 0.3); const dat11 = starburst(20, 20, 20, 10, 20, 5, 0.6); const dat12 = starburst(30, 20, 15, 6, 20, 10, 0.1); const dat13 = starburst(25, 20, 15, 6, 20, 5, 0.3); const dat14 = starburst(20, 20, 15, 6, 20, -5, 0.6); drawArrow(dat0, g, "#10628E", "white"); drawArrow(dat1, g, "#10628E", "white"); drawArrow(dat2, g, "#10628E", "white"); drawArrow(dat3, g, "#10628E", "white"); drawArrow(dat4, g, "#10628E", "white"); drawArrow(dat5, g, "#10628E", "white"); drawArrow(dat6, g, "#10628E", "white"); drawArrow(dat7, g, "#10628E", "white"); drawArrow(dat8, g, "#10628E", "white"); drawArrow(dat9, g, "#10628E", "white"); drawArrow(dat10, g, "#10628E", "white"); drawArrow(dat11, g, "#10628E", "white"); drawArrow(dat12, g, "#10628E", "white"); drawArrow(dat13, g, "#10628E", "white"); drawArrow(dat14, g, "#10628E", "white"); g.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 20) .attr("fill", "black"); return svg.node() }31:T4ae,function starburst(w, h, thick, rep, arrows, bump, offset) { let finalArray = []; for(let i = 0; i < arrows; i++) { let chev1array = []; let yOffset = 0; let iY = 0; const angle = ((i / (arrows / 2)) * Math.PI) + offset; for(iY = 0; iY < rep; iY++){ yOffset = (thick * iY) + bump; chev1array.push([{"x": w / 2, "y": 0 - yOffset - thick}, {"x": w, "y": h - thick - yOffset}, {"x": w, "y": h - yOffset}, {"x": w / 2, "y": 0 - yOffset}, {"x": 0, "y": h - yOffset}, {"x": 0, "y": h - thick - yOffset} ]); }; const rotato = chev1array.map(d => d.map(function(pt){ const newx = (pt.x - w / 2) * Math.cos(angle) - (pt.y - w / 2) * Math.sin(angle); const newy = (pt.y - w / 2) * Math.cos(angle) + (pt.x - w / 2) * Math.sin(angle); //const col = randColors.sample(1); return {"x": newx, "y": newy}; })); finalArray.push(rotato); }; const lines = finalArray.flat(1); //return finalArray.flat(1); for(let i = 0; i < lines.length; i++) { lines[i].color = test_samp[i]; } return lines; }32:T4d6,function starburst2(w, h, thick, rep, arrows, bump, offset, col1, col2) { let finalArray = []; for(let i = 0; i < arrows; i++) { let chev1array = []; let yOffset = 0; let iY = 0; const angle = ((i / (arrows / 2)) * Math.PI) + offset; for(iY = 0; iY < rep; iY++){ yOffset = (thick * iY) + bump; chev1array.push([{"x": w / 2, "y": 0 - yOffset - thick}, {"x": w, "y": h - thick - yOffset}, {"x": w, "y": h - yOffset}, {"x": w / 2, "y": 0 - yOffset}, {"x": 0, "y": h - yOffset}, {"x": 0, "y": h - thick - yOffset} ]); }; const rotato = chev1array.map(d => d.map(function(pt){ const newx = (pt.x - w / 2) * Math.cos(angle) - (pt.y - w / 2) * Math.sin(angle); const newy = (pt.y - w / 2) * Math.cos(angle) + (pt.x - w / 2) * Math.sin(angle); return {"x": newx, "y": newy}; })); finalArray.push(rotato); }; const lines = finalArray.flat(1); for(let i = 0; i < lines.length; i++) { if(i % 2 == 0) { lines[i].color = col1; } else { lines[i].color = col2; } //lines[i].color = test_samp[i]; } return lines; }33:T417,chev3array = { let finalArray = []; for(let i = 0; i < numArrows; i++) { let chev1array = []; let yOffset = 0; let iY = 0; const angle = (i / (numArrows / 2)) * Math.PI; for(iY = 0; iY < repeat; iY++){ yOffset = (thickness * iY) + start; chev1array.push([{"x": chevWidth / 2, "y": 0 - yOffset - thickness}, {"x": chevWidth, "y": chevHeight - thickness - yOffset}, {"x": chevWidth, "y": chevHeight - yOffset}, {"x": chevWidth / 2, "y": 0 - yOffset}, {"x": 0, "y": chevHeight - yOffset}, {"x": 0, "y": chevHeight - thickness - yOffset} ]); }; const rotato = chev1array.map(d => d.map(function(pt){ const newx = (pt.x - chevWidth / 2) * Math.cos(angle) - (pt.y - chevWidth / 2) * Math.sin(angle); const newy = (pt.y - chevWidth / 2) * Math.cos(angle) + (pt.x - chevWidth / 2) * Math.sin(angle); return {"x": newx, "y": newy}; })); finalArray.push(rotato); }; return finalArray.flat(1); }34:[] 2e:{"title":"Chevrons","cells":[{"id":0,"value":"md`# Chevrons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Testing params`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof thickness = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 20,\n description: \"Thickness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof chevWidth = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 20,\n description: \"Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof chevHeight = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 20,\n description: \"Height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof repeat = slider({\n min: 1, \n max: 50, \n step: 1, \n value: 8,\n description: \"Repeat\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"viewof numArrows = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 0,\n description: \"Number of arrows\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof start = slider({\n min: 0, \n max: 500, \n step: 10, \n value: 0,\n description: \"Start\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`## Sketch`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"dat0 = starburst(100, 50, 40, 20, 40, 400, 0);","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"{\nfor(let i = 0; i < dat0.length; i++) {\n dat0[i].color = test_samp[i]\n}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"test_samp = randColors.sample(2000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"{\nconst test = dat0.map(d => d.map(d => d.color));\nreturn test\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"line = d3.line()\n .x(d => d.x)\n .y(d => d.y);","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"function drawArrow(data, el, fill, stroke) {\n el.selectAll(\"path.data\")\n .data(data)\n .enter()\n .append(\"path\")\n .attr(\"fill\", d => d.color) //d => d.map(col => col.color)[1]\n .attr(\"stroke\", stroke)\n .attr(\"d\", function(d){ return line(d) + \"Z\"});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"Array.prototype.sample = function(n){\n const samples = [];\n for(let i = 0; i < n; i++) {\n const sample = this[Math.floor(Math.random()*this.length)];\n samples.push(sample);\n }\n return samples\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"test2 = starburst2(100, 50, 40, 20, 40, 400, 0, \"#E0D5B1\", \"#FFCF40\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"{\nvar chev1array = [];\nvar yOffset = 0;\nvar iY = 0;\nfor(iY = 0; iY < repeat; iY++){\n yOffset = thickness * iY;\n chev1array.push([{\"x\": 0, \"y\": chevHeight + yOffset}, \n {\"x\": 0, \"y\": chevHeight - thickness + yOffset}, \n {\"x\": chevWidth/2, \"y\": 0 + yOffset},\n {\"x\": chevWidth, \"y\": chevHeight - thickness + yOffset},\n {\"x\": chevWidth, \"y\": chevHeight + yOffset},\n {\"x\": chevWidth/2, \"y\": thickness + yOffset}]);\n};\n return chev1array\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"chev2array = \n{\nvar chev1array = [];\nvar yOffset = 0;\nvar iY = 0;\nfor(iY = 0; iY < repeat; iY++){\n yOffset = thickness * iY;\n chev1array.push([{\"x\": 0, \"y\": chevHeight + yOffset}, \n {\"x\": 0, \"y\": chevHeight - thickness + yOffset}, \n {\"x\": chevWidth/2, \"y\": 0 + yOffset - thickness},\n {\"x\": chevWidth, \"y\": chevHeight - thickness + yOffset},\n {\"x\": chevWidth, \"y\": chevHeight + yOffset},\n {\"x\": chevWidth/2, \"y\": yOffset}]);\n};\n return chev1array\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"rotato = chev3array.map(d => d.map(function(pt){\n const newx = pt.x*Math.cos(3.14) - pt.y*Math.sin(3.14);\n const newy = pt.y*Math.cos(3.14) + pt.x*Math.sin(3.14);\n \n return {\"x\": newx, \"y\": newy}\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"angles = \n{\nlet angles = [];\n \nfor(let i = 0; i < numArrows; i++) {\n const angle = (i / (numArrows/2)) * Math.PI;\n angles.push(angle);\n}\nreturn angles\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"randColors = [\"#FFCF40\", \"#E899C8\", \"#47C2C9\", \"#2B3B77\", \"#D80C59\", \"#FFFFF0\", \"#ffeadb\", ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"neutrals = [\"#FFFFF0\", \"#ffeadb\", \"#E0D5B1\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"vibrants = [\"#FFCF40\", \"#E899C8\", \"#47C2C9\", \"#2B3B77\", \"#D80C59\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"width = 1050","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"height = 1500","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { slider} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}