var Chart = echarts.init(document.getElementById('sec_plot__chart1'));
var Chart2 = echarts.init(document.getElementById('sec_plot__chart2'));
var dataset = [
{
name: 'GPT-3.5-turbo-1103',
MGI: 0.2326,
temp0_HumanEval: 0.7439,
temp0_HumanEval_ET: 0.5915,
temp0_8_HumanEval: 0.7248,
temp0_8_HumanEval_ET: 0.5778,
},
{
name: 'GPT-3.5-turbo-0613',
MGI: 0.1314,
temp0_HumanEval: 0.6585,
temp0_HumanEval_ET: 0.5122,
temp0_8_HumanEval: 0.612,
temp0_8_HumanEval_ET: 0.4776,
},
{
name: 'CodeGeeX4-All-9B',
MGI: 0.5182,
temp0_HumanEval: 0.7805,
temp0_HumanEval_ET: 0.622,
temp0_8_HumanEval: 0.7606,
temp0_8_HumanEval_ET: 0.6078,
},
{
name: 'Deepseek-Coder-6.7b-base',
MGI: 0.0602,
temp0_HumanEval: 0.4817,
temp0_HumanEval_ET: 0.3963,
temp0_8_HumanEval: 0.3388,
temp0_8_HumanEval_ET: 0.2798,
},
{
name: 'Deepseek-Coder-6.7b-instruct',
MGI: 0.0893,
temp0_HumanEval: 0.7134,
temp0_HumanEval_ET: 0.628,
temp0_8_HumanEval: 0.6494,
temp0_8_HumanEval_ET: 0.5673,
},
{
name: 'CodeLlama-7b',
MGI: 0.0417,
temp0_HumanEval: 0.311,
temp0_HumanEval_ET: 0.2378,
temp0_8_HumanEval: 0.2211,
temp0_8_HumanEval_ET: 0.1832,
},
{
name: 'CodeLlama-7b-python',
MGI: 0.0525,
temp0_HumanEval: 0.3841,
temp0_HumanEval_ET: 0.3354,
temp0_8_HumanEval: 0.3062,
temp0_8_HumanEval_ET: 0.2568,
},
{
name: 'CodeLlama-7b-instruct',
MGI: 0.0908,
temp0_HumanEval: 0.3537,
temp0_HumanEval_ET: 0.2988,
temp0_8_HumanEval: 0.2876,
temp0_8_HumanEval_ET: 0.2455,
},
{
name: 'CodeGemma-2b',
MGI: 0.0112,
temp0_HumanEval: 0.3537,
temp0_HumanEval_ET: 0.2805,
temp0_8_HumanEval: 0.2161,
temp0_8_HumanEval_ET: 0.1771,
},
{
name: 'CodeGemma-7b',
MGI: 0.0548,
temp0_HumanEval: 0.4329,
temp0_HumanEval_ET: 0.3537,
temp0_8_HumanEval: 0.3316,
temp0_8_HumanEval_ET: 0.2779,
},
{
name: 'AixCoder3-7b-base',
MGI: 0.0578,
temp0_HumanEval: 0.5427,
temp0_HumanEval_ET: 0.4451,
temp0_8_HumanEval: 0.4545,
temp0_8_HumanEval_ET: 0.3826,
},
{
name: 'CodeQwen1.5-7b',
MGI: 0.0361,
temp0_HumanEval: 0.439,
temp0_HumanEval_ET: 0.3841,
temp0_8_HumanEval: 0.3884,
temp0_8_HumanEval_ET: 0.3279,
},
{
name: 'Starcoder2-7b',
MGI: 0.0579,
temp0_HumanEval: 0.3659,
temp0_HumanEval_ET: 0.3232,
temp0_8_HumanEval: 0.2905,
temp0_8_HumanEval_ET: 0.2438,
},
{
name: 'Starcoder2-15b',
MGI: 0.0552,
temp0_HumanEval: 0.4695,
temp0_HumanEval_ET: 0.4024,
temp0_8_HumanEval: 0.3406,
temp0_8_HumanEval_ET: 0.2795,
},
{
name: 'CodeLlama-13b',
MGI: 0.0412,
temp0_HumanEval: 0.3415,
temp0_HumanEval_ET: 0.2927,
temp0_8_HumanEval: 0.2405,
temp0_8_HumanEval_ET: 0.2015,
},
{
name: 'CodeLlama-34b',
MGI: 0.0651,
temp0_HumanEval: 0.4817,
temp0_HumanEval_ET: 0.4146,
temp0_8_HumanEval: 0.3478,
temp0_8_HumanEval_ET: 0.2906,
},
{
name: 'CodeLlama-70b',
MGI: 0.0523,
temp0_HumanEval: 0.5244,
temp0_HumanEval_ET: 0.4512,
temp0_8_HumanEval: 0.4317,
temp0_8_HumanEval_ET: 0.3615,
},
]
let ymins = new Array(0.27, 0.16, 0.21, 0.14)
let titleText = [
'Memorization-Generalization Index VS HumanEval(temp = 0)',
'Memorization-Generalization Index VS HumanEval(temp = 0.8)',
'Memorization-Generalization Index VS HumanEval-ET(temp = 0)',
'Memorization-Generalization Index VS HumanEval-ET(temp = 0.8)'
]
let options = new Array(4)
for(let i = 0; i < 4; i++){
options[i] = {
series: [
{ name: 'GPT-3.5-turbo-1103' },
{ name: 'GPT-3.5-turbo-0613' },
{ name: 'CodeGeeX4-All-9B' },
{ name: 'Deepseek-Coder-6.7b-base' },
{ name: 'Deepseek-Coder-6.7b-instruct' },
{ name: 'CodeLlama-7b' },
{ name: 'CodeLlama-7b-python' },
{ name: 'CodeLlama-7b-instruct' },
{ name: 'CodeGemma-2b' },
{ name: 'CodeGemma-7b' },
{ name: 'AixCoder3-7b-base' },
{ name: 'CodeQwen1.5-7b' },
{ name: 'Starcoder2-7b' },
{ name: 'Starcoder2-15b' },
{ name: 'CodeLlama-13b' },
{ name: 'CodeLlama-34b' },
{ name: 'CodeLlama-70b' }
],
grid: {
show: true,
top: '15%',
left: '12%',
right: '45%',
borderColor: 'transparent',
backgroundColor: '#eff1f7'
},
legend: {
right: 95,
bottom: '11%',
orient: 'vertical',
icon: 'diamond',
itemWidth: 14,
itemHeight: 14,
textStyle: {
fontSize: 14.5,
color: '#5876fa'
},
},
title: {
show: true,
text: '',
left: 'center',
textStyle: {
fontFamily: "Arial",
fontSize: 20,
fontWeight: 'normal'
},
top: 25
},
tooltip: {
trigger: 'item',
},
xAxis: {
name: 'Memorization-Generalization Index',
nameLocation: 'middle',
nameGap: 32,
nameTextStyle: {
fontSize: 15,
fontFamily: 'Arial',
},
min: -0.08,
axisLabel: {
showMinLabel: false
},
splitLine: {
show: true,
lineStyle: {
color: 'white'
}
},
axisTick:{
show:false
},
axisLine: {
show: false,
},
},
yAxis: {
name: '',
nameLocation: 'middle',
nameGap: 40,
nameTextStyle: {
fontSize: 16,
fontFamily: 'Arial',
},
type: 'value',
axisLabel: {
showMinLabel: false
},
splitLine: {
show: true,
lineStyle: {
color: 'white'
}
},
axisTick:{
show:false
},
axisLine: {
show: false,
},
},
};
options[i].title.text = titleText[i]
options[i].tooltip.formatter = (
i < 2 ? function(params) {
return params.marker +
`` + params.seriesName + '' +
'
MGI: ' + params.data[0] +
'
HumanEval: ' + params.data[1] +
'
HumanEval-ET: ' + params.data[2];
}
: function(params) {
return params.marker +
`` + params.seriesName + '' +
'
MGI: ' + params.data[0] +
'
HumanEval-ET: ' + params.data[1] +
'
HumanEval: ' + params.data[2];
}
)
options[i].yAxis.name = (
i < 2 ? 'HumanEval'
: 'HumanEval-ET'
)
options[i].yAxis.min = ymins[i]
}
for(let i = 0; i < dataset.length; i++){
options[0].series[i].data = [[dataset[i].MGI, dataset[i].temp0_HumanEval,dataset[i].temp0_HumanEval_ET]]
options[1].series[i].data = [[dataset[i].MGI, dataset[i].temp0_8_HumanEval, dataset[i].temp0_8_HumanEval_ET]]
options[2].series[i].data = [[dataset[i].MGI, dataset[i].temp0_HumanEval_ET,dataset[i].temp0_HumanEval]]
options[3].series[i].data = [[dataset[i].MGI, dataset[i].temp0_8_HumanEval_ET, dataset[i].temp0_8_HumanEval]]
}
for(let i = 0; i < 4; i++){
for(let j = 0; j < dataset.length; ++j){
options[i].series[j].type = 'scatter'
options[i].series[j].symbol = 'diamond'
}
}
function setSymbolSize() {
for (var i = 0; i < dataset.length; i++) {
if(dataset[i].MGI < 0.1 && dataset[i].temp0_HumanEval > 0.5){
options[0].series[i].symbolSize = 50
options[1].series[i].symbolSize = 50
}
else if(dataset[i].temp0_HumanEval > 0.43 && dataset[i].temp0_HumanEval < 0.75){
options[0].series[i].symbolSize = 30
options[1].series[i].symbolSize = 30
}
else if(dataset[i].MGI < 0.015 || dataset[i].temp0_HumanEval > 0.38){
options[0].series[i].symbolSize = 20
options[1].series[i].symbolSize = 20
}
else {
options[0].series[i].symbolSize = 13
options[1].series[i].symbolSize = 13
}
}
for (var i = 0; i < dataset.length; i++) {
if(dataset[i].MGI < 0.1 && dataset[i].temp0_HumanEval_ET > 0.5){
options[2].series[i].symbolSize = 50
options[3].series[i].symbolSize = 50
}
else if(dataset[i].temp0_HumanEval_ET > 0.43 && dataset[i].temp0_HumanEval_ET < 0.75){
options[2].series[i].symbolSize = 30
options[3].series[i].symbolSize = 30
}
else if(dataset[i].MGI < 0.015 || dataset[i].temp0_HumanEval_ET > 0.38){
options[2].series[i].symbolSize = 20
options[3].series[i].symbolSize = 20
}
else {
options[2].series[i].symbolSize = 13
options[3].series[i].symbolSize = 13
}
}
}
setSymbolSize()
Chart.setOption(options[0])
Chart2.setOption(options[1])
// button and span
var btn_temp0_HumanEval = document.getElementById('btn_temp0_HumanEval')
var btn_temp0_HumanEval_ET = document.getElementById('btn_temp0_HumanEval_ET')
var btn_temp0_8_HumanEval = document.getElementById('btn_temp0_8_HumanEval')
var btn_temp0_8_HumanEval_ET = document.getElementById('btn_temp0_8_HumanEval_ET')
var span_temp0_HumanEval = document.getElementById('span_temp0_HumanEval')
var span_temp0_HumanEval_ET = document.getElementById('span_temp0_HumanEval_ET')
var span_temp0_8_HumanEval = document.getElementById('span_temp0_8_HumanEval')
var span_temp0_8_HumanEval_ET = document.getElementById('span_temp0_8_HumanEval_ET')
btn_temp0_HumanEval.addEventListener("click", function() {
Chart.setOption(options[0])
btn_temp0_HumanEval.style.backgroundColor = '#386df4'
span_temp0_HumanEval.style.color = '#386df4'
btn_temp0_HumanEval_ET.style.backgroundColor = '#d3d3d3'
span_temp0_HumanEval_ET.style.color = '#d3d3d3'
})
span_temp0_HumanEval.addEventListener("click", function() {
Chart.setOption(options[0]);
btn_temp0_HumanEval.style.backgroundColor = '#386df4'
span_temp0_HumanEval.style.color = '#386df4'
btn_temp0_HumanEval_ET.style.backgroundColor = '#d3d3d3'
span_temp0_HumanEval_ET.style.color = '#d3d3d3'
})
btn_temp0_HumanEval_ET.addEventListener("click", function() {
Chart.setOption(options[2])
btn_temp0_HumanEval.style.backgroundColor = '#d3d3d3'
span_temp0_HumanEval.style.color = '#d3d3d3'
btn_temp0_HumanEval_ET.style.backgroundColor = '#386df4'
span_temp0_HumanEval_ET.style.color = '#386df4'
})
span_temp0_HumanEval_ET.addEventListener("click", function() {
Chart.setOption(options[2])
btn_temp0_HumanEval.style.backgroundColor = '#d3d3d3'
span_temp0_HumanEval.style.color = '#d3d3d3'
btn_temp0_HumanEval_ET.style.backgroundColor = '#386df4'
span_temp0_HumanEval_ET.style.color = '#386df4'
})
btn_temp0_8_HumanEval.addEventListener("click", function() {
Chart2.setOption(options[1])
btn_temp0_8_HumanEval.style.backgroundColor = '#386df4'
span_temp0_8_HumanEval.style.color = '#386df4'
btn_temp0_8_HumanEval_ET.style.backgroundColor = '#d3d3d3'
span_temp0_8_HumanEval_ET.style.color = '#d3d3d3'
})
span_temp0_8_HumanEval.addEventListener("click", function() {
Chart2.setOption(options[1]);
btn_temp0_8_HumanEval.style.backgroundColor = '#386df4'
span_temp0_8_HumanEval.style.color = '#386df4'
btn_temp0_8_HumanEval_ET.style.backgroundColor = '#d3d3d3'
span_temp0_8_HumanEval_ET.style.color = '#d3d3d3'
})
btn_temp0_8_HumanEval_ET.addEventListener("click", function() {
Chart2.setOption(options[3])
btn_temp0_8_HumanEval.style.backgroundColor = '#d3d3d3'
span_temp0_8_HumanEval.style.color = '#d3d3d3'
btn_temp0_8_HumanEval_ET.style.backgroundColor = '#386df4'
span_temp0_8_HumanEval_ET.style.color = '#386df4'
})
span_temp0_8_HumanEval_ET.addEventListener("click", function() {
Chart2.setOption(options[3])
btn_temp0_8_HumanEval.style.backgroundColor = '#d3d3d3'
span_temp0_8_HumanEval.style.color = '#d3d3d3'
btn_temp0_8_HumanEval_ET.style.backgroundColor = '#386df4'
span_temp0_8_HumanEval_ET.style.color = '#386df4'
})