31:Tdcd,chart = { replay const svg = d3.create("svg") .attr("viewBox", [0, 0, width*1.2, height]); svg.append("image") .attr("xlink:href",await FileAttachment("app.png").url()) .attr("x",width-120) .attr("y",0) .attr("width",100) function addLegend(col, no, text) { const xDate=new Date(2016, 0) const yVal = 320 - (no-1) * 20 svg.append("g") .attr("fill", make_trans(col,0.6)) .append("rect") .attr("x", x( xDate)+2) .attr("y", y(yVal)) .attr("height", 13) .attr("width", 25) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("fill", "#555") .append("text") .text(text) .attr("x", x(xDate) + 30) .attr("y", y(yVal)+12) } addLegend(marketCol(markets['dam'].col) , 1, "Day-ahead") svg.append("path") .datum(monthly) .attr("fill", make_trans(marketCol(markets['dam'].col),0.6)) .attr("d", initialAreaDam) // initial state (line at the bottom) .transition().duration(2500) .attr("d", areaDam) .on("end", () => { addLegend(marketCol(markets['idm'].col), 2, "Intraday") svg.append("path") .datum(monthly) .attr("fill", make_trans(marketCol(markets['idm'].col),0.6)) .attr("d", initialAreaIdm) // initial state (line at the bottom) .transition().duration(2000) .attr("d", areaIdm) .on("end", () => { addLegend(marketCol(markets['fpm'].col), 3, "Future Physical Monthly") svg.append("path") .datum(monthly) .attr("fill", make_trans(marketCol(markets['fpm'].col),0.6)) .attr("d", initialAreaFpm) // initial state (line at the bottom) .transition().duration(2000) .attr("d", areaFpm) .on("end", () => { addLegend(marketCol(markets['fpw'].col), 4, "Future Physical Weekly") svg.append("path") .datum(monthly) .attr("fill", make_trans(marketCol(markets['fpw'].col),0.6)) .attr("d", initialAreaFpw) // initial state (line at the bottom) .transition().duration(2000) .attr("d", areaFpw) // final state .on("end", () => { svg.append("path") .datum(avs) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d",d3.line().x((d,i) => x(d.date)).y(d => y(0))) .transition().duration(2000) .attr("d",d3.line().x((d,i) => x(d.date)).y(d => y(d.value/1000)) ) .on("end", () => { svg.append("text") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("fill", "steelblue") .attr("font-weight", 'bold') .text('Pre-COVID average') .attr("x", x(new Date(2020,1))) .attr("y", y(250)) }) }) }) }) }) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis) return svg.node(); }32: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}, ]33:[{"id":"203124229a3795bf0d561f27cd3793f8b19a7eca98ca49703d315f9c16f8b955ecf3bb049f655d108dcafbef59cb330be647735297b5609316eff1369c575685","href":"https://static.observableusercontent.com/files/203124229a3795bf0d561f27cd3793f8b19a7eca98ca49703d315f9c16f8b955ecf3bb049f655d108dcafbef59cb330be647735297b5609316eff1369c575685","name":"app.png","type":"image/png","lastModified":1623939790956.355,"size":14211}] 2f:{"title":"SAPP Market Volumes","cells":[{"id":0,"value":"md`# SAPP Market Volumes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":548,"value":"

Setup

","pinned":false,"hidden":false,"mode":"html"},{"id":524,"value":"function catCol(index) {\n return d3.schemeCategory10[index]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"initialAreaDam = d3.area()\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"areaDam = d3.area()\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.dam.volume/1000))","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"initialAreaIdm = d3.area()\n .x(d => x(d.date))\n .y0(d => y(d.dam.volume/1000))\n .y1(d => y(d.dam.volume/1000))","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"initialAreaFpm = d3.area()\n .x(d => x(d.date))\n .y0(d => {\n return y((d.dam.volume + (d.idm ? d.idm.volume : 0))/1000)\n })\n .y1(d => {\n return y((d.dam.volume + (d.idm ? d.idm.volume : 0))/1000)\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"initialAreaFpw = d3.area()\n .x(d => x(d.date))\n .y0(d => {\n return y((d.dam.volume + (d.idm ? d.idm.volume : 0) + (d.fpm ? d.fpm.volume : 0))/1000)\n })\n .y1(d => {\n return y((d.dam.volume + (d.idm ? d.idm.volume : 0) + (d.fpm ? d.fpm.volume : 0))/1000)\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"areaFpw = d3.area()\n .x(d => x(d.date))\n .y0(d => {\n return y((d.dam.volume + (d.idm ? d.idm.volume : 0) + (d.fpm ? d.fpm.volume : 0))/1000)\n })\n .y1(d => {\n return y((d.dam.volume + (d.idm ? d.idm.volume : 0) + (d.fpm ? d.fpm.volume : 0) + (d.fpw ? d.fpw.volume : 0))/1000)\n }) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"areaFpm = d3.area()\n .x(d => x(d.date))\n .y0(d => y((d.dam.volume + (d.idm ? d.idm.volume : 0))/1000))\n .y1(d => {\n return y((d.dam.volume + (d.idm ? d.idm.volume : 0) + (d.fpm ? d.fpm.volume : 0))/1000)\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"areaIdm = d3.area()\n .x(d => x(d.date))\n .y0(d => y(d.dam.volume/1000))\n .y1(d => {\n return y((d.dam.volume + (d.idm ? d.idm.volume : 0))/1000)\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3.axisTop(x)\n .tickSize(width - margin.top - margin.bottom) \n .ticks(d3.timeYear)\n .tickFormat(d => {\n return d.getFullYear()===2016?'':d.getFullYear()\n })\n )\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\")\n .attr(\"stroke-opacity\", 0.5)\n .attr(\"stroke-dasharray\", \"2,2\"))\n .call(g => g.selectAll(\".tick text\").attr(\"y\", 15))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(\n d3.axisLeft(y).ticks(5)\n )\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", -40)\n .attr(\"dy\", -12)\n .attr(\"text-anchor\", \"start\")\n .text('GWh'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(monthly, d => d.dam.volume/1000)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"x = d3.scaleUtc()\n .domain(d3.extent(monthly, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"margin = ({top: 25, right: 20, bottom: 60, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"totals = monthly.map(m=>{\n\n return {\n date: m.date,\n lux_date: m.lux_date,\n volume: (m.dam.volume) + (m.fpw ? m.fpw.volume : 0) + (m.fpm ? m.fpm.volume : 0) + (m.idm ? m.idm.volume : 0),\n value: (m.dam.value) + (m.fpw ? m.fpw.value : 0) + (m.fpm ? m.fpm.value : 0) + (m.idm ? m.idm.value : 0),\n power_mean: (m.dam.power_mean) + (m.fpw ? m.fpw.power_mean : 0) + (m.fpm ? m.fpm.power_mean : 0)+ (m.idm ? m.idm.power_mean : 0),\n }\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"markets={\n return {\n \"dam\":{ name: \"Day-ahead Market\", ref: \"dam\", col: 0},\n \"idm\":{ name: \"Intraday Market\", ref: \"idm\", col: 1},\n \"fpm\":{ name: \"Forward Physical Monthly\", ref: \"fpm\", col: 3},\n \"fpw\":{ name: \"Forward Physical Weekly\", ref: \"fpw\", col: 2}, \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"function marketCol(index) {\n return d3.schemeSet2[index]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"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":42,"value":"node_dict=Object.fromEntries(nodes.map(n=>[n.ref,n]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"cats = {\n return {\n evening: { index: 3, name: 'Evening', ref: 'evening'}, \n morning: { index: 1, name: 'Morning', ref: 'morning'}, \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":26,"value":"monthly={\n const fpm_dict= Object.fromEntries(fpm.map(n=>[n.date,n]))\n const fpw_dict= Object.fromEntries(fpw.map(n=>[n.date,n]))\n const idm_dict= Object.fromEntries(idm.map(n=>[n.date,n]))\n \n return dam.map(d => {\n return {\n date: d.date,\n lux_date: d.lux_date,\n dam: d,\n fpm: fpm_dict[d.date],\n fpw: fpw_dict[d.date],\n idm: idm_dict[d.date],\n \n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"monthly_vols = monthly.map(v=>{\n return {\n lux_date: v.lux_date,\n volume:v.dam.volume+(v.idm?v.idm.volume:0)+(v.fpm?v.fpm.volume:0)+(v.fpw?v.fpw.volume:0)\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"idm= get_monthly('idm')","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"dam= get_monthly('dam')","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"fpm= get_monthly('fpm')","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"fpw= get_monthly('fpw')","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"avs=calmonthly.map((d,i)=>{\n return {date: new Date(2020,i), value: d}\n}).concat(\ncalmonthly.map((d,i)=>{\n return {date: new Date(2021,i), value: d}\n})).concat(\ncalmonthly.map((d,i)=>{\n return {date: new Date(2022,i), value: d}\n})).slice(0,31)","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"calmonthly={\n let mns=monthly_vols.filter(v=>v.lux_date.year<2020)\n let ret = d3.rollups(mns,v=>d3.mean(v,m=>m.volume),v=>v.lux_date.month)\n return ret.map(v=>v[1])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"dam_cm=get_calmonthly('dam')","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"idm_cm=get_calmonthly('idm')","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"fpm_cm=get_calmonthly('fpm')","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"fpw_cm=get_calmonthly('fpw')","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"function get_calmonthly(market_ref) {\n \n return d3.csv(base_url + market_ref + \"_calmonthly.csv?\" + Math.floor(Math.random() * 1000),d3.autoType)\n .then(raw=>{\n return 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 return r\n })\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"function get_monthly(market_ref) {\n console.log(base_url + market_ref + \"_monthly.csv\")\n return d3.csv(base_url + market_ref + \"_monthly.csv?\" + Math.floor(Math.random() * 1000),d3.autoType)\n .then(raw=>{\n return 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 return r\n })\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"market_ref='dam'","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"base_url='https://gis.westernpower.org/data/sapp/output/'","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"font = ({\n family: 'Courier New, monospace',\n size: 13,\n color: '#6f6f6f'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"plt = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","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"}],"files":"$W33","stdlib":"1","titling":"auto"}