31:T8d8,{ 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, 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) } }) data.push({ y: [1,-1],showlegend:false, x: [selected_date.toJSDate(),selected_date.toJSDate()], type: 'bar', marker:{color:'black'} }) var layout = { height: 400, 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} ` }32:T1265,{ const rW=105, rH=70, m=5, f=11 let sapp_filtered=sapp.features.filter(s=>flows_by_node.get(s.properties.ref)) let totalExtent=[d3.min(Array.from(flows_by_node),f=>f[1][2]), d3.max(Array.from(flows_by_node),f=>f[1][2])] let min=totalExtent[0] let max=totalExtent[1] const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 580]) .style("width", "100%") .style("height", "auto"); var cSupply = d3.scaleSequential().domain([min,0]) .interpolator(d3.interpolateLab(d3.schemeCategory10[2], "#CCC")) var cConsume = d3.scaleSequential().domain([0,max]) .interpolator(d3.interpolateLab("#CCC", d3.schemeCategory10[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=flows_by_node.get(d.properties.ref) if (m) { return m[2]<0 ? cSupply(m[2]) : cConsume(m[2]) } 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_filtered) .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) make_text(svg,fnX(),fnY(2,2), (d=>{ let m=flows_by_node.get(d.properties.ref) if (m) { return d3.format(',.1f')(Math.abs(m[2])/1000) + ' GWh' } else { return '' } }), false ) make_text(svg,fnX(),fnY(3,2), (d=>{ let m=flows_by_node.get(d.properties.ref) if (m) { return d3.format('$,.2r')(Math.abs(m[1])/1000) } else { return '' } }), false ) make_text( svg,fnX(),fnY(4,2), (d=>{ let m=flows_by_node.get(d.properties.ref) if (m) { return d3.format('$,.0f')(Math.abs(m[1])/Math.abs(m[2])) + '/GWh' } else { return '' } }), false ) svg.append('g') .selectAll("rect") .data(sapp_filtered) .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', 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_filtered.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}`) .attr('stroke', 'steelblue') .attr('stroke-width', '1.5') addPieChartsToMap(svg,1) addPieChartsToMap(svg,2) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("fill", "grey") .attr("text-anchor", "left") .selectAll("text") .data(sapp_filtered) .join("text") .text('MWh') .attr("x", d=>projection.centroid(d.geometry)[0] + node_dict[d.properties.ref].offset[0]+rW/2-53) .attr("y", d => projection.centroid(d.geometry)[1] + node_dict[d.properties.ref].offset[1]+rH/2-2) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("fill", "grey") .attr("text-anchor", "left") .selectAll("text") .data(sapp_filtered) .join("text") .text('$') .attr("x", d=>projection.centroid(d.geometry)[0] + node_dict[d.properties.ref].offset[0]+rW/2-37) .attr("y", d => projection.centroid(d.geometry)[1] + node_dict[d.properties.ref].offset[1]+rH/2-61) return html`${svg.node()} ` }33:T6d7,addPieChartsToMap = function(map,index) { // Create segments for each region sapp.features.forEach(feat => { let flw=flows_by_node.get(feat.properties.ref) if (flw) { const rW=105 const rH=70 const m=3 const f=11 const rad=15 function fnX(d) { return projection.centroid(d.geometry)[0] + node_dict[d.properties.ref].offset[0]+rW/2-rad-m } function fnY(d) { return projection.centroid(d.geometry)[1] + node_dict[d.properties.ref].offset[1]+rH/2-rad-m - (index==1?(rad*2 + m):0) } let x = fnX(feat) let y = fnY(feat) let arcs = pie([ Math.abs(flw[index]), flows_total.get('consume')[index]-Math.abs(flw[index]) ]) const t = map.transition() .duration(750); map .append('g') .attr("transform", "translate(" + x + "," + y + ")") .attr('stroke', 'grey') .selectAll('path') .data(arcs, a=>'a') .join( enter => enter.append("path") .attr('fill', (d,i)=> [flw[index]>0 ? d3.schemeCategory10[5]:d3.schemeCategory10[2],'white'][i]) .attr('fill-opacity', (d,i)=> [1,0][i]) .attr("d", d3 .arc() .innerRadius(0) .outerRadius(rad) .startAngle(0) .endAngle(d=>d.endAngle)), update => update .attr('fill', (d,i)=> [flw[index]>0 ? d3.schemeCategory10[7]:d3.schemeCategory10[4],'white'][i]), exit => exit .attr('fill', (d,i)=> [flw[index]>0 ? d3.schemeCategory10[7]:d3.schemeCategory10[4],'white'][i]) ) } }); }34: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}, ]35:[{"id":"057ef0b5dd0e520a9be2a77bad99a70d2f85fdd133ca99dc821899e6ac74130d84d5eb7a818867487c356c8b893dbf6d256953734722a765b4719da9e513de10","href":"https://static.observableusercontent.com/files/057ef0b5dd0e520a9be2a77bad99a70d2f85fdd133ca99dc821899e6ac74130d84d5eb7a818867487c356c8b893dbf6d256953734722a765b4719da9e513de10","name":"sapp.json","type":"application/json","lastModified":1655456751759.226,"size":55475}] 2f:{"title":"Day-ahead Market Flows","cells":[{"id":0,"value":"md`# Day-ahead Market Flows`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof selected_month = {\n const form = html``;\n form.oninput = () => {\n form.querySelector(\"[id=month_disp]\").textContent = monthly[form.month_index.valueAsNumber].lux_date.toFormat('LLL yyyy')\n form.value = form.month_index.valueAsNumber;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"Suppliers in green, consumers in brown.","pinned":false,"hidden":false,"mode":"html"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"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":154,"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":157,"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":129,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"month_no={\n let i = 0;\n while (true) {\n await Promises.delay(1000)\n i++\n if (i>monthly.length-1) { i=0 }\n yield i;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":" projection=d3.geoPath(d3.geoEquirectangular().center([28,-18.2]).scale(900))","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"pie = d3\n .pie()\n .sort(null)\n .value(d => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"pie([20])","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":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"flows_total=d3.rollup(flow_filtered_selected(),v=>[\n d3.sum(v,d=>d.value)/d3.sum(v,d=>d.flow_sum),\n d3.sum(v,d=>d.value),\n d3.sum(v,d=>d.flow_sum)\n ],v=>v.side)","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"function flow_filtered() {\n if (cat=='all') {\n return flow\n } else {\n return flow.filter(f=>f.cat==cat)\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"flows_by_node=d3.rollup(flow_filtered_selected(),v=>[\n d3.sum(v,d=>d.value)/d3.sum(v,d=>d.flow_sum),\n d3.sum(v,d=>d.value),\n d3.sum(v,d=>d.flow_sum)\n ],v=>v.node)","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"\nfunction flow_filtered_selected() {\n return flow.filter(f=>f.year==selected_date.year && f.month==selected_date.month)\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"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":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":32,"value":"selected_date=monthly[selected_month].lux_date","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"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":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":10,"value":"sapp=topojson.feature(sapptopo, sapptopo.objects.sapp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"sapptopo=FileAttachment(\"sapp.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"style=html`css `","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"font = ({\n family: 'Courier New, monospace',\n size: 13,\n color: '#6f6f6f'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"plt = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":true,"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":"$W35","stdlib":"1","titling":"auto"}