31:T1fb3,{ const rW=105 const rH=70 const m=5 const f=11 let projection=d3.geoPath(d3.geoEquirectangular().center([28,-18.2]).scale(900)) let flows=d3.rollup(flow.filter(f=>f.year<2021), v=>d3.sum(v, d=>d.flow_sum/1000), v=>v.node, v=>v.year, v=>v.side) let flow_tots=d3.rollup(flow.filter(f=>f.year<2021), v=>d3.sum(v, d=>d.flow_sum/1000), v=>v.node) let flow_max=d3.max(d3.rollups(flow.filter(d=>d.side=='supply'), v=>d3.sum(v, d=>-d.flow_sum/1000), v=>v.year, v=>v.node).map(y=>d3.max(y[1],v=>v[1]))) const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 600]) .style("width", "100%") .style("height", "auto"); let margin = ({top: 0, right: 0, bottom: 0, left: 0}) let height = 45 let wdt = 50 let x = d3.scaleLinear() .domain([0,200]) .range([0, wdt]) .interpolate(d3.interpolateRound) let y = d3.scaleBand() .domain([2016,2017,2018,2019,2020]) .range([margin.top, height - margin.bottom]) .padding(0.1) .round(true) var cSupply = d3.scaleSequential().domain([d3.min(Array.from(flow_tots),v=>v[1]),0]) .interpolator(d3.interpolateLab(sideCol(2), "#CCC")) var cConsume = d3.scaleSequential().domain([0,d3.max(Array.from(flow_tots),v=>v[1])]) .interpolator(d3.interpolateLab("#CCC", sideCol(5))) function make_chart_leg(svg, dxr, dyr) { let dx=dxr let dy=dyr let gut=5 let dat=[[2016,0],[2017,0],[2018,0],[2019,0],[2020,flow_max]] svg.append("g") .attr("transform", "translate(" + (dx + x(0) + gut/2) + "," + dy + ")") .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) svg.append("g") .attr("transform", "translate(" + (dx + x(0) + gut) + "," + dy + ")") .call(d3.axisTop(x).ticks(2)) svg.append("text") .text('GWh') .attr("transform", "translate(" + (dx + x(flow_max) + 20) + "," + dy + ")") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("fill", "#555") .attr("text-anchor", "left") svg.append("text") .text('Seller') .attr("transform", "translate(" + (dx + x(0) + 5) + "," + (dy + y.bandwidth()*4 +5) + ")") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", 'bold') .attr("fill",sideCol(2) ) .attr("text-anchor", "left") svg.append("text") .text('Buyer') .attr("transform", "translate(" + (dx + x(0) - 60) + "," + (dy + y.bandwidth()*4 +5) + ")") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", 'bold') .attr("fill",sideCol(5) ) .attr("text-anchor", "left") svg.append("g") .attr("transform", "translate(" + (dx+gut) + "," + dy + ")") .attr('stroke', '3555') .attr('stroke-width', '.2') .attr('fill-opacity', '1') .selectAll("rect") .data(dat) .join("rect") .attr('y', d=>y(d[0])) .attr('x', x(0)) .attr('width', d=>x(d[1])-x(0)) .attr('height', y.bandwidth()) .attr('fill', sideCol(2) ) svg.append("g") .attr("transform", "translate(" + (dx-gut) + "," + dy + ")") .attr('stroke', '#555') .attr('stroke-width', '0.2') .attr('fill-opacity', '1') .selectAll("rect") .data(dat) .join("rect") .attr('y', y(2020)) .attr('x', x(0) - x(flow_max)) .attr('width', x(flow_max)-x(0)) .attr('height', y.bandwidth()) .attr('fill', sideCol(5) ) } function make_chart(svg, dat, dxr, dyr) { let dx=dxr let dy=dyr - (rH/2) + (f*2) let gut=5 svg.append("g") .attr("transform", "translate(" + (dx + x(0) + gut/2) + "," + dy + ")") .call(d3.axisLeft(y).tickFormat("")) .call(g => g.select(".domain").remove()) svg.append("g") .attr("transform", "translate(" + (dx+gut) + "," + dy + ")") .attr('stroke', '#555') .attr('stroke-width', '0.2') .attr('fill-opacity', '1') .selectAll("rect") .data(dat) .join("rect") .attr('y', d=>y(d[0])) .attr('x', 0) .attr('width', d=>x(d[1].get('supply')?-d[1].get('supply'):0)) .attr('height', y.bandwidth()) .attr('fill', sideCol(2) ) svg.append("g") .attr("transform", "translate(" + (dx-gut) + "," + dy + ")") .attr('stroke', '#555') .attr('stroke-width', '0.2') .attr('fill-opacity', '1') .selectAll("rect") .data(dat) .join("rect") .attr('y', d=>y(d[0])) .attr('x', d=>- x(d[1].get('consume')?d[1].get('consume'):0)) .attr('width', d=>x(d[1].get('consume')?d[1].get('consume'):0)) .attr('height', y.bandwidth()) .attr('fill', sideCol(5) ) } svg.append("g") .selectAll("path") .data(sapp.features) .join("path") .attr('stroke', '#AAA') .attr('stroke-width', '1.5') .attr('fill-opacity', '0.5') .attr("fill", d=>{ let m=flow_tots.get(d.properties.ref) if (m) { return m<0 ? cSupply(m) : cConsume(m) } else { return '#CCC' } }) .attr("d", projection); function make_text(parent,fX, fY, fT,bold) { parent.append("g") .attr("font-family", "sans-serif") .attr("font-size", f) .attr("fill", "#555") .attr("font-weight", bold ? 'bold' : '') .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("text-anchor", "left") .selectAll("text") .data(sapp.features) .join("text") .text(fT) .attr("x", fX) .attr("y", fY) } function fnX() { return (d => projection.centroid(d.geometry)[0] + node_dict[d.properties.ref].offset[0]-rW/2+m) } function fnY(line, off) { return (d => projection.centroid(d.geometry)[1] + node_dict[d.properties.ref].offset[1]-rH/2+m+f/2 + (f*line) + off) } make_text( svg, fnX(), fnY(0,0), (d => node_dict[d.properties.ref].member), true ) make_text( svg, fnX(), fnY(1,0), (d => node_dict[d.properties.ref].country), false ) svg.append('g') .selectAll("rect") .data(sapp.features) .join("rect") .attr("x", d => projection.centroid(d.geometry)[0] + node_dict[d.properties.ref].offset[0]-rW/2) .attr("y", d => projection.centroid(d.geometry)[1] + node_dict[d.properties.ref].offset[1]-rH/2) .attr('width', rW) .attr('height', d => node_dict[d.properties.ref].small ? (m*2)+(f*2) : rH) .attr('rx', 5) .attr('ry', 5) .attr('stroke', 'steelblue') .attr('stroke-width', '1.5') .attr('fill', 'white') .attr('fill-opacity', '0.3') svg.append('g') .selectAll("polyline") .data(sapp.features.filter(d=>node_dict[d.properties.ref].leader)) .join("polyline") .attr("points",d=>` ${projection.centroid(d.geometry).join(',')} ${ projection.centroid(d.geometry)[0] + node_dict[d.properties.ref].offset[0]+ (rW/2*(node_dict[d.properties.ref].offset[0]<0?1:-1)) } , ${ projection.centroid(d.geometry)[1] + node_dict[d.properties.ref].offset[1]+ (rH/2*(node_dict[d.properties.ref].leader_bottom?0:-1)) } `) .attr('stroke', 'steelblue') .attr('stroke-width', '1.5') sapp.features.forEach(f=>{ if (flows.get(f.properties.ref)) { let node=node_dict[f.properties.ref] let cent=projection.centroid(f.geometry) make_chart(svg, Array.from(flows.get(f.properties.ref)), cent[0] + (node.offset?node.offset[0]:0), cent[1]+(node.offset?node.offset[1]:0) ) } }) make_chart_leg(svg,800,550) return html` ${svg.node()}

SAPP member countries and utilities and their total supply and consumption in MWh through the FPM market by year. Shading represents the total supply and consumption between 2016 and 2020. Mozambique (EDM and HCB) and Eskom dominate the supply and NamPower, BPC and CEC dominate the consumption.

` }32:T6bb,viewof dam_range = { var data = [ { y: movingAverage(daily.map(d=>d.price_max).concat(daily.map(d=>d.price_min).reverse()),14), x: daily.map(d=>d.date).concat(daily.map(d=>d.date).reverse()), mode: 'lines', line: {shape: 'spline', width: 0}, fill:'toself', fillcolor:'rgba(100, 149, 237,0.3)', type: 'scatter', hoverinfo: 'none', showlegend:false,name: '', } , { y: daily.map(d=>d.price_weight_av), x: daily.map(d=>d.date), mode: 'lines', line: {shape: 'spline', color:'grey', width: 1.5}, type: 'scatter', hoverinfo: 'none', showlegend:false,name: '', }, { y: movingAverage(daily.map(d=>d.price_weight_av),14), x: daily.map(d=>d.date), mode: 'lines', line: {shape: 'spline', color:d3.schemeCategory10[3], width: 1.5}, type: 'scatter', hoverinfo: 'x,y', showlegend:false,name: '', }, ] var layout = { height: 300, width: width, font: font, showlegend: true, legend: {xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 10,t: 0}, xaxis: { rangeslider: {}, range:years_range, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { title: '$/MWh', showgrid: true, zeroline: false, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') const form = html`` plt.newPlot(div, data, layout,{displayModeBar: false}); div.on('plotly_relayout', d => { form.dispatchEvent(new CustomEvent("input", { detail: d['xaxis.range'],bubbles: true })); }) form.oninput = (evt) => { form.value = evt.detail; }; form.oninput({detail: [daily[0].date, daily[daily.length-1].date]}) return form; }33:T4fc,{ var data = [ { y: daily.map(d=>d.volume/1000), x: daily.map(d=>d.date), mode: 'lines', line: {shape: 'spline', color:'grey', width: 1.5}, type: 'scatter', hoverinfo: 'none', showlegend:false,name: '', }, { y: movingAverage(daily.map(d=>d.volume/1000),14), x: daily.map(d=>d.date), mode: 'lines', line: {shape: 'spline', color:d3.schemeCategory10[3], width: 1.5}, type: 'scatter', hoverinfo: 'x,y', showlegend:false,name: '', } ] var layout = { height: 300, width: width, font: font, showlegend: true, legend: {xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { range: dam_range, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { title: 'GWh/day', showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

SAPP FPM weighted average price (top) and volume (bottom). 14 day moving average in red. Blue area is the daily maximum and minimum prices. The impact of the COVID pandemic is apparent in the volume traded in 2020.

` }34:Tba0,{ function vol() { var data = [{ y: yearly.map(m=>(m[1].volume/1000)), x: yearly.map(m=>m[0]), text: yearly.map((m,i)=>d3.format(',.3r')(m[1].volume/1000) + ' GWh'), textposition:'auto', marker: {color: d3.schemeDark2[2], width: 2}, type: 'bar', hoverinfo: 'none', showlegend:false }] var layout = { height: 240, font: font, width:width*.33, showlegend: true, legend: {orientation:'h',xanchor: 'left', x:0, y: 1}, margin: {l: 65,r: 10,b: 30,t: 0}, xaxis: { showgrid: true, zeroline: false, ticks:'outside', dtick:1}, yaxis: { range:[0,100], title: 'GWh', showgrid: false, zeroline: true, tickformat: ',.0f', ticks:'outside' }}; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return div } function val() { var data = [{ y: yearly.map(m=>(m[1].value/1000000)), x: yearly.map(m=>m[0]), text: yearly.map((m,i)=>d3.format('$,.3r')(m[1].value/1000000) +'m' ), textposition:'auto', marker: {color: d3.schemeDark2[3], width: 2}, type: 'bar', hoverinfo: 'none', showlegend:false }] var layout = { height: 240, width: width*.3, font: font, showlegend: true, legend: {orientation:'h',xanchor: 'left', x:0, y: 1}, margin: {l: 65,r: 10,b: 30,t: 0}, xaxis: { showgrid: true, zeroline: false, ticks:'outside', dtick:1}, yaxis: { range:[0,6], title: '$', showgrid: false, zeroline: true, tickformat: ',.0f', ticks:'outside' }}; const div=DOM.element('div') div.setAttribute('style',`background-color:'red'`) plt.newPlot(div, data, layout,{displayModeBar: false}); return div } function rte() { var data = [{ y: yearly.map(m=>(m[1].rate)), x: yearly.map(m=>m[0]), text: yearly.map((m,i)=>d3.format('$,.3r')(m[1].rate) +'/MWh' ), textposition:'auto', marker: {shape:'spline',color: d3.schemeDark2[4]}, type: 'bar', hoverinfo: 'none', showlegend:false }] var layout = { height: 240, width: width*.3, font: font, showlegend: true, legend: {orientation:'h',xanchor: 'left', x:0, y: 1}, margin: {l: 65,r: 10,b: 30,t: 0}, xaxis: { showgrid: true, zeroline: false, ticks:'outside', dtick:1}, yaxis: { range:[0,90], title: '$/MWh', showgrid: false, zeroline: true, tickformat: ',.0f', ticks:'outside' }}; const div=DOM.element('div') div.setAttribute('style',`background-color:'red'`) plt.newPlot(div, data, layout,{displayModeBar: false}); return div } return html`

${vol()}

${val()}

${rte()}

` }35:T78b,{ var data = [ { y: yearly.map(m=>(m[1].volume-yearly[0][1].volume)/yearly[0][1].volume), x: yearly.map(m=>m[0]), text: yearly.map((m,i)=>d3.format(',.3r')(m[1].volume/1000) + ' GWh'), mode: 'lines+markers', line: {shape:'spline',color: d3.schemeDark2[2], width: 2}, marker:{symbol:'square',size:10}, type: 'scatter', hoverinfo: 'x,text', name: 'Volume', showlegend:true, textposition:'top right' }, { y: yearly.map(m=>(m[1].value-yearly[0][1].value)/yearly[0][1].value), x: yearly.map(m=>m[0]), text: yearly.map(m=>d3.format('$,.3r')(m[1].value/1000000) + 'm'), mode: 'lines+markers', line: {shape:'spline',color: d3.schemeDark2[3], width: 2}, marker:{symbol:'135',size:10}, type: 'scatter', hoverinfo: 'x,text', name: 'Value', showlegend:true, textposition:'top right' }, { y: yearly.map(m=>(m[1].rate-yearly[0][1].rate)/yearly[0][1].rate), x: yearly.map(m=>m[0]), text: yearly.map(m=>d3.format('$,.0f')(m[1].rate) + '/MWh'), mode: 'lines+markers', line: {dash:'dash',shape:'spline',color: d3.schemeDark2[4], width: 2}, marker:{size:10}, type: 'scatter', hoverinfo: 'x,text', name: 'Price', showlegend:true, textposition:'top right' }, ] var layout = { height: 220, width: width, font: font, showlegend: true, legend: {orientation:'h',xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { showgrid: true, zeroline: false, ticks:'outside', dtick:1, }, yaxis: { title: '', showgrid: false, zeroline: true, tickformat: '%.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html`${div}

Annual traded volume, value and mean price (top) and relative change in volume, value and price based to 2016 (bottom).

` }36:T71d,{ function priceChart() { let ymax=d3.max(selected_hours,h=>h.price)*1.1 var data = [] days.forEach(d=>{ if (d.weekday==6) { data.push({ x:[d.toJSDate(),d.endOf('day').toJSDate()],showlegend:false, y:[ymax,ymax], fillcolor:make_trans('#f4a4a4',0.3), line: {width:0},mode:'lines', fill:'tozeroy', hoverinfo:'none' }) } if (d.weekday==7) { data.push({ x:[d.toJSDate(),d.endOf('day').toJSDate()],showlegend:false, y:[ymax,ymax], fillcolor:make_trans('#f4a4a4',0.5), line: {width:0},mode:'lines', fill:'tozeroy', hoverinfo:'none' }) } }) data.push({ y: selected_hours.map(h=>h.price), x: selected_hours.map(h=>h.date), mode: 'lines', line: {color:'#555', width: 1.4}, type: 'scatter', hoverinfo: 'x,y', showlegend:false,name: '', }) var layout = { height: 270, width: width, font: font, showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.1}, margin: {l: 90,r: 90,b: 30,t: 30}, xaxis: { range: [selected_hours[0].date,selected_hours[selected_hours.length-1].date], showgrid: true, zeroline: false, ticks:'outside' }, yaxis: { range:[0,ymax], title: '$/MWh', showgrid: true, zeroline: false, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html`${div}` } return html` ${priceChart()}

Hourly market price during the first half of July 2018 showing significant price variation between nighttime offpeak and morning and evening peaks. Peaks are lower on Saturdays and there are no peaks on Sundays.

` }37:T625,{ function priceChart() { var data = [] data.push({ y: selected_hours.map(h=>h.price/d3.max(daily.filter(d=>d.year==month.year && d.month==month.month),v=>v.price_max)), x: selected_hours.map(h=>h.date), mode: 'lines', line: {color:'#555', width: 1.5}, type: 'scatter', hoverinfo: 'x', showlegend:true,name: 'Price % of Monthly Max', }) data.push({ y: selected_hours.map(h=>h.volume/d3.max(daily.filter(d=>d.year==month.year && d.month==month.month),v=>v.power_max)), x: selected_hours.map(h=>h.date), marker: {color:make_trans(d3.schemeDark2[1],0.6)}, line: {width: 0}, type: 'bar', hoverinfo: 'x', showlegend:true,name: 'Volume % of Monthly Max', }) var layout = { height: 270, width: width, font: font, showlegend: true, legend: {orientation: 'h',xanchor: 'left', x:0, y: 1.2}, margin: {l: 90,r: 90,b: 30,t: 30}, xaxis: { range: [selected_hours[0].date,selected_hours[selected_hours.length-1].date], showgrid: true, zeroline: false, ticks:'outside' }, yaxis: { title: '', showgrid: true, zeroline: false, tickformat: '%.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return div } return html` ${priceChart()}

Hourly price and volume relative to the monthly max during the first half of July 2018 showing an inverse relationship between volume and price.

` }38:T6ce,{ let data = selected_months.map((m, i)=>{ const ser = month_profiles[month_dict[m].index] return { y: [...Array(24).keys()].map(h=>ser.get(h)), mode: 'lines', line: {shape: 'spline', color: d3.schemeDark2[month_dict[m].group], width:2}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: m, } }) var layout = { height: 260, width: width, font: font, showlegend: true, legend: {xanchor: 'left', x:1,y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { title: '', showgrid: true, zeroline: false, dtick: 1, ticks:'outside', }, yaxis: { range: [20,170], title: `$/MWh`, showgrid: false, zeroline: false, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

Mean price by time-of-day for selected months. Nighttime, off-peak prices are consistently low between 22h and 6h. A morning peak from 6h to 9h is considerably more pronounced in the cold winter months, June July and August. Daytime, standard, prices are consistent across the year. The timing, average price and length of the evening peak varies through the year. In the winter months, June July and August, the peak has higher average pricing and lasts three hours from 17h to 20h. In the summer months, January, February and March, the peak is shorter and later, from 19h to 21h. In other months the peak is two hours on average from 18h to 20h. There is a one or two hour 'shoulder' of standard prices after the evening peak and before the off-peak. Prices during the evening peak are on average higher than during the morning peak.

` }39:T690,{ let margin = ({top: 20, right: 65, bottom: 0, left: 73}) let height=300 let ys=timeofday.map(d => d.dayofweek == 1 ? month_names[d.month-1] : d.dayofweek == 6 ? 'Sat' : 'Sun') ys.splice(12,0,'') let y = d3.scaleBand() .domain(ys) .range([margin.top, height - margin.bottom]) .padding(0.1) .round(true) let x = d3.scaleLinear() .domain([0, 24]) .range([margin.left, width - margin.right]) .interpolate(d3.interpolateRound) const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", `${width}px`) .style("height", "auto") svg.append("g") .attr('transform', `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(23)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick text") .attr("font-size", 12)) svg.append("g") .attr('transform', `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick text") .attr("font-size", 12)) svg.append("g") .attr('stroke', 'white') .attr('stroke-width', '1') .attr('fill-opacity', '0.5') .selectAll("rect") .data(timeofday_flat) .join("rect") .attr('y', d=>y(d.dayofweek == 1 ? month_names[d.month-1] : d.dayofweek == 6 ? 'Sat' : 'Sun')) .attr('x', d=>x(d.hour)) .attr('width', x(1)-x(0)) .attr('height', y.bandwidth()) .attr('fill', d=>catCol(cats[d.cat].index) ) return html` ${svg.node()}

Average pricing patterns by time of day and month and for Saturdays and Sundays.

` }3a:T82c,{ function yr(ref) { const annual_price=d3.rollups(monthly.filter(m=>m.year<2021),v=>d3.mean(v, d=>d[ref + '_price_mean']), v=>v.lux_date.startOf('year').plus({month:6})) return { y: annual_price.map(m=>Math.round(m[1])), x: annual_price.map(m=>m[0].toJSDate()), type: 'scatter', showlegend:false, mode: 'lines+markers', line: {color: make_trans(catCol(cats[ref].index),0.4),width:2}, marker: {color: make_trans(catCol(cats[ref].index),0.8),size: 10}, hoverinfo: 'y', name: cats[ref].name } } function mon(ref) { return { y: monthly.map(m=>m[ref + '_price_mean']), x: monthly.map(m=>m['date']), mode: 'lines+markers', line: {shape:'spline',color: catCol(cats[ref].index), width: 1.5}, marker:{size:3}, type: 'scatter', hoverinfo: 'x,y', name: cats[ref].name, showlegend:true, connectgaps: false } } var data = [] Object.values(cats).forEach(c=>{ if (Object.fromEntries(selected_cats2.map(c=>[c,c]))[c.name]) { data.push(mon(c.ref)) data.push(yr(c.ref)) } }) data.push( { y: monthly.map(m=>m['price_weight_mean']), x: monthly.map(m=>m['date']), mode: 'lines+markers', line: {shape:'spline', color: '#444', width: 3}, marker:{size:3}, type: 'scatter', hoverinfo: 'none', name: 'Volume Weighted Av', showlegend:true, connectgaps: false }) var layout = { height: 400, width: width, font: font, showlegend: true, legend: {orientation:'h',xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 60,t: 0}, xaxis: { range:years_range, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { title: '$/MWh', range:[0,260], showgrid: true, zeroline: false, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

Monthly average prices by time-of-day categories and overall market volume weighted mean price.

` }3b:T69e,{ function series(ref) { return [{ y: monthly.filter(m=>m[ref + '_price_max']).map(m=>m[ref + '_price_max']).concat(monthly.filter(m=>m[ref + '_price_max']).map(m=>m[ref + '_price_min']).reverse()), x: monthly.filter(m=>m[ref + '_price_max']).map(m=>m['date']).concat(monthly.filter(m=>m[ref + '_price_max']).map(m=>m['date']).reverse()), mode: 'lines', line: {shape:'spline',color: catCol(cats[ref].index), width: 1}, fill:'toself', type: 'scatter', hoverinfo: 'none', name: cats[ref].name, }, { y: monthly.filter(m=>m[ref + '_price_max']).map(m=>m[ref + '_price_mean']), x: monthly.filter(m=>m[ref + '_price_max']).map(m=>m['date']), mode: 'lines', line: {shape:'spline',color: catCol(cats[ref].index), width: 1}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: cats[ref].name, showlegend:false, }, ] } var data = [] Object.values(cats).forEach(c=>{ if (Object.fromEntries(selected_cats2.map(c=>[c,c]))[c.name]) { data=data.concat(series(c.ref)) } }) var layout = { height: 350, width: width, font: font, showlegend: true, legend: {xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 60,t: 0}, xaxis: { range:years_range, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { range:[0,260], title: '$/MWh', showgrid: true, zeroline: false, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

Monthly average prices and range by time-of-day categories.

` }3c:T4e3,{ function series(ref) { return { y: calmonthly.map(v=>v[ref + '_price_mean']), x: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], mode: 'lines', line: {shape: 'spline', color: catCol(cats[ref].index), width:2}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: cats[ref].name, } } var data = [ series('standard'), series('off'), ] var layout = { height: 320, width: width, font: font, showlegend: true, legend: {orientation:'h',xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 50,t: 0}, xaxis: { showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { range:[0,170], title: `US$ / MWh`, showgrid: true, zeroline: false, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

Mean price by calendar month and time-of-day category. Prices are higher during the winter months, June, July and August for all time-of-day categories but particularly for the morning and evening peak periods. There is a smaller rise in peak prices during November.

` }3d:T4a0,{ function series(ref) { return { y: calmonthly.map(v=>v[ref + '_price_mean']/(d3.mean(calmonthly.map(v=>v[ref + '_price_mean'])))), x: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], mode: 'lines', line: {shape: 'spline', color: catCol(cats[ref].index), width:2}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: cats[ref].name, } } var data = [ series('standard'), series('off'), ] var layout = { height: 220, width: width, font: font, showlegend: false, legend: {xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { title: `Price % of
annual mean`, showgrid: true, zeroline: false, tickformat: '.0%', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

Variation in price around the mean annual price for each time-of-day category. The largest variation is for morning peak prices which are highest during winter months.

` }3e:T701,{ let flow_total= monthly.map(m => { return [m.date,d3.sum(flow.filter(f => f.side==='consume' && f.lux_date.toISODate() === m.lux_date.toISODate()),m=>m.flow_sum)] }) function series(ref) { return { y: monthly.map(v=>v[ref + '_volume']/1000), x: monthly.map(h=> h.date), mode: 'lines', marker: {color: make_trans(catCol(cats[ref].index),0.7), width:1}, fill:'tonexty', type: 'bar', hoverinfo: 'x,y', name: cats[ref].name, stackgroup: 'one', } } var data = [ series('standard'), series('off'), { y: monthly.map(v=>v['volume']/1000), x: monthly.map(h=> h.date), mode: 'lines', line: {shape: 'spline', color: 'grey', width:2}, type: 'scatter', hoverinfo: 'x,y', name: 'Total', showlegend:false, }, { y: flow_total.map(v=>v[1]/1000), x: monthly.map(h=> h.date), mode: 'lines', line: {shape: 'spline', color: 'red', width:1.5, dash:'dashdot'}, type: 'scatter', hoverinfo: 'x,y', name: 'Traded', showlegend:true, }, ] var layout = { height: 300, width: width, font: font, barmode: 'stack', showlegend: true, legend: {xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 50,t: 0}, xaxis: { range:years_range, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { range:[0,60], title: `GWh`, showgrid: true, zeroline: false, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

Mean monthlhy matched and traded volumes, total and by time of day. Traded volumes are lower than matched volumes where transmission constraints interfere with wheeling.

` }3f:T478,{ let flow_total= monthly.map(m => { return [m.date,d3.sum(flow.filter(f => f.side==='consume' && f.lux_date.toISODate() === m.lux_date.toISODate()),m=>m.flow_sum)] }) var data = [ { y: monthly.map((_,i)=> ((flow_total[i][1]/1000)/(monthly[i]['volume']/1000)) ), x: monthly.map(h=> h.date), mode: 'lines', line: {shape: 'spline', color: 'grey', width:2}, fill:'tozeroy', type: 'scatter', hoverinfo: 'x,y', name: 'Total', showlegend:false, } ] var layout = { height: 170, width: width, font: font, showlegend: true, legend: {xanchor: 'right', x:1, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: {range:years_range, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { title: 'Transmission
Access', showgrid: true, zeroline: false, tickformat: '.0%', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html`

${div}

Effect of transmission constraints: proportion of traded versus matched volume.

` }40:T576,{ function series(ref) { return [ { y: monthly.filter(m=>m[ref + '_power']).map(m=>m[ref + '_power']), x: monthly.filter(m=>m[ref + '_power']).map(m=>m['date']), mode: 'lines+markers', line: {shape:'',color: catCol(cats[ref].index), width: 1.2}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: cats[ref].name, showlegend:true, connectgaps:false, }, ] } var data = [] Object.values(cats).forEach(c=>{ data=data.concat(series(c.ref)) }) data.push( { y: monthly.map(m=>m.volume/24/31), x: monthly.map(m=>m.date), mode: 'lines', line: {shape:'spline',color: 'black', width: 2.5}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: '', showlegend:false, }) var layout = { height: 280, width: width, font: font, showlegend: true, legend: {orientation:'h',xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 25,t: 0}, xaxis: {range:years_range, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { range: [0,165], title: 'MW', showgrid: true, zeroline: false, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html`

${div}

Traded power by month and time of day.

` }41:T541,{ let value_total= Array.from(d3.rollup(flow.filter(f=>f.side=='consume'), v=>d3.sum(v,p=>p.value), f=>f.date)) function series(ref) { return { y: monthly.map(v=>v[ref + '_value']/1000000), x: monthly.map(h=> h.date), mode: 'lines', marker: {shape: 'spline', color: make_trans(catCol(cats[ref].index),0.7), width:1}, fill:'tonexty', type: 'bar', hoverinfo: 'x,y', name: cats[ref].name, stackgroup: 'one', } } var data = [ series('standard'), series('off'), { y: monthly.map(v=>v['value']/1000000), x: monthly.map(h=> h.date), mode: 'lines', line: {shape: 'spline', color: 'grey', width:2}, type: 'scatter', hoverinfo: 'x,y', name: 'Total', showlegend:false, }, ] var layout = { height: 300, width: width, font: font, barmode:'stack', showlegend: true, legend: {xanchor: 'right', x:1, y: 1}, margin: {l: 90,r: 90,b: 50,t: 0}, xaxis: { range:years_range, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { title: `$m`, showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html`

${div}

` }42:T431,{ let data = selected_months.map((m, i)=>{ const ser = month_profiles_volume[month_dict[m].index] return { y: [...Array(24).keys()].map(h=>ser.get(h)), mode: 'lines', line: {shape: 'spline', color: d3.schemeCategory10[month_dict[m].group], width:2}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: m, } }) var layout = { height: 300, width: width, font: font, showlegend: true, legend: {xanchor: 'left', x:1,y: 1}, margin: {l: 90,r: 90,b: 50,t: 0}, xaxis: { title: 'Hour', showgrid: true, zeroline: false, dtick: 1, ticks:'outside', }, yaxis: { range:[0,27], title: `MW`, showgrid: false, zeroline: false, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

Daily volume profiles by calendar month. Volumes are consistently higher during September, October and November and lower from February to May and June.

` }43:T529,{ function series(ref) { return { y: calmonthly.map(v=>v[ref + '_volume']/1000), x: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], marker: {shape: 'spline', color: make_trans(catCol(cats[ref].index),0.8), width:1}, type: 'bar', hoverinfo: 'x,y', name: cats[ref].name, } } var data = [ series('standard'), series('off'), { y: calmonthly.map(v=>v['volume']/1000), x: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], mode: 'lines', line: {shape: 'spline', color: 'grey', width:2}, type: 'scatter', hoverinfo: 'x,y', name: 'Total', showlegend:false, } ] var layout = { height: 200, width: width, barmode:'stack', font: font, showlegend: true, legend: {orientation:'h',xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { showticklabels:true, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { range:[0,11], title: `GWh`, showgrid: true, zeroline: false, tickformat: '.1f', ticks:'outside' }, }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html`

${div}

` }44:T557,{ function series(ref) { return { y: calmonthly.map(v=>v[ref + '_value']/1000000), x: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], marker: {color: make_trans(catCol(cats[ref].index),0.8), width:1}, type: 'bar', hoverinfo: 'x,y', name: cats[ref].name, } } var data = [ series('standard'), series('off'), { y: calmonthly.map(v=>v['value']/1000000), x: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], mode: 'lines', line: {shape: 'spline', color: 'grey', width:2}, type: 'scatter', hoverinfo: 'x,y', name: 'Total', showlegend:false, } ] var layout = { height: 200, width: width, font: font, barmode:'stack', showlegend: true, legend: {orientation:'h',xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { showticklabels:true, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { range:[0,0.7], title: `$m`, showgrid: true, zeroline: false, tickformat: ',.1f', ticks:'outside' }, }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

Mean monthly volume (top) and market value (bottom) by time-of-day category and month.

` }45:T8ce,{ var mons = monthly.slice(0,48) var data = [ { y: mons.map((v,i)=> { if(i>=12) { return (v['volume']-mons[i-12]['volume'])/1000 } else { return null } }), x: [...Array(48).keys()], mode: 'lines', line: {shape: 'spline', color: d3.schemeCategory10[8], width:2}, type: 'scatter', hoverinfo: 'x,y', name: '1st Difference t-12 months', }, { y: mons.map((v,i)=> { return (v['volume']-calmonthly[v.lux_date.month-1]['volume'])/1000 }), x: [...Array(48).keys()].map(x=>x+1), mode: 'lines', line: {shape: 'spline', color: d3.schemeCategory10[1], width:2}, type: 'scatter', hoverinfo: 'x,y', name: '1st Difference 4 year mean', }, ] let linearRegression = ss.linearRegression(data[0].x.map((x,i)=>[x,data[0].y[i]])) let linearRegressionLine = ss.linearRegressionLine(linearRegression) let linearRegression2 = ss.linearRegression(data[1].x.map((x,i)=>[x,data[1].y[i]])) let linearRegressionLine2 = ss.linearRegressionLine(linearRegression2) data.push({ x:[0, 48], y:[linearRegressionLine(1), linearRegressionLine(48)], mode: 'lines', line: {color: d3.schemeCategory10[8], width:1.5, dash:'dash'}, name: `${d3.format('.3f')(linearRegression.m)}x ${d3.format('.0f')(linearRegression.b)}` }) data.push({ x:[0, 48], y:[linearRegressionLine2(1), linearRegressionLine2(48)], mode: 'lines', line: {color: d3.schemeCategory10[1], width:1.5, dash:'dash'}, name: `${d3.format('.3f')(linearRegression2.m)}x ${d3.format('.0f')(linearRegression2.b)}` }) var layout = { height: 300, width: width, font: font, showlegend: true, legend: {xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { title: `GWh / month`, showgrid: true, zeroline: false, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

Seasonally adjusted mean monthly volumes by two adjustment methods with resulting trends.

` }46:T7a7,{ function unadjust(ref) { return monthly.map((v,i)=> { return ((v[ref + '_price_mean'] ?? NaN) - monthly[12][ref + '_price_mean']) }) } function adjust(ref) { let zero = monthly[12][ref + '_price_mean']-calmonthly[monthly[12].lux_date.month-1][ref + '_price_mean'] return monthly.map((v,i)=> { return ((v[ref + '_price_mean'] ?? NaN) - calmonthly[v.lux_date.month-1][ref + '_price_mean']-zero) }) } function series(ref, adju) { let ys=[] if (adju) {ys=adjust(ref)} else {ys=unadjust(ref)} let ad = ((adju && adjusted=='true') || (!adju && adjusted=='false')) return [ { y: ys, x: monthly.map(m=>m['date']).concat(monthly.map(m=>m['date']).reverse()), mode: 'lines', line: {shape: 'spline', opacticy:0.5, color: ad ? catCol(cats[ref].index) : '#AAA', width: ad ? 2 : 1}, type: 'scatter', hoverinfo: ad ? 'x,y':'none', showlegend:false,name: cats[ref].name, connectgaps: false }] } var data = [] Object.values(cats).forEach(c=>{ //if (Object.fromEntries(selected_cats2.map(c=>[c,c]))[c.name]) { data=data.concat(series(c.ref, true)) data=data.concat(series(c.ref, false)) //} }) var layout = { height: 300, width: width, font: font, showlegend: true, legend: {xanchor: 'left', x:0, y: 1}, margin: {l: 90,r: 90,b: 60,t: 0}, xaxis: { range:years_range, showgrid: true, zeroline: false, ticks:'outside', }, yaxis: { range: [-70,160], title: 'US$/MWh', showgrid: true, zeroline: true, tickformat: '.0f', ticks:'outside' } }; const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}); return html` ${div}

Mean monthly price rebased to January 2018 unadjusted and seasonally adjusted. Seasonal adjustment based on 2016-2019 mean monthly price.

` }47:T855,{ let data=[] function get_val(p) { if (share_type=='mwh') { return p.flow_sum } else { return p.value } } let flow_nodes= d3.rollup(flow_filtered(), v=>d3.sum(v,p=>Math.abs(get_val(p))), f=>f.node, f=>f.date, f=>f.flow_sum<0?'supply':'consume') let flow_total= d3.rollup(flow_filtered(), v=>d3.sum(v,p=>get_val(p)), f=>f.date, f=>f.flow_sum<0?'supply':'consume') function series(node_ref) { if (flow_nodes.get(node_ref)) { const nde=Array.from(flow_nodes.get(node_ref)) function series_side (side) { data.push({ y: nde.map((v,i)=>v[1].get(side)/flow_total.get(v[0]).get(side)), x: nde.map(h=> h[0]), mode: 'lines', marker: {opacity: 0.8,shape:'spline', color: d3.schemeTableau10[node_dict[node_ref].col], width: 2}, type: 'bar', hoverinfo: 'x,y', showlegend:side=='consume', name: node_dict[node_ref].member }) } series_side('consume') series_side('supply') } } nodes.forEach(n=>{ if (Object.fromEntries(selected_nodes.map(c=>[c,c]))[n.ref]) { series(n.ref) } }) var layout = { height: 350, width: width, barmode: 'relative', font: font, showlegend: true, legend: {xanchor: 'left', x:1, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { range:[ monthly[0].lux_date.minus({month:0.5}).toJSDate(), monthly[monthly.length-1].lux_date.plus({month:0.5}).toJSDate() ], showgrid: true, zeroline: false, ticks:'outside' }, yaxis: { title:share_type=='mwh'?'MWh':'$', range:[-1.05,1.05], showgrid: true, zeroline: true, tickformat: '.0%', ticks:'outside' }, annotations: [{ xref: 'paper', yref: 'paper', showarrow: false, x: 0.07, y: 0.35, font: {color: "#555",size: 17}, text: 'Supply', }, { xref: 'paper', yref: 'paper', showarrow: false, x: 0.07, y: 0.65, font: {color: "#555",size: 17}, text: 'Consume', }] } const div=DOM.element('div') plt.newPlot(div, data, layout,{displayModeBar: false}) return html` ${div} ` }48:T8a2,{ let flow_nodes= d3.rollup(flow_filtered(), v=>d3.sum(v,p=>p.flow_sum), f=>f.node, f=>f.date) let data=[] function series(node_ref) { if (flow_nodes.get(node_ref)) { const nde=Array.from(flow_nodes.get(node_ref)) data.push( { y: nde.map(v=>(v[1])/1000), x: nde.map(h=> h[0]), mode: 'lines+markers', line: {shape:'', color: d3.schemeTableau10[node_dict[node_ref].col], width: 2}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: node_dict[node_ref].member, } ) } } nodes.forEach(n=>{ if (Object.fromEntries(selected_nodes.map(c=>[c,c]))[n.ref]) { series(n.ref) } }) var layout = { height: 400, width: width, font: font, hovermode: 'closest', showlegend: true, legend: {xanchor: 'left', x:1, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { range:[monthly[0].date,monthly[monthly.length-1].date], showgrid: true, zeroline: false, ticks:'outside' }, yaxis: { title: 'GWh', showgrid: true, zeroline: true, tickformat: '.0f', ticks:'outside' }, annotations: [{ xref: 'paper', yref: 'paper', showarrow: false, x: 0.07, y: 0.10, font: {color: "#777",size: 18}, text: 'Supply Side', }, { xref: 'paper', yref: 'paper', showarrow: false, x: 0.07, y: 0.90, font: {color: "#777",size: 18}, text: 'Consumption Side', }] }; const div=DOM.element('div') let msg=1 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.6) plt.restyle(div, 'opacity', vals) var vals2 = div.data.map((_, i) => i === curveNumber ? 'tozeroy' : '') plt.restyle(div, 'fill', vals2) }) 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) var vals2 = div.data.map((_, i) => i === curveNumber ? '' : '') plt.restyle(div, 'fill', vals2) }) return html`

${div} ` }49:T8ac,{ let flow_nodes= d3.rollup(flow_filtered(), v=>d3.mean(v,p=>p.power), f=>f.node, f=>f.date) let data=[] function series(node_ref) { if (flow_nodes.get(node_ref)) { const nde=Array.from(flow_nodes.get(node_ref)) data.push( { y: nde.map(v=>(v[1])), x: nde.map(h=> h[0]),connectgaps:false, mode: 'lines+markers', line: {shape:'', color: d3.schemeTableau10[node_dict[node_ref].col], width: 2}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: node_dict[node_ref].member, } ) } } nodes.forEach(n=>{ if (Object.fromEntries(selected_nodes.map(c=>[c,c]))[n.ref]) { series(n.ref) } }) var layout = { height: 400, width: width, font: font, hovermode: 'closest', showlegend: true, legend: {xanchor: 'left', x:1, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { range:[monthly[0].date,monthly[monthly.length-1].date], showgrid: true, zeroline: false, ticks:'outside' }, yaxis: { title: 'MW', showgrid: true, zeroline: true, tickformat: '.0f', ticks:'outside' }, annotations: [{ xref: 'paper', yref: 'paper', showarrow: false, x: 0.07, y: 0.10, font: {color: "#777",size: 18}, text: 'Supply Side', }, { xref: 'paper', yref: 'paper', showarrow: false, x: 0.07, y: 0.90, font: {color: "#777",size: 18}, text: 'Consumption Side', }] }; const div=DOM.element('div') let msg=1 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.6) plt.restyle(div, 'opacity', vals) var vals2 = div.data.map((_, i) => i === curveNumber ? 'tozeroy' : '') plt.restyle(div, 'fill', vals2) }) 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) var vals2 = div.data.map((_, i) => i === curveNumber ? '' : '') plt.restyle(div, 'fill', vals2) }) return html`

${div} ` }4a:T722,{ let flow_nodes=d3.rollup(flow_filtered(), v=>(d3.sum(v,p=>p.value)), f=>f.side, f=>f.node, f=>f.date) function series(node_ref,side) { const sde=flow_nodes.get(side) if (sde.get(node_ref)) { const nde=sde.get(node_ref) data.push( { y: monthly.map(h=> nde.get(h.date)/1000), x: monthly.map(h=> h.date), mode: 'lines+markers', line: {shape:'', color: d3.schemeTableau10[node_dict[node_ref].col], width: 2}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: node_dict[node_ref].member,connectgaps:false, showlegend: side=='consume' }) } } let data=[] nodes.forEach(n=>{ if (Object.fromEntries(selected_nodes.map(c=>[c,c]))[n.ref]) { series(n.ref, 'consume') series(n.ref, 'supply') } }) var layout = { height: 400, width: width, font: font, hovermode: 'closest', showlegend: true, legend: {xanchor: 'left', x:1, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { range:[monthly[0].date,monthly[monthly.length-1].date], showgrid: true, zeroline: false, ticks:'outside' }, yaxis: { title: '$ (000s)', showgrid: true, zeroline: true, tickformat: ',.0f', ticks:'outside' } }; const div=DOM.element('div') let msg=1 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.4) 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 html`

${div}

` }4b:T787,{ let flow_nodes=d3.rollup(flow_filtered(), v=>(d3.sum(v,p=>p.value)/d3.sum(v,p=>p.flow_sum)), f=>f.side, f=>f.node, f=>f.date) function series(node_ref,side) { const sde=flow_nodes.get(side) if (sde.get(node_ref)) { const nde=sde.get(node_ref) data.push( { // y: nde.map(v=> v[1] * (side=='supply'? -1: 1)), y: monthly.map(h=> nde.get(h.date)* (side=='supply'? -1: 1)), x: monthly.map(h=> h.date), mode: 'lines+markers', line: {shape:'', color: d3.schemeTableau10[node_dict[node_ref].col], width: 2}, fill:'', type: 'scatter', hoverinfo: 'x,y', name: node_dict[node_ref].member,connectgaps:false, showlegend: side=='consume' }) } } let data=[] nodes.forEach(n=>{ if (Object.fromEntries(selected_nodes.map(c=>[c,c]))[n.ref]) { series(n.ref, 'consume') series(n.ref, 'supply') } }) var layout = { height: 400, width: width, font: font, hovermode: 'closest', showlegend: true, legend: {xanchor: 'left', x:1, y: 1}, margin: {l: 90,r: 90,b: 30,t: 0}, xaxis: { range:[monthly[0].date,monthly[monthly.length-1].date], showgrid: true, zeroline: false, ticks:'outside' }, yaxis: { title: '$/MWh', showgrid: true, zeroline: true, tickformat: ',.0f', ticks:'outside' } }; const div=DOM.element('div') let msg=1 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.4) 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 html`

${div}

` }4c:T54a,nodes=[ {ref: 'BOT', country: 'Botswana', member:'BPC', col: 1, offset:[-220,100], leader:true}, {ref: 'MOZ', country: 'Mozambique', member:'EDM',col: 2, offset:[130,60], leader:true}, {ref: 'HCB', country: 'Mozambique', member:'HCB',col: 0, offset:[190,0], leader:true, leader_bottom:true}, {ref: 'NAM', country: 'Namibia', member:'NamPower',col: 3, offset:[-150,20], leader:true, leader_bottom:true}, {ref: 'RSA', country: 'South Africa', member:'Eskom',col: 4, offset:[-30,30]}, {ref: 'ZAMC', country: 'Zambia', member:'CEC',col: 5, offset:[-290,-100], leader:true, leader_bottom:true}, {ref: 'ZAMZ', country: 'Zambia', member:'ZESCO',col: 7, offset:[-320,50], leader:true, leader_bottom:true}, {ref: 'ZIM', country: 'Zimbabwe', member:'ZESA',col: 9, offset:[160,120], leader:true}, {ref: 'LES', country: 'Lesotho', member:'LEC',col: 8, offset:[60,110], leader:true}, {ref: 'ESW', country: 'Swaziland', member:'EEC',col: 9, offset:[110,80], leader:true}, {ref: 'DRC', country: 'DRC', member:'SNEL',col: 3, offset:[20,30]}, {ref: 'TNZ', country: 'Tanzania', member:'TENESCO',col: 2, offset:[170,-25], leader:true, small:true}, {ref: 'MAL', country: 'Malawi', member:'ESCOM',col: 6, offset:[170,-50], leader:true, small:true}, {ref: 'ANG', country: 'Angola', member:'RNT',col: 2, offset:[-150,-0], leader:true, small:true}, ]4d:[{"id":"35aaaf46d2f0b0e0942f5741496802412d9c74840714bc2041866c57d3dbbf8e73e3b3809473569f9beb2fdd0bb0f48e726411346298801060fad9268a7dbdbe","href":"https://static.observableusercontent.com/files/35aaaf46d2f0b0e0942f5741496802412d9c74840714bc2041866c57d3dbbf8e73e3b3809473569f9beb2fdd0bb0f48e726411346298801060fad9268a7dbdbe","name":"APPLogo.png","type":"image/png","lastModified":1622536665707.225,"size":57100},{"id":"057ef0b5dd0e520a9be2a77bad99a70d2f85fdd133ca99dc821899e6ac74130d84d5eb7a818867487c356c8b893dbf6d256953734722a765b4719da9e513de10","href":"https://static.observableusercontent.com/files/057ef0b5dd0e520a9be2a77bad99a70d2f85fdd133ca99dc821899e6ac74130d84d5eb7a818867487c356c8b893dbf6d256953734722a765b4719da9e513de10","name":"sapp.json","type":"application/json","lastModified":1622536665707.225,"size":55475}] 2f:{"title":"Forward Physical Monthly Market (FPM)","cells":[{"id":0,"value":"

Forward Physical Monthly Market (FPM)

","pinned":false,"hidden":false,"mode":"html"},{"id":4173,"value":"html`\nSAPP was created in August 1995. SAPP has twelve member countries represented by their respective electric power utilities organised through SADC.\n

\nSAPP established the Short-Term Energy Market in April 2001. From January 2004 SAPP started the development of a competitive electricity market for the SADC region.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3795,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4307,"value":"html`\n

Market Patterns

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

Daily Price and Volume

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1924,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2427,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4229,"value":"html`\n

Annual Price, Value and Volume

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3571,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3518,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":4232,"value":"html`\n

Intra-day Price Patterns

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4312,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4344,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"viewof selected_months = {\n const form = html`\n `\n\n form.oninput = () => {\n form.value = Array.prototype.filter\n .call(form.input, i => i.checked)\n .map(i => i.value)\n }\n form.oninput()\n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3628,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":4247,"value":"html`\n

Time-of-day prices

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"viewof selected_cats2 = {\n const form = html`\n `\n\n form.oninput = () => {\n form.value = Array.prototype.filter\n .call(form.input, i => i.checked)\n .map(i => i.value)\n }\n form.oninput()\n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3001,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":4384,"value":"{ \n var data = [{\n y: cats_means.map(m=>m[1]), \n x: cats_means.map(m=>cats[m[0]].name),\n text: cats_means.map((m,i)=>d3.format('$,.2r')(m[1]) +'/MWh' ), textposition:'auto',\n marker: {color: cats_means.map(m=>catCol(cats[m[0]].index))},\n type: 'bar', hoverinfo: 'none', showlegend:false\n },]\n\n var layout = {\n height: 240, width: width*.5, font: font, barmode:'stack',\n showlegend: true, legend: {orientation:'h',xanchor: 'left', x:0, y: 1},\n margin: {l: 65,r: 10,b: 30,t: 0},\n xaxis: { showgrid: true, zeroline: false, ticks:'outside', dtick:1},\n yaxis: {\n range:[0,110],\n title: '$/MWh', showgrid: false, zeroline: true, tickformat: ',.0f', ticks:'outside'\n }};\n\n const div=DOM.element('div')\n plt.newPlot(div, data, layout,{displayModeBar: false});\n \n return html`\n ${div}\n

Overall average prices between 2016 and 2020.

\n ` \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2122,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":4253,"value":"html`\n

Price seasonality

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2262,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1348,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":4260,"value":"html`\n

Market volume and traded power

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":2227,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":4281,"value":"html`\n

Market traded value

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3454,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":4256,"value":"html`\n

Volume and value seasonality

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2818,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":3480,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":4452,"value":"html`\n

Volume and value seasonality

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"id":2562,"value":"viewof adjusted = {\n const form = html`\n `\n \n form.oninput = () => {\n form.value = form.period_select.value\n }\n form.oninput()\n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1369,"value":"$46","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"html`\n

Supply and Consumption Patterns

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1749,"value":"viewof selected_nodes = {\n const form = html`\n `\n\n form.oninput = () => {\n form.value = Array.prototype.filter\n .call(form.input, i => i.checked)\n .map(i => i.value)\n }\n form.oninput()\n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2654,"value":"viewof cat = {\n const form = html`\n `\n \n form.oninput = () => {\n form.value = form.period_select.value\n }\n form.oninput()\n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3312,"value":"viewof share_type = {\n const form = html`\n `\n \n form.oninput = () => {\n form.value = form.period_select.value\n }\n form.oninput()\n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"$47","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"$48","pinned":false,"hidden":false,"mode":"ojs"},{"id":3441,"value":"$49","pinned":false,"hidden":false,"mode":"ojs"},{"id":3291,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs"},{"id":3285,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1469,"value":"md `\n## Setup\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4653,"value":"function catCol(index) {\n return d3.schemeCategory10[index]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4655,"value":"function sideCol(index) {\n return d3.schemeCategory10[index]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3972,"value":"countries={\n return {\n 'Botswana': {ref: 'BOT', country: 'Botswana', col: 1},\n 'Mozambique': {ref: 'MOZ', country: 'Mozambique', col: 2},\n 'Namibia': {ref: 'NAM', country: 'Namibia', col: 3},\n 'South Africa': {ref: 'RSA', country: 'South Africa',col:7 },\n 'Zambia': {ref: 'ZAM', country: 'Zambia', col: 5},\n 'Zimbabwe': {ref: 'ZIM', country: 'Zimbabwe', col: 4},\n 'Lesotho': {ref: 'LES', country: 'Lesotho', col: 8},\n 'Swaziland': {ref: 'ESW', country: 'Swaziland', col: 9},\n 'DRC': {ref: 'DRC', country: 'DRC', col: 9},\n 'Tanzania': {ref: 'TNZ', country: 'Tanzania', col: 3},\n 'Malawi': {ref: 'MAL', country: 'Malawi', col: 6},\n 'Angola': {ref: 'ANG', country: 'Angola', col: 2},\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3969,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs"},{"id":3927,"value":"sapp=topojson.feature(sapptopo, sapptopo.objects.sapp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3798,"value":"sapptopo=FileAttachment(\"sapp.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3929,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3027,"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":3491,"value":"years_range= [monthly[0].lux_date.plus({month:-0.5}).toJSDate(),monthly[monthly.length-1].lux_date.plus({month:0.5}).toJSDate()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4377,"value":"cats_means={\n return [\n ['off', d3.mean(monthly, d=>d.off_price_mean)], \n ['standard', d3.mean(monthly, d=>d.standard_price_mean)],\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3512,"value":"yearly=d3.rollups(monthly.filter(d=>d.year<2021),m=>{\n return {\n rate: d3.sum(m,d=>d.value)/d3.sum(m,d=>d.volume),\n value:d3.sum(m,d=>d.value),\n volume:d3.sum(m,d=>d.volume),\n }\n},m=>m.year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1914,"value":"md `\n### Daily\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4314,"value":"days=[...Array(month.lux_date.daysInMonth).keys()].map(i=>month.lux_date.plus({day:i}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4316,"value":"month=monthly[selected_month]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4318,"value":"selected_month=30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"md `\n### Flows\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1521,"value":"node_dict=Object.fromEntries(nodes.map(n=>[n.ref,n]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4680,"value":"flow_filtered()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3409,"value":"function flow_filtered() {\n if (cat=='all') {\n return flow\n } else {\n return flow.filter(f=>f.cat==cat)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"md `\n### Months\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"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":1094,"value":"month_dict={\n return {\n 'Jan':{index: 0, group: 1},\n 'Feb':{index: 1, group: 1},\n 'Mar':{index: 2, group: 6},\n 'Apr':{index: 3, group: 6},\n 'May':{index: 4, group: 2},\n 'Jun':{index: 5, group: 2},\n 'Jul':{index: 6, group: 3},\n 'Aug':{index: 7, group: 3},\n 'Sep':{index: 8, group: 4},\n 'Oct':{index: 9, group: 4},\n 'Nov':{index: 10, group: 4},\n 'Dec':{index: 11, group: 1},\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"md `\n### Calendar Months\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"month_profiles=[...Array(12).keys()].map(m=>month_profile_price(m+1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2816,"value":"month_profiles_volume=[...Array(12).keys()].map(m=>month_profile_volume(m+1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2814,"value":"function month_profile_volume(month_no) {\n return d3.rollup(calmonthly_hours.filter(m=>m.month==month_no),v=>d3.mean(v,m=>m.volume),t=>t.hour)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"function month_profile_price(month_no) {\n return d3.rollup(calmonthly_hours.filter(m=>m.month==month_no),v=>d3.mean(v,m=>m.price),t=>t.hour)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"md `\n### Hours and Categories\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3680,"value":"timeofday_flat={\n let o=[]\n timeofday.forEach(t=>{\n [...Array(24).keys()].forEach((h,i)=>{\n o.push({month: t.month, hour: i, dayofweek: t.dayofweek, cat: t[i]}) \n })\n })\n return o\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2125,"value":"cats = {\n return {\n standard: {index: 2, name: 'Standard', ref: 'standard'},\n off: {index: 0, name: 'Off-peak', ref: 'off'}, \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4499,"value":"md `\n### Data Load\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3625,"value":"timeofday = {\n const raw = (await d3.csv(base_url + market_ref + \"_timeofday.csv?\" + Math.floor(Math.random() * 1000),d3.autoType))\n \n return raw\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2118,"value":"monthly = {\n const raw = (await d3.csv(base_url + market_ref + \"_monthly.csv?\" + Math.floor(Math.random() * 1000),d3.autoType))\n raw.map(r=>{\n r.lux_date=DateTime.fromObject({year: r.year, month: r.month, day: 1})\n r.date=r.lux_date.toJSDate()\n })\n return raw\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2260,"value":"calmonthly = {\n const raw = (await d3.csv(base_url + market_ref + \"_calmonthly.csv?\" + Math.floor(Math.random() * 1000),d3.autoType))\n \n return raw\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2289,"value":"calmonthly_hours = {\n const raw = (await d3.csv(base_url + market_ref + \"_calmonthly_hours.csv?\" + Math.floor(Math.random() * 1000),d3.autoType))\n \n return raw\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1918,"value":"daily = {\n const raw = (await d3.csv(base_url + market_ref + \"_daily.csv?\" + Math.floor(Math.random() * 1000),d3.autoType))\n raw.forEach(r=>{\n r.lux_date=DateTime.fromObject({year: r.year, month: r.month, day: r.day})\n r.date=r.lux_date.toJSDate()\n }) \n return raw\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4321,"value":"selected_hours = {\n const url=`https://data.africanpowerprojects.com/sapp/input/monthly/dam_2018_07.json?${Math.floor(Math.random() * 1000)}`\n \n const rw = (await d3.json(url,d3.autoType))\n rw.shift()\n \n let hours=[]\n rw.forEach(h=> {\n const lux = DateTime.fromFormat(h[0].slice(1,15),'yyyy/LL/dd) HH')\n if (lux.isValid) {\n hours.push({\n raw: h,\n lux_date: lux,\n hour: parseInt(h[0].slice(13,15)),\n price: parseFloat(h[1]),\n volume: parseInt(h[2])\n })\n }\n })\n hours=hours.map(h=>{\n h.date=h.lux_date.toJSDate()\n return h\n })\n return hours.filter(d=>d.lux_date.day<14)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2645,"value":"flow = {\n const raw = (await d3.csv(base_url + market_ref + \"_flow_monthly_cat.csv?\" + Math.floor(Math.random() * 1000),d3.autoType))\n raw.forEach(r=>{\n r.lux_date=DateTime.fromObject({year: r.year, month: r.month, day: 1})\n r.date = r.lux_date.toJSDate()\n })\n return raw\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4509,"value":"base_url='https://data.africanpowerprojects.com/sapp/output/'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4512,"value":"market_ref='fpm'","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"md `\n### Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"font = ({\n family: 'Courier New, monospace',\n size: 13,\n color: '#6f6f6f'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"function movingAverage(values, N) {\n let i = 0;\n let sum = 0;\n const means = new Float64Array(values.length).fill(NaN);\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n sum += values[i];\n }\n for (let n = values.length; i < n; ++i) {\n sum += values[i];\n means[i - Math.floor(N / 2)] = sum / N;\n sum -= values[i - N + 1];\n }\n return means;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"plt = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"ss = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4407,"value":"style=html`css `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2137,"value":"luxon = require(\"luxon@1/build/amd/luxon.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"DateTime = luxon.DateTime","pinned":false,"hidden":false,"mode":"ojs"},{"id":4684,"value":" pageAnalytics = {\n const id = 'G-R36F5ZJPWZ';\n await require(`https://www.googletagmanager.com/gtag/js?id=${id}`).catch(() => {});\n const dataLayer = window.dataLayer = window.dataLayer || [];\n const location = html``;\n gtag('js', new Date());\n gtag('config', id, {\n 'page_path': location.pathname,\n 'page_location' : location.href\n });\n return md`^{[Google Analytics] (https://www.google.com/analytics/terms/).}`;\n function gtag() { dataLayer.push(arguments); }\n }","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W4d","stdlib":"1","titling":"auto"}