2b:null 2c:["$","title",null,{"children":"Observable Plot for Sparklines | timelyportfolio | Observable"}] 31:T4e9,Plot.plot({ height: 120, marginBottom: 15, marginTop: 15, marginRight: 40, x: {axis: null}, y: {axis: null}, marks: [ () => htl.svg` `, // add shaded region to indicate within tolerance; arbitrarily use +/- 7 Plot.rectY([{y1: -7, y2: 7}],{ y1: "y1", y2: "y2", fill: 'url("#band_pattern")'}), Plot.barY(data, { x: 'x', y: 'y', fill: d => Math.abs(d.y) > 7 ? (d.y > 0 ? '#BCCCDC' : '#DD8888') : '#DDD', fillOpacity: 0.8, channels: { Day: 'x', Amount: (d) => d.y.toFixed(1) }, }), Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})), Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})), Plot.text(data, Plot.pointerX({ px: "x", y: "y", dy: -10, frameAnchor: "right", text: (d) => [`Day ${d.x}`, `${d.y.toFixed(1)}`].join(" "), textAnchor: 'end', fontWeight: 'bold' })) ] })32:T7e0,Plot.plot({ height: 120, marginBottom: 15, marginTop: 15, marginRight: 40, x: {axis: null}, y: {axis: null}, marks: [ // although I have left the gradient definition in each plot, the id is in DOM // so if you are using in a single page I recommend only defining once // of using unique ids for each chart () => htl.svg` `, // add shaded region to indicate out of tolerance; arbitrarily use +/- 7 Plot.rectY( [{y1: -7, y2: -10}, {y1: 7, y2: 10}], { y1: "y1", y2: "y2", fill: d => d.y1 > 0 ? 'url("#band_pattern_high")' : 'url("#band_pattern_low")'} ), // add lines for "extremes"; these could easily be statistical but for simplicity set at +/- 7 Plot.ruleY([-7,7], {stroke: d => d > 0 ? '#BCCCDC' : '#DD8888'}), Plot.barY(data, { x: 'x', y: 'y', fill: d => Math.abs(d.y) > 7 ? (d.y > 0 ? '#BCCCDC' : '#DD8888') : '#DDD', fillOpacity: 0.8, channels: { Day: 'x', Amount: (d) => d.y.toFixed(1) }, }), Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})), Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})), Plot.text(data, Plot.pointerX({ px: "x", y: "y", dy: -10, frameAnchor: "right", text: (d) => [`Day ${d.x}`, `${d.y.toFixed(1)}`].join(" "), textAnchor: 'end', fontWeight: 'bold' })) ] })33:T8b2,Plot.plot({ height: 120, marginBottom: 15, marginTop: 15, marginRight: 40, x: {axis: null}, y: {axis: null}, marks: [ // although I have left the gradient definition in each plot, the id is in DOM // so if you are using in a single page I recommend only defining once // of using unique ids for each chart () => htl.svg` `, // add shaded region to indicate out of tolerance; arbitrarily use +/- 7 Plot.rectY( [{y1: -7, y2: -10}, {y1: 7, y2: 10}], { y1: "y1", y2: "y2", fill: d => d.y1 > 0 ? 'url("#band_pattern_high")' : 'url("#band_pattern_low")'} ), // add lines for "extremes"; these could easily be statistical but for simplicity set at +/- 7 Plot.ruleY([-7,0,7], {stroke: d => d > 0 ? '#BCCCDC' : d === 0 ? '#000' :'#DD8888'}), Plot.barY(data, { x: 'x', y: 'y', fill: d => Math.abs(d.y) > 7 ? (d.y > 0 ? '#BCCCDC' : '#DD8888') : '#DDD', fillOpacity: 0.8, channels: { Day: 'x', Amount: (d) => d.y.toFixed(1) }, }), Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})), Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})), Plot.text(data, Plot.pointerX({ px: "x", y: "y", dy: -10, frameAnchor: "right", text: (d) => [`Day ${d.x}`, `${d.y.toFixed(1)}`].join(" "), textAnchor: 'end', fontWeight: 'bold' })), Plot.axisY({ ticks: [-10,-7,0,7,10], anchor: 'right', fill: d => d > 0 ? '#BCCCDC' : (d < 0 ? '#DD8888' : '#000'), tickSize: 0, textAnchor: 'right' }) ] })34:T90c,Plot.plot({ height: 120, marginBottom: 15, marginTop: 15, marginRight: 40, x: {axis: null}, y: {axis: null}, marks: [ // although I have left the gradient definition in each plot, the id is in DOM // so if you are using in a single page I recommend only defining once // of using unique ids for each chart () => htl.svg` `, // add shaded region to indicate out of tolerance; arbitrarily use +/- 7 Plot.rectY( [{y1: -7, y2: -10}, {y1: 7, y2: 10}], { y1: "y1", y2: "y2", fill: d => d.y1 > 0 ? 'url("#band_pattern_high")' : 'url("#band_pattern_low")'} ), // add lines for "extremes"; these could easily be statistical but for simplicity set at +/- 7 Plot.ruleY([-7,0,7], {stroke: d => d > 0 ? '#BCCCDC' : d === 0 ? '#000' :'#DD8888'}), Plot.line(data, { x: 'x', y: 'y', curve: 'catmull-rom', channels: { Day: 'x', Amount: (d) => d.y.toFixed(1) }, }), Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})), Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})), Plot.dot(data, Plot.pointerX({ x: 'x', y: 'y', r: 5, fill: d => d.y > 0 ? '#BCCCDC' : '#DD8888', fillOpacity: 0.8, stroke: 'none' })), Plot.text(data, Plot.pointerX({ px: "x", y: "y", dy: -10, frameAnchor: "right", text: (d) => [`Day ${d.x}`, `${d.y.toFixed(1)}`].join(" "), textAnchor: 'end', fontWeight: 'bold' })), Plot.axisY({ ticks: [-10,-7,0,7,10], anchor: 'right', fill: d => d > 0 ? '#BCCCDC' : (d < 0 ? '#DD8888' : '#000'), tickSize: 0, textAnchor: 'right' }) ] })35:T994,Plot.plot({ height: 120, marginBottom: 15, marginTop: 15, marginRight: 40, x: {axis: null}, y: {axis: null}, marks: [ // although I have left the gradient definition in each plot, the id is in DOM // so if you are using in a single page I recommend only defining once // of using unique ids for each chart () => htl.svg` `, // add shaded region to indicate out of tolerance; arbitrarily use +/- 7 Plot.rectY( [{y1: -7, y2: -10}, {y1: 7, y2: 10}], { y1: "y1", y2: "y2", fill: d => d.y1 > 0 ? 'url("#band_pattern_high")' : 'url("#band_pattern_low")'} ), // add lines for "extremes"; these could easily be statistical but for simplicity set at +/- 7 Plot.ruleY([-7,7], {stroke: d => d > 0 ? '#BCCCDC' : '#DD8888'}), Plot.ruleY([0], {stroke: '#888'}), Plot.line(data, { x: 'x', y: 'y', curve: 'step', channels: { Day: 'x', Amount: (d) => d.y.toFixed(1) }, }), Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeWidth: 2, strokeDasharray: '4 4', stroke: d => d.y > 0 ? '#BCCCDC' : '#DD8888'})), Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeWidth: 2, strokeDasharray: '4 4', stroke: d => d.y > 0 ? '#BCCCDC' : '#DD8888'})), Plot.dot(data, Plot.pointerX({ x: 'x', y: 'y', r: 5, fill: d => d.y > 0 ? '#BCCCDC' : '#DD8888', fillOpacity: 0.8, stroke: 'none' })), Plot.text(data, Plot.pointerX({ px: "x", y: "y", dy: -10, frameAnchor: "right", text: (d) => [`Day ${d.x}`, `${d.y.toFixed(1)}`].join(" "), textAnchor: 'end', fontWeight: 'bold' })), Plot.axisY({ ticks: [-10,-7,0,7,10], anchor: 'right', fill: d => d > 0 ? '#BCCCDC' : (d < 0 ? '#DD8888' : '#000'), tickSize: 0, textAnchor: 'right' }) ] })36:T8f4,Plot.plot({ height: 120, marginBottom: 15, marginTop: 15, marginRight: 40, x: {axis: null}, y: {axis: null}, marks: [ // although I have left the gradient definition in each plot, the id is in DOM // so if you are using in a single page I recommend only defining once // of using unique ids for each chart () => htl.svg` `, // add shaded region to indicate out of tolerance; arbitrarily use +/- 7 Plot.rectY( [{y1: -7, y2: -10}, {y1: 7, y2: 10}], { y1: "y1", y2: "y2", fill: d => d.y1 > 0 ? 'url("#band_pattern_high")' : 'url("#band_pattern_low")'} ), // add lines for "extremes"; these could easily be statistical but for simplicity set at +/- 7 Plot.ruleY([-7,0,7], {stroke: d => d > 0 ? '#BCCCDC' : d === 0 ? '#000' :'#DD8888'}), Plot.differenceY(data, { x: 'x', y: 'y', curve: 'step', positiveFill: '#BCCCDC', negativeFill: '#DD8888', stroke: 'none', channels: { Day: 'x', Amount: (d) => d.y.toFixed(1) }, }), Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})), Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})), Plot.dot(data, Plot.pointerX({x: 'x', y: 'y', r: 5})), Plot.text(data, Plot.pointerX({ px: "x", y: "y", dy: -10, frameAnchor: "right", text: (d) => [`Day ${d.x}`, `${d.y.toFixed(1)}`].join(" "), textAnchor: 'end', fontWeight: 'bold' })), Plot.axisY({ ticks: [-10,-7,0,7,10], anchor: 'right', fill: d => d > 0 ? '#BCCCDC' : (d < 0 ? '#DD8888' : '#000'), tickSize: 0, textAnchor: 'right' }) ] })37:T82f,Plot.plot({ height: 120, marginBottom: 15, marginTop: 15, marginRight: 40, x: {axis: null}, y: {axis: null, label: null}, marks: [ // although I have left the gradient definition in each plot, the id is in DOM // so if you are using in a single page I recommend only defining once // of using unique ids for each chart () => htl.svg` `, // add lines for "extremes"; these could easily be statistical but for simplicity set at +/- 7 Plot.ruleY([-7,0,7], {stroke: d => d > 0 ? '#BCCCDC' : d === 0 ? '#000' :'#DD8888'}), Plot.differenceY(data, { x: 'x', y: 'y', curve: 'catmull-rom', positiveFill: 'url("#band_pattern_high")', negativeFill: 'url("#band_pattern_low")', stroke: 'none', channels: { Day: 'x', Amount: (d) => d.y.toFixed(1) }, }), Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})), Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})), Plot.dot(data, Plot.pointerX({x: 'x', y: 'y', r: 5})), Plot.text(data, Plot.pointerX({ px: "x", y: "y", dy: -10, frameAnchor: "right", text: (d) => [`Day ${d.x}`, `${d.y.toFixed(1)}`].join(" "), textAnchor: 'end', fontWeight: 'bold' })), Plot.axisY({ ticks: [-10,-7,0,7,10], anchor: 'right', fill: d => d > 0 ? '#BCCCDC' : (d < 0 ? '#DD8888' : '#000'), tickSize: 0, textAnchor: 'right' }) ] })38:T5a8,Plot.plot({ height: 120, marginBottom: 15, marginTop: 15, marginRight: 40, x: {axis: null}, y: {axis: null, label: null}, marks: [ // add lines for "extremes"; these could easily be statistical but for simplicity set at +/- 7 Plot.ruleY([-7,0,7], {stroke: d => d > 0 ? '#BCCCDC' : d === 0 ? '#000' :'#DD8888'}), withGradient({color: '#BCCCDC'}, (fill_positive) => { return withGradientNegative({color: '#DD8888'}, (fill_negative) => { return Plot.differenceY(data, { x: 'x', y: 'y', curve: 'catmull-rom', positiveFill: fill_positive, negativeFill: fill_negative, stroke: 'none', channels: { Day: 'x', Amount: (d) => d.y.toFixed(1) }, }) }) }), Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})), Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})), Plot.dot(data, Plot.pointerX({x: 'x', y: 'y', r: 5})), Plot.text(data, Plot.pointerX({ px: "x", y: "y", dy: -10, frameAnchor: "right", text: (d) => [`Day ${d.x}`, `${d.y.toFixed(1)}`].join(" "), textAnchor: 'end', fontWeight: 'bold' })), Plot.axisY({ ticks: [-10,-7,0,7,10], anchor: 'right', fill: d => d > 0 ? '#BCCCDC' : (d < 0 ? '#DD8888' : '#000'), tickSize: 0, textAnchor: 'right' }) ] })39:[] 2f:{"id":"66dbd5caf158084c","slug":null,"title":"Observable Plot for Sparklines","thumbnail":"e9fec320f930e922db50bee61642e2b71bb7b73ed30df90f4b0cb8774cdeef05","access_level":"public","create_time":"$D2024-01-26T02:28:31.236Z","update_time":"$D2024-01-29T03:32:56.371Z","view_time":null,"first_public_time":"$D2024-01-26T02:28:31.236Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"d77c15016dc2ccf9","login":"timelyportfolio","name":"timelyportfolio","avatar_url":"https://avatars-next.observableusercontent.com/9bef55d327befaf840e6acf550b7b4b5ca03dfb64509bb0e75c2f72c66614bb9","tier":"starter_2024"},"version":464,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc5bafe907f72822","login":"timelyportfolio","name":"timelyportfolio","avatar_url":"https://avatars-next.observableusercontent.com/9bef55d327befaf840e6acf550b7b4b5ca03dfb64509bb0e75c2f72c66614bb9","tier":null}],"members":[{"type":"individual","id":"fc5bafe907f72822","login":"timelyportfolio","name":"timelyportfolio","avatar_url":"https://avatars-next.observableusercontent.com/9bef55d327befaf840e6acf550b7b4b5ca03dfb64509bb0e75c2f72c66614bb9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Observable Plot for Sparklines","cells":[{"id":0,"value":"# Observable Plot for Sparklines\n\nsketches in Observable Plot modeled after the beautiful sparklines from [data-ui](https://williaster.github.io/data-ui/?selectedKind=sparkline&selectedStory=Kitchen%20sink&full=0&addons=0&stories=1&panelRight=0)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"### Random Data Generation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"data = (new Array(35)).fill(null).map((d,i) => {return {x:i, y:Math.random() * 10 * (Math.random() > 0.5 ? -1 : 1)}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"### Sparklines with Bars\n- *we get negative bars with Observable Plot*\n- mouseover/touch to see interactive tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"Plot.plot({\n height: 100,\n marginBottom: 10,\n marginRight: 15,\n x: {axis: null},\n y: {axis: null},\n marks: [\n Plot.barY(data, {\n x: 'x',\n y: 'y',\n fill: d => d.y > 0 ? '#BCCCDC' : '#DD8888',\n fillOpacity: 0.8,\n channels: {\n Day: 'x',\n Amount: (d) => d.y.toFixed(1)\n },\n tip: {\n format: {\n x: false,\n y: false,\n fill: false\n },\n stroke: 'transparent',\n fillOpacity: 0.5,\n pointerSize: 0\n }\n }),\n Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})),\n Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})),\n //Plot.crosshairX(data, {x: \"x\", y: \"y\", strokeDasharray: '4 4'})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"Plot.plot({\n height: 100,\n marginBottom: 10,\n marginRight: 25,\n x: {axis: null},\n y: {axis: null},\n marks: [\n Plot.barY(data, {\n x: 'x',\n y: 'y',\n fill: d => d.y > 0 ? '#BCCCDC' : '#DD8888',\n fillOpacity: 0.8\n }),\n Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})),\n Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})),\n Plot.text(data, Plot.pointerX({\n px: \"x\",\n py: \"y\",\n dy: -6,\n dx: 20,\n textAnchor: 'end',\n frameAnchor: 'right',\n text: d => `Day ${d.x}`\n })),\n Plot.text(data, Plot.pointerX({\n px: \"x\",\n py: \"y\",\n dx: 20,\n dy: 6,\n textAnchor: 'end',\n frameAnchor: 'right',\n text: d => d.y.toFixed(1),\n fill: d => d.y > 0 ? '#BCCCDC' : '#DD8888',\n fontSize: 12\n })),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"Plot.plot({\n height: 120,\n marginBottom: 15,\n marginTop: 15,\n marginRight: 40,\n x: {axis: null},\n y: {axis: null},\n marks: [\n Plot.barY(data, {\n x: 'x',\n y: 'y',\n fill: d => d.y > 0 ? '#BCCCDC' : '#DD8888',\n fillOpacity: 0.8,\n channels: {\n Day: 'x',\n Amount: (d) => d.y.toFixed(1)\n },\n }),\n Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})),\n Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})),\n Plot.text(data, Plot.pointerX({\n px: \"x\", y: \"y\",\n dy: -10,\n frameAnchor: \"right\",\n text: (d) => [`Day ${d.x}`, `${d.y.toFixed(1)}`].join(\" \"),\n textAnchor: 'end',\n fontWeight: 'bold'\n }))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"Plot.plot({\n height: 120,\n marginBottom: 15,\n marginTop: 15,\n marginRight: 40,\n x: {axis: null},\n y: {axis: null},\n marks: [\n // add lines for \"extremes\"; these could easily be statistical but for simplicity set at +/- 7\n Plot.ruleY([-7,7], {stroke: d => d > 0 ? '#BCCCDC' : '#DD8888'}),\n Plot.barY(data, {\n x: 'x',\n y: 'y',\n fill: d => Math.abs(d.y) > 7 ? (d.y > 0 ? '#BCCCDC' : '#DD8888') : '#DDD',\n fillOpacity: 0.8,\n channels: {\n Day: 'x',\n Amount: (d) => d.y.toFixed(1)\n },\n }),\n Plot.ruleY(data, Plot.pointerX({px: 'x', y: 'y', strokeDasharray: '4 4'})),\n Plot.ruleX(data, Plot.pointerX({x: 'x', py: 'y', strokeDasharray: '4 4'})),\n Plot.text(data, Plot.pointerX({\n px: \"x\", y: \"y\",\n dy: -10,\n frameAnchor: \"right\",\n text: (d) => [`Day ${d.x}`, `${d.y.toFixed(1)}`].join(\" \"),\n textAnchor: 'end',\n fontWeight: 'bold'\n }))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"Plot.plot({\n height: 66,\n marginTop: 20,\n //marginRight: 40,\n x: {label: null},\n y: {axis: null},\n color: {scheme: \"PRGn\"},\n marks: [\n Plot.cell(data, {x: 'x', fill: 'y'}),\n Plot.text(data, Plot.pointerX({\n x: \"x\", py: \"y\",\n dy: -10,\n frameAnchor: 'top-left',\n text: (d) => `${d.y.toFixed(1)}`,\n textAnchor: 'middle',\n fontWeight: 'bold'\n })),\n Plot.axisX({ anchor: 'bottom', tickSize: 0, dy: -5 })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"### Sparkline Line","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"### Imports\n\nheavily inspired by `withGradient` from [Google Finance Charts implementation](https://observablehq.com/d/6eb190775d47fe25) but modified very slightly to work with negative values and change the `stops`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"function withGradient({color, id = DOM.uid(\"gradient\").id}, callback) {\n return [\n callback(`url(#${id})`),\n () => svg`\n \n \n \n \n \n \n `\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"function withGradientNegative({color, id = DOM.uid(\"gradient\").id}, callback) {\n return [\n callback(`url(#${id})`),\n () => svg`\n \n \n \n \n \n \n `\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"