Public
Edited
Mar 13, 2023
G2 = require("@antv/g2@4.0.2");
// insertCss=require('insert-css')
G2Plot = require("@antv/g2plot")
area_w=750
area_h=450
area_char={
const wrapper = html`<div style="text-align: center; width:600px"><h5>Composition of Renewable energy production according to MYPD applications</h5></div>`;
const container = html`<div style="height: 500px;width:600px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
G2.registerInteraction('element-link', {
start: [{ trigger: 'interval:mouseenter', action: 'element-link-by-color:link' }],
end: [{ trigger: 'interval:mouseleave', action: 'element-link-by-color:unlink' }],
});
const columnPlot = new G2Plot.Column(container, {
data:data_use.filter(d=>d.category!="Average"),
xField: 'Year',
yField: 'Total energy produced ',
seriesField: 'category',
isPercent: true,
isStack: true,
meta: {
value: {
min: 0,
max: 1,
},
},
legend: {
flipPage: false
},
label: {
position: 'middle',
content: (item) => {return item.percent>0.005?`${(item.percent*100).toFixed(0)}%`:"";
},
style: {
fill: '#fff',
},
},
tooltip: false,
interactions: [{ type: 'element-highlight-by-color' }, { type: 'element-link' }],
});
columnPlot.render();
}
data=FileAttachment("MYPD (2).csv").csv({typed:true})
total=tidy(
data.filter(d=>d.category!="Average"),
groupBy('Year', [
summarize({ total: sum('Total energy produced ') })
])
)
data_use=tidy(data, leftJoin(total, { by: ['Year'] }),
mutate({
percent: d=>d["Total energy produced "]/d["total"]
}),
arrange([T.fixedOrder('category', ["Round 5","Round 4+","Round 4","Round 3.5","Round 3","Round 2","Round 1"])])
)
data_price=FileAttachment("MYPD (2)@1.csv").csv({typed:true})
import {
tidy,
startsWith,
groupBy,
summarize,
sum,
mutate,
select,
n,
mean,
everything,
arrange,
desc,
filter,
rate,
TMath,
pivotWider,
pivotLonger,
leftJoin,
count,
map,
complete,
fill
} from '@pbeshai/tidyjs' // observable import
T = require("@tidyjs/tidy@2.5.1/dist/umd/tidy.min.js")
line_char={
const wrapper = html`<div style="text-align: center; width:700px"><h5>Average cost of renewable energy by bid window</h5></div>`;
const container = html`<div style="height: 400px;width:600px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const linePlot = new G2Plot.Line(container, {
data:data_price,
xField: 'Year',
yField: 'value',
seriesField: 'category',
yAxis: {
label: {
// formatter: (v) => `${(v / 10e8).toFixed(1)} B`,
},
},
lineStyle: (datum) => {
if (datum['category']=="Average") {
return {
lineDash: [2, 4]
};
}
},
legend: {
position: 'top',
flipPage:false,
},
smooth: true,
// animation: {
// appear: {
// animation: 'path-in',
// duration: 5000,
// },
// },
});
linePlot.render();
}
piechar={
const wrapper = html`<div style="text-align: center; width:700px; display:flex; flex-direction: row !important;
padding: 8px;"></div>`;
const container1 = html`<div style="height: 400px;width:300px;text-align: center; flex:1"><h5>Energy production by source</h5></div>`
const container2 = html`<div style="height: 400px;width:350px;text-align: center; flex: 1"><h5>Energy cost by source</h5></div>`
wrapper.appendChild(container1);
wrapper.appendChild(container2);
yield wrapper;
// initContainer();
const { Util } = G2;
const plot1 = new G2Plot.Pie(container1, {
data: [
{ type: 'OCGT', value: 1826/226226 },
{ type: 'Renewable IPP', value: 15073/226226 },
{ type: 'Coal', value: 184568/226226 },
{ type: 'Other sources', value: 24759/226226 },
],
meta: {
value: {
formatter: (v) => `${(v * 100).toFixed(0)}%`,
},
},
angleField: 'value',
colorField: 'type',
radius: 0.8,
legend:{
position:"left",
flipPage:false
} ,
label: { type: 'inner'},
tooltip:{
formatter: (datum) => {
return { name: datum.type, value:'produces ' + (datum.value* 100).toFixed(0) + '% of energy' };
}}
})
const plot2 = new G2Plot.Pie(container2, {
data: [
{ type: 'OCGT', value: 10/ 132.4, cost:10},
{ type: 'Renewable IPP', value: 30.6/132.4, cost:30.6 },
{ type: 'Coal', value: 73.6/132.4, cost:73.6},
{ type: 'Other sources', value: 18.2/132.4, cost:18.2 },
],
meta: {
value: {
formatter: (v) => `${(v * 100).toFixed(0)}%`,
},
},
angleField: 'value',
colorField: 'type',
radius: 0.8,
innerRadius: 0.5,
legend: false,
label: { type: 'inner' },
tooltip:{
formatter: (datum) => {
return { name: datum.type, value:'makes up ' + (datum.value* 100).toFixed(0) + '% of cost' };
}},
statistic: {
title: false,
content: {
customHtml: (container, view, datum, data) => {
container.style.overflow = 'visible';
const text = "R226B"
return text;
},
},
},
// Because interactions of 'statistic' will cause tooltip interaction not to work, so enable tooltip interaction explicitly.
interactions: [{ type: 'tooltip', enable: true }],
});
plot1.render();
plot2.render();
/**
* 根据指定 切片数据 获取切片元素 element 的中心坐标点
* @param view G2.View
* @param xField string
* @param activeValue string
* @returns Point | null
*/
function getPoint(view, xField, activeValue) {
const { elements, coordinate } = view.geometries[0];
const element = elements.find((ele) => ele.getModel().data[xField] === activeValue);
if (element) {
const { radius, innerRadius, polarRadius } = coordinate;
const center = coordinate.getCenter();
const { startAngle, endAngle } = Util.getAngle(element.getModel(), coordinate);
const middleAngle = (startAngle + endAngle) / 2;
const r = (polarRadius * (radius + innerRadius)) / 2;
const x = r * Math.cos(middleAngle);
const y = r * Math.sin(middleAngle);
return {
x: center.x + x,
y: center.y + y,
};
}
return null;
}
// 监听事件，进行 Tooltip 联动
let inAction = null;
plot1.on('tooltip:change', (e) => {
if (inAction !== 'plot2') {
const { data: eventData } = e;
const point = getPoint(plot2.chart, 'type', eventData.items?.[0]?.data?.type);
if (point) {
inAction = 'plot1';
plot2.chart.showTooltip(point);
} else {
plot2.chart.hideTooltip();
}
}
});
plot1.on('tooltip:hide', (e) => {
if (inAction) {
inAction = null;
plot2.chart.hideTooltip();
}
});
plot2.on('tooltip:change', (e) => {
if (inAction !== 'plot1') {
const { data: eventData } = e;
inAction = 'plot2';
const point = getPoint(plot1.chart, 'type', eventData.items?.[0]?.data?.type);
if (point) {
plot1.chart.showTooltip(point);
} else {
plot1.chart.hideTooltip();
}
}
});
plot2.on('tooltip:hide', (e) => {
if (inAction) {
inAction = null;
plot1.chart.hideTooltip();
}
});
}
html`<style>
.tool-wrapper{
background:white;
height:30px;
width:250px;
}
.tooltip{
font-size:12px;
line-height:30px
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
