29:null 2a:["$","title",null,{"children":"Halftone Gradient Banners | Lauren Nishizaki | Observable"}] 2f: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() }30:[] 2d:{"id":"3028b1c9b0ad9439","slug":"halftone-gradient-banners","title":"Halftone Gradient Banners","thumbnail":"22a421918ad57b17a79aff42d87356e42d4f12d0a1c6ceb1433bf876439e7735","access_level":"public","create_time":"$D2019-04-06T23:52:45.578Z","update_time":"$D2019-04-07T02:20:06.439Z","view_time":null,"first_public_time":"$D2019-04-07T02:22:05.096Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"256a9410144c43cb","login":"lemonnish","name":"Lauren Nishizaki","avatar_url":"https://avatars-next.observableusercontent.com/428c5ebc526524a55b9ff3af186d0405b364c8bc8e8c40e7f09db77da9371b40","tier":"starter_2024"},"version":414,"publish_version":414,"role":null,"authored":false,"authors":[{"type":"individual","id":"a58b7acc21a44633","login":"lemonnish","name":"Lauren Nishizaki","avatar_url":"https://avatars-next.observableusercontent.com/428c5ebc526524a55b9ff3af186d0405b364c8bc8e8c40e7f09db77da9371b40","tier":null}],"members":[{"type":"individual","id":"a58b7acc21a44633","login":"lemonnish","name":"Lauren Nishizaki","avatar_url":"https://avatars-next.observableusercontent.com/428c5ebc526524a55b9ff3af186d0405b364c8bc8e8c40e7f09db77da9371b40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"md`---\n## Edit banners\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof startColor = color({\n value: \"#ffe813\",\n title: \"Left-most color (background)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof endColor = color({\n value: \"#e34702\",\n title: \"Right-most color (dots)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"desiredWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"desiredHeight = 160","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"bannerWidth = Math.floor(desiredWidth / dotSpacing) * dotSpacing","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"bannerHeight = Math.floor(desiredHeight / dotSpacing) * dotSpacing","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"numCols = Math.floor(bannerWidth/dotSpacing)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"numRows = Math.floor(bannerHeight/dotSpacing)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"getR = d3.scaleLinear()\n .domain([0, numCols-1])\n .range([0, dotSpacing/Math.sqrt(2)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"getX = i => i * dotSpacing + dotSpacing/2//margin.horiz","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"getY = i => i * dotSpacing + dotSpacing/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"import {slider, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"