31:[] 2f:{"title":" jam ;)","cells":[{"id":0,"value":"md`# <def> jam ;)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"\nmd`### Import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`~~~js\nimport {svgGradientDefs} from \"@luciyer/svg-gradients-chrome-safari\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`### Usage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`\n\\`svgGradientDefs(color_array [, gradient_id])\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"md`### Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`~~~js\nsvgGradientDefs([\"steelblue\", \"green\"], \"myGradient\");\n~~~\nGenerates the following svg:\n\\`\\`\\`\n\n\\`\\`\\`\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"md`Applying it to a \\`\\` using \\`attr(\"fill\", \"url(#gradient)\")\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"{\n \n // Create SVG \n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 100);\n \n // Append generated \n svg\n .node()\n .appendChild(svgGradientDefs([\"steelblue\", \"green\"], 'watery'));\n \n // Append and set fill to gradient\n svg\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", 100)\n .attr(\"fill\", \"url(#watery)\")\n \n return svg.node();\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"{\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 100);\n \n svg\n .node()\n .appendChild(svgGradientDefs([\"white\", \"pink\", \"hotpink\", \"deeppink\", \"mediumvioletred\"], 'pinkish'));\n \n svg\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", 100)\n .attr(\"fill\", \"url(#pinkish)\")\n \n return svg.node();\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`Or, implementing d3's color scales.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"{\n \n const steps = d3.range(0, 15),\n color_array = steps.map((_,i) => d3.interpolateInferno(i / (steps.length - 1)));\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 100);\n \n svg\n .node()\n .appendChild(svgGradientDefs(color_array));\n \n svg\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", 100)\n .attr(\"fill\", \"url(#gradient)\")\n \n return svg.node();\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"svgGradientDefs = function(color_array, gradient_id) {\n \n if (color_array.length < 2)\n return 'Argument should be array of two or more colors.';\n\n var pctStep = 100 / (color_array.length - 1),\n stops = color_array.map((d, i) => ({ offset: i * pctStep, color: d }));\n \n const gradient = d3.create(\"svg\"),\n defs = gradient.append(\"defs\");\n \n defs.append(\"linearGradient\")\n .attr(\"id\", gradient_id ? gradient_id : \"gradient\")\n .selectAll(\"stop\")\n .data(stops)\n .enter()\n .append('stop')\n .attr(\"offset\", d => d.offset + '%')\n .attr(\"stop-color\", d => d.color);\n \n return gradient.node();\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}