31:Tb39,{ function day() { var data = [ { y:unika_hourly_cfs, x: [...Array(24).keys()].map(v=>v+1), name: 'Wind (Unika 1)', mode: 'lines', line: {shape:'spline', width:2.5,color: colors.unika[5]}, type: 'scatter', showlegend:true, hoverinfo:'x+y', textposition:'top-center' }, { y:ilute_hourly_cfs, x: [...Array(24).keys()].map(v=>v+1), name: 'Solar (Ilute 1)', mode: 'lines', line: {shape:'spline', width:2.5,color: colors.ilute[5]}, type: 'scatter', showlegend:true, hoverinfo:'x+y', textposition:'top-center' } ] var layout = { height: 200, width: (width-120)/2, font: font, hovermode:'closest', showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.1}, margin: {l: 50,r: 5,b: 30,t: 0}, xaxis: { showgrid: false, zeroline: false, ticks:'outside', dtick:2, }, yaxis: { title: 'Capacity factor', showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside', range:[-0.02,1.05],dtick:0.2 } }; const div=container(`Average hourly capacity factors for solar and wind plants.`) plt.newPlot(div, data, layout,{displayModeBar: false}); return div } function year() { var data = [ { y:unika_monthly_cfs, x: [...Array(12).keys()].map(v=>v+1), name: 'Wind (Unika 1)', mode: 'lines', line: {shape:'spline', width:2.5,color: colors.unika[5]}, type: 'scatter', showlegend:true, hoverinfo:'x+y', textposition:'top-center' }, { y:ilute_monthly_cfs, x: [...Array(12).keys()].map(v=>v+1), name: 'Solar (Ilute 1)', mode: 'lines', line: {shape:'spline', width:2.5,color: colors.ilute[5]}, type: 'scatter', showlegend:true, hoverinfo:'x+y', textposition:'top-center' } ] var layout = { height: 200, width: (width-120)/2, font: font, hovermode:'closest', showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.1}, margin: {l: 50,r: 5,b: 30,t: 0}, xaxis: { tickvals: [ 1,2,3,4,5,6,7,8,9,10,11,12 ], ticktext:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], showgrid: false, zeroline: false, ticks:'outside', dtick:1, }, yaxis: { title: 'Capacity factor', showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside', range:[0,0.65],dtick:0.2 } }; const div=container(`Average monthly capacity factors for solar and wind plants.`) plt.newPlot(div, data, layout,{displayModeBar: false}); return div } return html`

${day()}

${year()}

` }32:T66a,{ var data = unika_cfs.map((month, month_no)=>{ return { y:month, x:[...Array(24).keys()], mode: 'lines', line: {shape:'spline',color: colors.unika[month_no],width:2}, fill:'', type: 'scatter', hoverinfo: 'name', showlegend:false, name: 'Unika ' + month_names[month_no] } }) data = data.concat(ilute_cfs.map((month, month_no) => { return { y:month, x:[...Array(24).keys()], mode: 'lines', line: {shape:'spline',color: colors.ilute[month_no],width:2}, fill:'', type: 'scatter', hoverinfo: 'name', showlegend:false, name: 'Ilute ' + month_names[month_no] } })) var layout = { height: 290, width: width-30, font: font, hovermode:'closest', showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.1}, margin: {l: 50,r: 5,b: 45,t: 0}, xaxis: { title: 'Hour', showgrid: true, zeroline: false, ticks:'outside', dtick:1, }, yaxis: { title: 'Capacity Factor', showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside' } }; const div=container('Average hourly capacity factors by month for wind (Unika 1 - greens) and solar (Ilute 1 - yellows).') plt.newPlot(div, data, layout,{displayModeBar: false}); div.on('plotly_hover', d => { var curveNumber = d.points[0].curveNumber var vals = div.data.map((_, i) => i === curveNumber ? 1 : 0.2) plt.restyle(div, 'opacity', vals) }) div.on('plotly_unhover', d => { var curveNumber = d.points[0].curveNumber var vals = div.data.map((_, i) => i === curveNumber ? 1 : 1) plt.restyle(div, 'opacity', vals) }) return div }33:T797,{ var data =[ { y:ratios[10].combined_cfs[5], x:[...Array(24).keys()], mode: 'lines', line: {shape:'spline',color: colors.combined[1],width:2}, fill:'', type: 'scatter', hoverinfo: 'name', showlegend:true, name: `${d3.format('.2f')(ratios[10].ratio)}MW solar per MW wind` },{ y:optimum_ratio.combined_cfs[5], x:[...Array(24).keys()], mode: 'lines', line: {shape:'spline',color: colors.combined[4],width:4}, fill:'', type: 'scatter', hoverinfo: 'name', showlegend:true, name: `${d3.format('.2f')(optimum_ratio.ratio)}MW solar per MW wind` },{ y:ratios[90].combined_cfs[5], x:[...Array(24).keys()], mode: 'lines', line: {shape:'spline',color: colors.combined[10],width:2}, fill:'', type: 'scatter', hoverinfo: 'name', showlegend:true, name: `${d3.format('.2f')(ratios[90].ratio)}MW solar per MW wind` }] var layout = { height: 270, width: width-30, font: font, hovermode:'closest', showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.1}, margin: {l: 50,r: 5,b: 45,t: 0}, xaxis: { title: 'Hour', showgrid: true, zeroline: false, ticks:'outside', dtick:1, }, yaxis: { title: 'Capacity factor', showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside', range:[0,1] } }; const div=container(`Average capacity factor in June for a combined plant with various proportions of wind and solar capacity.`) plt.newPlot(div, data, layout,{displayModeBar: false}); div.on('plotly_hover', d => { var curveNumber = d.points[0].curveNumber var vals = div.data.map((_, i) => i === curveNumber ? 1 : 0.2) plt.restyle(div, 'opacity', vals) }) div.on('plotly_unhover', d => { var curveNumber = d.points[0].curveNumber var vals = div.data.map((_, i) => i === curveNumber ? 1 : 1) plt.restyle(div, 'opacity', vals) }) return div }34:T572,{ var dat = ratios[Math.round(ratio*99)].combined_cfs var data =dat.map((month,month_no) => { return { y:month, x:[...Array(24).keys()], mode: 'lines', line: {shape:'spline',color: colors.combined[month_no],width:2}, fill:'', type: 'scatter', hoverinfo: 'name', showlegend:true, name: month_names[month_no] } }) var layout = { height: 270, width: width-30, font: font, hovermode:'closest', showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.1}, margin: {l: 50,r: 5,b: 45,t: 0}, xaxis: { title: 'Hour', showgrid: true, zeroline: false, ticks:'outside', dtick:1, }, yaxis: { title: 'Capacity factor', showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside', range:[0,1] } }; const div=container(`Daily capacity factor profiles by month for a combined plant with ${ratio}MW solar per MW wind.`) plt.newPlot(div, data, layout,{displayModeBar: false}); div.on('plotly_hover', d => { var curveNumber = d.points[0].curveNumber var vals = div.data.map((_, i) => i === curveNumber ? 1 : 0.2) plt.restyle(div, 'opacity', vals) }) div.on('plotly_unhover', d => { var curveNumber = d.points[0].curveNumber var vals = div.data.map((_, i) => i === curveNumber ? 1 : 1) plt.restyle(div, 'opacity', vals) }) return div }35:T4d0,{ var dat = ratios[Math.round(ratio*99)] var data = [ { x: [...Array(12).keys()].map(v=>v+1), y: dat.monthly_store,name: '', text: dat.monthly_store.map(v=>d3.format('.2f')(v)), type: 'bar', mode: 'markers+text', hoverinfo: 'none', stackgroup:'one', showlegend:false, marker: {color: make_trans(colors.combined[5],0.6)}, textposition:'inside' }] var layout = { height: 220, width: d3.min([width-30,800]), font: font, hovermode:'closest', barmode:'stack', showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.1}, margin: {l: 50,r: 5,b: 30,t: 0}, xaxis: { tickvals: [ 1,2,3,4,5,6,7,8,9,10,11,12 ], ticktext:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], showgrid: false, zeroline: false, ticks:'outside', dtick:1, }, yaxis: { title: 'Hours', dtick:0.2, showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside',range:[0,1.05] } }; const div=container(`Daily storage required in hours by month to entirely flatten the diurnal output of a combined plant with ${ratio}MW solar per MW wind.`) plt.newPlot(div, data, layout,{displayModeBar: false}); return div }36:T5f4,{ var dat = ratios[Math.round(ratio*99)] function series(dat, name, color, highlight) { return { y:dat.monthly_store, x: [...Array(12).keys()].map(v=>v+1), mode: 'lines+markers', textposition: 'top', line: {shape:'spline',color: color, width: highlight?4:2 }, marker: {size: highlight?8:5}, type: 'scatter', showlegend:true, name: name } } var data = [ series(ratios[10],`${d3.format('.2f')(ratios[10].ratio)}MW solar / wind`,colors.combined[1],false), series(optimum_ratio,`${d3.format('.2f')(optimum_ratio.ratio)}MW solar / wind`,colors.combined[4],true), series(ratios[90],`${d3.format('.2f')(ratios[90].ratio)}MW solar / wind`,colors.combined[10],false), ] var layout = { height: 230, width: d3.min([width-30,800]), font: font, hovermode:'closest', showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.1}, margin: {l: 50,r: 5,b: 30,t: 0}, xaxis: { tickvals: [ 1,2,3,4,5,6,7,8,9,10,11,12 ], ticktext:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], showgrid: false, zeroline: false, ticks:'outside', dtick:1, }, yaxis: { title: 'Hours', showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside', range:[0,2.7] } }; const div=container(`Storage required by month to entirely flatten the diurnal of a combined plant for various ratios of wind and solar.`) plt.newPlot(div, data, layout,{displayModeBar: false}); return div }37:T519,{ var data = [ { y:ratios.map(v=>v.store_range), x: ratios.map(v=>v.ratio), mode: 'lines', textposition: 'top', line: {shape:'spline',color: colors.storage[2], width: 4 }, marker: {size: 5}, type: 'scatter', showlegend:false, name: '' } ] data=data.concat([{ y:[optimum_ratio.store_range], x:[optimum_ratio.ratio], text: [d3.format('.2f')(optimum_ratio.ratio)], name:'Optimum ratio',textposition:'top-center',showlegend:false, mode:'markers+text',type:'scatter', hoverinfo:'none', marker:{size:15, color:'black'} }]) var layout = { height: 200, width: d3.min([width-30,800]), font: font, hovermode:'closest', showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.1}, margin: {l: 50,r: 5,b: 45,t: 0}, xaxis: { title:'Ratio solar : wind capacity', showgrid: true, zeroline: false,tickformat: '.1f', ticks:'outside', }, yaxis: { title: 'Range, Hours', showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside', } }; const div=container(`Range (maximum month to minimum month) of storage requirement to flatten the diurnal output of the combined plant by ratio of solar to wind capacity.`) plt.newPlot(div, data, layout,{displayModeBar: false}); return div }38:T971,{ var data =[...Array(12).keys()].map((month_no) => { return { y:ratios.map(v=>v.monthly_store[month_no]), x:ratios.map(v=>v.ratio), mode: 'lines', line: {shape:'spline',color: colors.storage[month_no],width:2}, fill:'', type: 'scatter', hoverinfo: 'name', showlegend:false, name: month_names[month_no] } }) data=data.concat([{ y:ratios.map(v=>v.store_max), x:ratios.map(v=>v.ratio), text:ratios.map(v=>d3.format('.2f')(v.store_max)),name:'Storage requirement', mode:'lines',type:'scatter', hoverinfo:'x+text', line:{shape:'spline', width:2.5, color:'red'} }]) data=data.concat([{ y:[optimum_ratio.store_max], x:[optimum_ratio.ratio], text: [d3.format('.2f')(optimum_ratio.ratio) + ','+ d3.format('.1f')(optimum_ratio.store_max)], name:'Optimum ratio',textposition:'top-center',showlegend:false, mode:'markers+text',type:'scatter', hoverinfo:'none', marker:{size:15, color:'black'} }]) data=data.concat([{ x:[ratios[Math.round(ratio*99)].ratio,ratios[Math.round(ratio*99)].ratio], y:[0,2.2], showlegend:false, mode:'lines',line:{width:1,color:'#555'} }]) var layout = { height: 270, width: width-30, font: font, hovermode:'closest', showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.1}, margin: {l: 50,r: 5,b: 50,t: 0}, xaxis: { title:'Ratio solar : wind capacity', showgrid: true, zeroline: false,tickformat: '.1f', ticks:'outside', }, yaxis: { title: 'Hours', showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside' } }; const div=container(`Daily storage requirement by month and ratio of solar to wind capacity to flatten the diurnal for a combined plant. Maximum storage requirement for the year in red. Optimum ratio is ${d3.format('.2f')(optimum_ratio.ratio)}MW solar per MW wind with ${d3.format('.1f')(optimum_ratio.store_max)} hours of storage.`) plt.newPlot(div, data, layout,{displayModeBar: false}); div.on('plotly_hover', d => { var curveNumber = d.points[0].curveNumber var vals = div.data.map((_, i) => i === curveNumber ? 1 : 0.2) plt.restyle(div, 'opacity', vals) }) div.on('plotly_unhover', d => { var curveNumber = d.points[0].curveNumber var vals = div.data.map((_, i) => i === curveNumber ? 1 : 1) plt.restyle(div, 'opacity', vals) }) return div }39:[{"id":"ad066e6faced1438ecf9bce03e9d10814ebaa8e03e78d8a8f25382978e162904ccc312cb6b0fc8b8e4625eb8f9420dba1bc0748f2063ec447b6398a0cb25100f","href":"https://static.observableusercontent.com/files/ad066e6faced1438ecf9bce03e9d10814ebaa8e03e78d8a8f25382978e162904ccc312cb6b0fc8b8e4625eb8f9420dba1bc0748f2063ec447b6398a0cb25100f","name":"ilute_p50_cfs.csv","type":"text/csv","lastModified":1700143419002.592,"size":1996},{"id":"efda8ed935925a23f41d4ef95d5172ddecb30205c4e5ec0b3df26575ef6091ec0dc73104eb8cdcb88782b7aa625d8560080e47cba746310be7e6ba5a9c2cf0d3","href":"https://static.observableusercontent.com/files/efda8ed935925a23f41d4ef95d5172ddecb30205c4e5ec0b3df26575ef6091ec0dc73104eb8cdcb88782b7aa625d8560080e47cba746310be7e6ba5a9c2cf0d3","name":"unika_p50_cfs.csv","type":"text/csv","lastModified":1700143419002.592,"size":2131}] 2f:{"title":"Wind, Solar and Storage Combinations","cells":[{"id":366,"value":"html`\n\n

Wind, Solar and Storage Combinations

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"

Diurnal firm power from Wind and Solar with Storage

","pinned":false,"hidden":false,"mode":"html"},{"id":1224,"value":"Solar PV and to a lesser extent wind power both exhibit a strong diurnal production profile. Solar PV has zero output during the night and conversely wind speeds are, on average, higher during the night.","pinned":false,"hidden":false,"mode":"html"},{"id":1267,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"Because of these complimentary daily production profiles, combining the output of the two plants produces a much smoother diurnal power profile. Due to the seasonal nature of the output of the wind plant the effect of mixing the output of the two projects changes through the year. ","pinned":false,"hidden":false,"mode":"html"},{"id":656,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"The shape of the daily production profiles for the combined plant depend on the proportion of capacity provided by the two plants. The daily production profile for the combined plants will never be entirely flat.","pinned":false,"hidden":false,"mode":"html"},{"id":467,"value":"viewof ratio = {\n const form = html``;\n form.oninput = () => {\n form.querySelector(\"[id=rate_disp]\").textContent =\n form.rate.valueAsNumber;\n form.value = form.rate.valueAsNumber;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"To produce completely consistent output, intraday storage capacity needs to be added to the system. This could be in the form of batteries or using hydro power reservoirs. The storage need not be co-located with either the wind or solar plants and if it was provided by hydro reservoirs then it almost certainly would not.

There would be beneftis for co-locating storage with either the wind or solar plants (or both) where possible including shared O&M resources, grid access and reduced transmission losses and costs.","pinned":false,"hidden":false,"mode":"html"},{"id":1455,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"The amount of storage required to completely flatten the daily output of the combined plant depends on the relative proportion of capacity for the wind and solar plants and the month. Greater storage capacity is particularly needed in months where the wind plant has a higher diurnal range of output.","pinned":false,"hidden":false,"mode":"html"},{"id":1355,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"To entirely flatten the dirunal output in every month then the storage capacity (in hours) must be sized for the month with the greatest storage requirement. For plant ratios with a high range in monthly storage requirement (between the month with the highest storage requirement and the month with the lowest) the storage will either be insufficient in some months or underutilised in some month. Both situations lead to inefficieny. ","pinned":false,"hidden":false,"mode":"html"},{"id":670,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1383,"value":"The ratio of solar capacity to wind capacity that minimises the relative storage requirement (in hours) can be determined by plotting the storage required to completely flatten the diurnal output of the combined plant for a range of capacity ratios for each month. For the Unika and Ilute plants this shows that ${d3.format('.2f')(optimum_ratio.ratio)}MW of solar per MW of wind capacity minimises the storage requirement at ${d3.format('.1f')(optimum_ratio.store_max)} hours to flatten the average diurnal output. ","pinned":false,"hidden":false,"mode":"html"},{"id":819,"value":"

\n

Setup

","pinned":false,"hidden":false,"mode":"html"},{"id":1056,"value":"colors={\n return {\n ngonye: '#746cd3',\n unika: d3.quantize(d3.interpolateHcl(\"#1e8449\", \"#45b39d\"), 12),\n ilute: d3.quantize(d3.interpolateHcl(\"#d68910\", \"#f4d03f\"), 12),\n combined: d3.quantize(d3.interpolateHcl(\"#922b21\", \"#797d7f\"), 12),\n storage: d3.quantize(d3.interpolateHcl(\"#2874a6\", \"#aed6f1\"), 12),\n \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"optimum_ratio.combined_cfs","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"optimum_ratio=ratios.filter(w=>w.store_max==d3.min(ratios.map(v=>v.store_max)))[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"ratios = {\n let steps = 100\n let ret = [...Array(steps).keys()].map(v=>{\n return {\n ratio: (1/(steps-1))*v\n }\n })\n\n ret.map(ratio => {\n ratio.combined_cfs = [...Array(12).keys()].map(month_no=>{\n return [...Array(24).keys()].map(hour_no=> ((ilute_cfs[month_no][hour_no]*ratio.ratio) + unika_cfs[month_no][hour_no])/(1+ratio.ratio))\n })\n\n ratio.monthly_av_cfs = [...Array(12).keys()].map(month_no=>{\n return d3.mean(ratio.combined_cfs[month_no])\n })\n\n ratio.monthly_store = [...Array(12).keys()].map(month_no=>{\n return d3.sum(ratio.combined_cfs[month_no].map(v=>v>ratio.monthly_av_cfs[month_no]?v-ratio.monthly_av_cfs[month_no]:0))\n })\n ratio.store_hours = [...Array(12).keys()].map(month_no=>{\n return ratio.combined_cfs[month_no].filter(v=>v>ratio.monthly_av_cfs[month_no]).length\n }) \n ratio.store_max = d3.max(ratio.monthly_store)\n ratio.store_range = d3.max(ratio.monthly_store) - d3.min(ratio.monthly_store) \n \n return ratio\n })\n\n return ret\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"month_names={\n return {\n 0:'Jan',\n 1:'Feb',\n 2:'Mar',\n 3:'Apr',\n 4:'May',\n 5:'Jun',\n 6:'Jul',\n 7:'Aug',\n 8:'Sep',\n 9:'Oct',\n 10:'Nov',\n 11:'Dec',\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"function month_days(i) {\n if(i === 4 || i === 6 || i === 9 || i === 11) {\n\t\treturn 30\n\t} else if(i === 2) {\n\t\treturn 28.25\n\t} else {\n\t\treturn 31\n\t}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"ilute_monthly_cfs=ilute_cfs.map(month=>d3.mean(month))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"ilute_hourly_cfs = [...Array(24).keys()].map(hour_no=>{\n return d3.mean(ilute_cfs.map(month=>month[hour_no]))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"unika_hourly_cfs = [...Array(24).keys()].map(hour_no=>{\n return d3.mean(unika_cfs.map(month=>month[hour_no]))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"unika_monthly_cfs=unika_cfs.map(month=>d3.mean(month))","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"unika_cfs = [...Array(12).keys()].map(month_no=>{\n return [...Array(24).keys()].map(hour_no=> parseFloat(unika_p50_cfs[hour_no][month_no+1]))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"ilute_cfs = [...Array(12).keys()].map(month_no=>{\n return [...Array(24).keys()].map(hour_no=> parseFloat(ilute_p50_cfs[hour_no][month_no+1])).map(v=>v?v:0)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"ilute_p50_cfs = FileAttachment(\"ilute_p50_cfs.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"unika_p50_cfs = FileAttachment(\"unika_p50_cfs.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"html`\n

Imports

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"make_trans=function(col,opacity) {\n let c=d3.color(col)\n c.opacity=opacity\n return c.formatRgb()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"container = function(captionText) {\n const div=DOM.element('div')\n div.setAttribute(\"class\",\"border m-2 p-2\")\n const caption=DOM.element('figcaption')\n caption.append(captionText)\n div.append(caption)\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"font = ({\n family: 'Courier New, monospace',\n size: 13,\n color: '#6f6f6f'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"style=html`css\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"luxon = require(\"luxon@1/build/amd/luxon.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"DateTime = luxon.DateTime","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"plt = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}