31:[] 2f:{"title":"Linear Gradient","cells":[{"id":0,"value":"md`# Linear Gradient\n\nThis is a (very) brief introduction to linear gradients in SVG with D3. This shows a plain SVG (i.e. no D3.js) rectangle with a linear gradient applied. Note that in Observable, you need to use the \\`DOM.uid()\\` function to get a unique ID and URL for the embedded content.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`This shows a gradient created with D3.js.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"svg = {\n const _svg = DOM.svg(width, height)\n const svg = d3.select(_svg);\n \n svg.append(\"defs\")\n .append(\"linearGradient\")\n .attr(\"id\", gradientIds[1].id)\n .selectAll(\"stop\")\n .data(stops)\n .join(\"stop\")\n .attr(\"offset\", d => d.offset)\n .attr(\"stop-color\", d => d.color);\n \n svg.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", gradientIds[1]);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`Create an array object to hold the gradient color stop values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"stops = new Array(numStops + 1)\n .fill({})\n .map((_, i) => {\n return {\n offset: i / numStops,\n color: d3.interpolateViridis(i / numStops)\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`Set the height of the SVG element.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"gradientIds = new Array(numGradients)\n .fill({})\n .map(() => {\n return DOM.uid(\"my-gradient\");\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"numStops = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"numGradients = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5.9.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3.version","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}