24:null 25:["$","title",null,{"children":"Quilting with d3-curve | Ananya Roy | Observable"}] 2a:T763,{ animate; const svg = d3 .create("svg") .attr("width", width / 2 + 10) .attr("height", width / 2); const group = svg.append("g"); const defs = svg.append("defs"); addShadow(defs, "stitchShadow", (0.0015 * width) / 2); addShadow(defs, "blockShadow", (0.0125 * width) / 2); group .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', width / 2) .attr('height', width / 2) .attr('stroke', 'none') .attr('fill', 'white') .style('filter', 'url(#blockShadow)'); for (let i = 0; i < 4; i++) { group .append('rect') .attr('x', (i * width) / 2 / 4) .attr('y', 0) .attr('width', width / 8) .attr('height', width / 2) .attr('stroke', 'none') .attr('fill', '#30D5C8'); } group .append("clipPath") .attr("id", "blockClip") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width / 2) .attr("height", width / 2); //Draw and animate Ribbon Candy const dataRC = getRibbonCandy(width / 2, 0); addStitches(group, dataRC, width / 2, "#FF2768", "stitchShadow"); animateStitches(group, dataRC, "#30D5C8", width / 2, 4000, 0); //Draw and animate Swirl const dataSW = getSwirl2(width / 2, width / 8 - width / 80); addStitches(group, dataSW, width / 2, "#008B80", "stitchShadow"); animateStitches(group, dataSW, "#30D5C8", width / 2, 8000, 4000); //Draw and animate Serpentine Line const dataSL = getSerpentineLine(width / 2, (2 * width) / 2 / 4); addStitches(group, dataSL, width / 2, "#D76F88", "stitchShadow"); animateStitches(group, dataSL, "#30D5C8", width / 2, 4000, 12000); //Draw and animate Petals const dataPT = getPetals(width / 2, (3 * width) / 2 / 4); addStitches(group, dataPT, width / 2, "#5D6C89", "stitchShadow"); animateStitches(group, dataPT, "#30D5C8", width / 2, 8000, 16000); return svg.node(); }2b:T54c,function drawQuilt() { replay; const svg = d3.create("svg").attr("viewBox", [0, 0, width, width]); const binding = 0.006 * width; const quiltWidth = width - 10 - 2 * binding; //leave room for the shadow and binding const defs = svg.append("defs"); addShadow(defs, "quiltShadow", 0.005 * width); svg .append('rect') .attr('x', 5) //room for shadow .attr('y', 5) //room for shadow .attr('width', quiltWidth + 2 * binding) .attr('height', quiltWidth + 2 * binding) .attr('stroke', 'none') .attr('fill', '#fb8072') .style('filter', 'url(#quiltShadow)'); var dx, dy, rot, index; const blockSize = quiltWidth / 4; var groups = []; for (let row = 0; row < 4; row++) { for (let column = 0; column < 4; column++) { dx = column * blockSize + binding + 5; dy = row * blockSize + binding + 5; rot = ((row + column) % 2) * 90; index = row * 4 + column; groups[index] = svg.append("g"); getBlock(blockSize, groups[index], dx, dy, rot); groups[index] .append("clipPath") .attr("id", "clipBlock" + index) .append("rect") .attr("x", dx) .attr("y", dy) .attr("width", blockSize) .attr("height", blockSize); groups[index].attr("clip-path", "url(#clipBlock" + index + ")"); } } return svg.node(); }2c:T4c8,function getBlock(h, svg, dx, dy, rot) { const group = svg.append("g"); const defs = group.append("defs"); addShadow(defs, "stitchShadow", 0.004 * h); const blockColors = colorSelect(colors); for (let i = 0; i < 4; i++) { group .append('rect') .attr('x', (i * h) / 4) .attr('y', 0) .attr('width', h / 4) .attr('height', h) .attr('stroke', 'none') .attr('fill', blockColors[i]); } //Draw Ribbon Candy const dataRC = getRibbonCandy(h, 0); addStitches(group, dataRC, h, getMatchColor(blockColors[0]), "stitchShadow"); //Draw Swirl const dataSW = getSwirl2(h, h / 4 - h / 40); addStitches(group, dataSW, h, getMatchColor(blockColors[1]), "stitchShadow"); //Draw Serperntine Line const dataSL = getSerpentineLine(h, (2 * h) / 4); addStitches(group, dataSL, h, getMatchColor(blockColors[2]), "stitchShadow"); //Draw Petals const dataPT = getPetals(h, (3 * h) / 4); addStitches(group, dataPT, h, getMatchColor(blockColors[3]), "stitchShadow"); group.attr( "transform", "translate(" + dx + " " + dy + ")rotate(" + rot + " " + h / 2 + " " + h / 2 + ")" ); return svg; }2d:T4cb,function getSwirl2(ht, xOffset) { const r1 = ht / 8; const del1 = r1 / Math.sqrt(2); const r2 = ht / 16; const del2 = r2 / Math.sqrt(2); const del3 = r1 * Math.cos((22 * Math.PI) / 180); const del4 = r1 * Math.sin((22 * Math.PI) / 180); const num = ht / (2 * r1); // + 1; var swirlTile = [ { x: r1, y: 0 }, { x: 0, y: r1 }, { x: r1, y: 2 * r1 }, { x: 2 * r1, y: r1 }, { x: r1 + del1, y: r1 - del1 }, { x: r1, y: r1 }, { x: r1 + del2, y: r1 - del2 }, { x: r1 + r2, y: r1 }, { x: r1, y: r1 + r2 }, { x: r1 - r2, y: r1 }, { x: r1 + del4, y: r1 - del3 }, { x: 2.3 * r1, y: r1 }, { x: r1, y: 2 * r1 } //repeat first point ]; var swirlData = []; var tile = []; for (let i = 0; i < num; i++) { tile = swirlTile.map(d => { return { x: d.x + xOffset, y: i * 2 * r1 + d.y }; }); swirlData = swirlData.concat(tile); } const line = d3 .line() //.curve(d3.curveCatmullRom.alpha(0.01)) .curve(d3.curveBasis) //.curve(d3.curveBundle.beta(1)) //.curve(d3.curveNatural) //.curve(d3.curveCardinal) //.curve(d3.curveLinear) .x(swirlData => swirlData.x) .y(swirlData => swirlData.y); return [swirlData, line]; }2e:T51b,function getPetals(ht, xOffset) { const r = ht / 16; const r2 = ht / 32; const delta = r2 / Math.sqrt(2); const num = ht / (4 * r); // + 1; var petalTile = [ { x: 2 * r, y: 0 }, { x: 2 * r, y: 2 * r }, { x: 3 * r - delta, y: 3 * r + delta }, { x: 4 * r, y: 4 * r }, { x: 3 * r + delta, y: 3 * r - delta }, { x: 2 * r, y: 2 * r }, { x: r + delta, y: 3 * r + delta }, { x: 0, y: 4 * r }, { x: r - delta, y: 3 * r - delta }, { x: 2 * r, y: 2 * r }, { x: r - delta, y: r + delta }, { x: 0, y: 0 }, { x: r + delta, y: r - delta }, { x: 2 * r, y: 2 * r }, { x: 3 * r + delta, y: r + delta }, { x: 4 * r, y: 0 }, { x: 3 * r - delta, y: r - delta }, { x: 2 * r, y: 2 * r }, { x: 2 * r, y: 4 * r } ]; var petalData = []; var tile = []; for (let i = 0; i < num; i++) { tile = petalTile.map(d => { return { x: d.x + xOffset, y: i * 4 * r + d.y }; }); petalData = petalData.concat(tile); } const line = d3 .line() //.curve(d3.curveCatmullRom.alpha(0.5)) //.curve(d3.curveBasis) //.curve(d3.curveBundle) //.curve(d3.curveNatural) .curve(d3.curveCardinal) //.curve(d3.curveLinear) .x(petalData => petalData.x) .y(petalData => petalData.y); return [petalData, line]; }2f:T620,function getSwirl(ht, xOffset) { const r1 = ht / 16; const del1 = r1 / Math.sqrt(2); const r2 = ht / 32; const del2 = r2 / Math.sqrt(2); const del3 = r1 * Math.cos((22 * Math.PI) / 180); const del4 = r1 * Math.sin((22 * Math.PI) / 180); const num = ht / (2 * r1) + 1; var swirlTile = [ { x: r1, y: 0 }, { x: 0, y: r1 }, { x: r1, y: 2 * r1 }, { x: 2 * r1, y: r1 }, { x: r1 + del1, y: r1 - del1 }, { x: r1, y: r1 }, { x: r1 + del2, y: r1 - del2 }, { x: r1 + r2, y: r1 }, { x: r1, y: r1 + r2 }, { x: r1 - r2, y: r1 }, { x: r1 + del4, y: r1 - del3 }, { x: 3 * r1, y: r1 }, { x: 4 * r1, y: 2 * r1 }, { x: 3 * r1, y: 3 * r1 }, { x: 2 * r1, y: 2 * r1 }, { x: 3 * r1 - del1, y: 2 * r1 - del1 }, { x: 3 * r1, y: 2 * r1 }, { x: 3 * r1 - del2, y: 2 * r1 - del2 }, { x: 3 * r1 - r2, y: 2 * r1 }, { x: 3 * r1, y: 2 * r1 + r2 }, { x: 3 * r1 + r2, y: 2 * r1 }, { x: 3 * r1 - del4, y: 2 * r1 - del3 } //{ x: 3 * r1, y: 2 * r1 - r2 } ]; var swirlData = []; var tile = []; for (let i = 0; i < num; i++) { tile = swirlTile.map(d => { return { x: d.x + xOffset, y: i * 2 * r1 + d.y }; }); swirlData = swirlData.concat(tile); } const line = d3 .line() //.curve(d3.curveCatmullRom.alpha(0.01)) .curve(d3.curveBasis) //.curve(d3.curveBundle.beta(1)) //.curve(d3.curveNatural) //.curve(d3.curveCardinal) //.curve(d3.curveLinear) .x(swirlData => swirlData.x) .y(swirlData => swirlData.y); return [swirlData, line]; }30:[] 28:{"id":"4e3c9ac4e2710c23","slug":"quilting-with-d3-curve","title":"Quilting with d3-curve","thumbnail":"e73386fef2ce6e2933c1f24b2a83488b416b1bee7de920ee111c44c455fc07ec","access_level":"public","create_time":"$D2021-02-21T19:35:17.539Z","update_time":"$D2021-06-25T19:42:09.674Z","view_time":null,"first_public_time":"$D2021-03-02T05:41:21.429Z","fork":false,"stars":45,"starred":false,"owner":{"type":"team","id":"028bf878139e3cf1","login":"ananya-roy","name":"Ananya Roy","avatar_url":"https://avatars-next.observableusercontent.com/f11dd31a7d2798682e8b51344a87ccbbc7a0154feb96832e5919ab3dc7b52e05","tier":"starter_2024"},"version":896,"publish_version":896,"role":null,"authored":false,"authors":[{"type":"individual","id":"d329fd66efb83867","login":"ananya-roy","name":"Ananya Roy","avatar_url":"https://avatars-next.observableusercontent.com/f11dd31a7d2798682e8b51344a87ccbbc7a0154feb96832e5919ab3dc7b52e05","tier":null}],"members":[{"type":"individual","id":"d329fd66efb83867","login":"ananya-roy","name":"Ananya Roy","avatar_url":"https://avatars-next.observableusercontent.com/f11dd31a7d2798682e8b51344a87ccbbc7a0154feb96832e5919ab3dc7b52e05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"6ad523ac4dcb4b45","slug":"instagram-shares","title":"Observable's Instagram Shares","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Quilting with d3-curve","cells":[{"id":0,"value":"md`# Quilting with d3-curve`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"md`I'm a fan of Angela Walters' [Midnight Quilt Show](https://www.youtube.com/channel/UCLjp-yIkiW1qAM-OX4StCCg). There is something satisfying about watching her start with scraps of fabric and build a beautiful quilt, all while her kids are asleep. The best part is watching her stitch all 3 layers of the quilt together on her machine while making lovely meandering patterns with her stitches. I had some fun drawing these using d3-line and d3-curve.

Here are four of her easier patterns: Ribbon Candy, Swirl, Serpentine Lines and Petals. Scroll down to see a whole quilt come together with blocks like these!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"viewof animate = Button(\"Animate Stitching\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"md` Here is a rendering of her [Scrappy Stash Buster Quilt](https://youtu.be/vRzlqfUAKfA?t=558) made using these stitching patterns and some virtual 2.5 inch strips of fabric. If only I could curl up with this on the couch...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"viewof replay = Button(\"Change Colors\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"drawQuilt()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"function animateStitches(svg, data, hideColor, blockWidth, duration, delay) {\n var path = svg\n .append(\"path\")\n .datum(data[0])\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", hideColor)\n .attr(\"stroke-width\", 0.01 * blockWidth)\n .attr(\"d\", data[1]);\n\n var length = path.node().getTotalLength();\n\n path\n .attr(\"stroke-dasharray\", length + \",\" + length)\n .attr(\"stroke-dashoffset\", 2 * length)\n .transition()\n .ease(d3.easeLinear)\n .duration(duration)\n .delay(delay)\n .attr(\"stroke-dashoffset\", length);\n\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"function addShadow(defs, id, stddev) {\n // From Nadieh Bremer's notebook https://observablehq.com/@nbremer/drop-shadow-svg-filter\n const filter = defs.append(\"filter\").attr(\"id\", id);\n filter\n .append(\"feColorMatrix\")\n .attr(\"type\", \"matrix\")\n .attr(\"values\", `0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0`);\n filter\n .append(\"feGaussianBlur\")\n .attr(\"stdDeviation\", stddev)\n .attr(\"result\", \"coloredBlur\");\n\n const feMerge1 = filter.append(\"feMerge\");\n feMerge1.append(\"feMergeNode\").attr(\"in\", \"coloredBlur\");\n feMerge1.append(\"feMergeNode\").attr(\"in\", \"SourceGraphic\");\n\n return filter;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"function addStitches(svgGrp, data, blockWidth, threadColor, stitchShadow) {\n const stitchLength = 0.02 * blockWidth;\n const thread = 0.005 * blockWidth;\n return svgGrp\n .append(\"path\")\n .datum(data[0])\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", threadColor)\n .attr(\"stroke-width\", thread)\n .attr(\"d\", data[1])\n .attr(\"stroke-dasharray\", stitchLength + \",\" + stitchLength)\n .style(\"filter\", \"url(#\" + stitchShadow + \")\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"function getRibbonCandy(ht, xOffset) {\n const r = ht / 16;\n const num = ht / (2 * r); //+ 1;\n var ribbonCandyTile = [\n { x: 0, y: 0 },\n { x: r, y: r },\n { x: 3 * r, y: 0 },\n { x: 4 * r, y: r },\n { x: 3 * r, y: 2 * r },\n { x: r, y: r },\n { x: 0, y: 2 * r }\n ];\n var ribbonCandyData = [];\n var tile = [];\n for (let i = 0; i < num; i++) {\n tile = ribbonCandyTile.map(d => {\n return { x: d.x + xOffset, y: i * 2 * r + d.y };\n });\n ribbonCandyData = ribbonCandyData.concat(tile);\n }\n const line = d3\n .line()\n //.curve(d3.curveCatmullRom.alpha(0.01))\n //.curve(d3.curveBasis)\n //.curve(d3.curveBundle)\n .curve(d3.curveNatural)\n //.curve(d3.curveCardinal)\n //.curve(d3.curveLinear)\n .x(ribbonCandyData => ribbonCandyData.x)\n .y(ribbonCandyData => ribbonCandyData.y);\n return [ribbonCandyData, line];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"function getSerpentineLine(ht, xOffset) {\n const r = ht / 32;\n const num = ht / (4 * r);\n var serpentineLineTile = [\n { x: 0, y: 0 },\n { x: r, y: r },\n { x: 7 * r, y: 2 * r },\n { x: 8 * r, y: 3 * r },\n { x: 8 * r, y: 5 * r },\n { x: 7 * r, y: 4 * r },\n { x: r, y: 3 * r },\n { x: 0, y: 2 * r },\n { x: 0, y: 4 * r }\n ];\n var serpentineLineData = [];\n var tile = [];\n for (let i = 0; i < num; i++) {\n tile = serpentineLineTile.map(d => {\n return { x: d.x + xOffset, y: i * 4 * r + d.y };\n });\n serpentineLineData = serpentineLineData.concat(tile);\n }\n const line = d3\n .line()\n //.curve(d3.curveCatmullRom.alpha(0.5))\n //.curve(d3.curveBasis)\n //.curve(d3.curveBundle)\n //.curve(d3.curveNatural)\n .curve(d3.curveCardinal)\n //.curve(d3.curveLinear)\n .x(serpentineLineData => serpentineLineData.x)\n .y(serpentineLineData => serpentineLineData.y);\n return [serpentineLineData, line];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"colors = d3[`scheme${\"Set3\"}`]\n .concat(d3[`scheme${\"Set2\"}`])\n .concat(d3[`scheme${\"Set1\"}`])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"function getCompColor(hex) {\n const hsl0 = d3.hsl(hex);\n var hComp;\n hsl0.h > 180 ? (hComp = 180 - hsl0.h) : (hComp = 180 + hsl0.h);\n return d3.hsl(hComp, hsl0.s, hsl0.l).hex();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"function getMatchColor(hex) {\n const hsl0 = d3.hsl(hex);\n // var hComp;\n //hsl0.h > 180 ? (hComp = 180 - hsl0.h) : (hComp = 180 + hsl0.h);\n return d3.hsl(hsl0.h, hsl0.s, hsl0.l - 0.15).hex();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"function colorSelect(col) {\n //Return 4 random and unique colors from the palette\n const arr = d3.shuffle(d3.range(col.length));\n const arrCut = arr.slice(0, 4);\n return arrCut.map(i => col[i]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"import {Button} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 29:"$28:body"