3e:null 3f:["$","title",null,{"children":"Halftone Gradient Banners | Martin | Observable"}] 45: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() }46:[] 43:{"id":"c8e902112ddffd86","slug":null,"title":"Halftone Gradient Banners","thumbnail":"ba6077c2f8bdf1185a785ba868f39a447dc8c779cd21a85ca474e35d38620d60","access_level":"public","create_time":"$D2023-05-13T05:35:32.970Z","update_time":"$D2023-05-13T05:35:32.970Z","view_time":null,"first_public_time":"$D2023-05-13T05:35:32.970Z","has_unpublished_edits":null,"fork":{"id":"3028b1c9b0ad9439","slug":"halftone-gradient-banners","title":"Halftone Gradient Banners","owner":{"id":"256a9410144c43cb","login":"lemonnish","name":"Lauren Nishizaki"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ce342a7a917c7120","login":"mroberts","name":"Martin ","avatar_url":"https://avatars-next.observableusercontent.com/e9c58f00a976732c857e1dd248518bfde297cbad3eb01432c6a4e1db8bcd5138","tier":"starter_2024","bio":"","following":false},"version":414,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"35ded0d031bb444e","login":"mroberts","name":"Martin ","avatar_url":"https://avatars-next.observableusercontent.com/e9c58f00a976732c857e1dd248518bfde297cbad3eb01432c6a4e1db8bcd5138","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"35ded0d031bb444e","login":"mroberts","name":"Martin ","avatar_url":"https://avatars-next.observableusercontent.com/e9c58f00a976732c857e1dd248518bfde297cbad3eb01432c6a4e1db8bcd5138","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"md`---\n## Edit banners\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"desiredWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"desiredHeight = 160","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"bannerWidth = Math.floor(desiredWidth / dotSpacing) * dotSpacing","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"bannerHeight = Math.floor(desiredHeight / dotSpacing) * dotSpacing","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"numCols = Math.floor(bannerWidth/dotSpacing)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"numRows = Math.floor(bannerHeight/dotSpacing)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"getY = i => i * dotSpacing + dotSpacing/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"import {slider, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"