31:T446,{ // create svg const svg = d3.select(DOM.svg(bannerWidth, desiredHeight)) // define 1 generic row let rowID const row = svg.append("defs").append("g") .attr("id", (rowID = DOM.uid("row")).id) for (let i = 0; i < numCols; i++) { row.append("circle") .attr("cx", getX(i)) .attr("cy", 0) .attr("r", getR(i)) } // background svg.append("rect") .attr("width", bannerWidth) .attr("height", bannerHeight) .attr("fill", startColor) // overlay dots const dotLayer = svg.append("g") .attr("fill", endColor) for (let j = 0; j < numRows; j++) { dotLayer.append("use") .attr("href", rowID.href) // sufficient for most browsers .attr("xlink:href", rowID.href) // added for Safari compatibility .attr("transform", `translate(0, ${getY(j)})`) } // hide overflow content, b/c sometimes bannerHeight !== desiredHeight svg.append("rect") .attr("width", bannerWidth) .attr("height", desiredHeight - bannerHeight) .attr("y", bannerHeight) .attr("fill", "white") return svg.node() }32:[] 2f:{"title":"Halftone Gradient Banners","cells":[{"id":0,"value":"md`# Halftone Gradient Banners\n\nI implemented these banners in both SVG and canvas and explored one possible SVG optimization.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## SVG\n\nThis naive implementation loops through every row and column, and draws a circle at the row/column intersection.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"{\n // create svg\n const svg = d3.select(DOM.svg(bannerWidth, desiredHeight))\n \n // background\n svg.append(\"rect\")\n .attr(\"width\", bannerWidth)\n .attr(\"height\", bannerHeight)\n .attr(\"fill\", startColor)\n \n // overlay dots\n const dotLayer = svg.append(\"g\")\n .attr(\"fill\", endColor)\n for (let i = 0; i < numCols; i++) {\n for (let j = 0; j < numRows; j++) {\n dotLayer.append(\"circle\")\n .attr(\"cx\", getX(i))\n .attr(\"cy\", getY(j))\n .attr(\"r\", getR(i))\n }\n }\n \n // hide overflow content, b/c sometimes bannerHeight !== desiredHeight\n svg.append(\"rect\")\n .attr(\"width\", bannerWidth)\n .attr(\"height\", desiredHeight - bannerHeight)\n .attr(\"y\", bannerHeight)\n .attr(\"fill\", \"white\")\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md`\nHowever, a slightly different implementation takes advantage of the fact that every row is identical. In the example below, I define a generic row within the svg [<defs>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) tag, then [link to that row](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use) within the body of the svg (and transform the linked element to the correct y-axis value). This has the benefit of shrinking the svg file size.\n\nNote that the <use> tag sets 2 attributes: href=#id and xlink:href=#id. The first attribute, href, works for most browsers, but is not yet supported in Safari (neither desktop nor iOS). Although using xlink:href is no longer recommended, it is required for cross-browser compatibility. (Reference: [MDN chart of browser compatibility](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use#Browser_compatibility))\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`## Canvas\n\nFor this implementation, I loop over all rows and columns, drawing a circle at each row/column intersection.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"{\n let context = DOM.context2d(bannerWidth, desiredHeight)\n \n // background\n context.fillStyle = startColor;\n context.fillRect(0, 0, bannerWidth, bannerHeight);\n \n // draw dots\n context.fillStyle = endColor;\n for (let i = 0; i < numCols; i++) {\n for (let j = 0; j < numRows; j++) {\n context.beginPath();\n context.ellipse(getX(i), getY(j), getR(i), getR(i), 0, 0, Math.PI * 2);\n context.fill();\n }\n }\n \n // hide overflow content, b/c sometimes bannerHeight !== desiredHeight\n context.clearRect(0, bannerHeight, bannerWidth, desiredHeight-bannerHeight)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`---\n## Edit banners\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof startColor = color({\n value: \"#ffe813\",\n title: \"Left-most color (background)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof endColor = color({\n value: \"#e34702\",\n title: \"Right-most color (dots)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof dotSpacing = slider({\n min: 5, \n max: 50, \n step: 5, \n value: 15, \n title: \"Dot size (in pixels)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"desiredWidth = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"desiredHeight = 160","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`---\n## Functions / calculated values\n\nNote that banner dimensions are calculated from the largest integer number of dots that will fit within the desired width/height – actual dimensions are sometimes smaller than desired dimensions.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"bannerWidth = Math.floor(desiredWidth / dotSpacing) * dotSpacing","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"bannerHeight = Math.floor(desiredHeight / dotSpacing) * dotSpacing","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"numCols = Math.floor(bannerWidth/dotSpacing)","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"numRows = Math.floor(bannerHeight/dotSpacing)","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"getR = d3.scaleLinear()\n .domain([0, numCols-1])\n .range([0, dotSpacing/Math.sqrt(2)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"getX = i => i * dotSpacing + dotSpacing/2//margin.horiz","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"getY = i => i * dotSpacing + dotSpacing/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"import {slider, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}