chart.js

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: 'CodeQwen1.5-7b-Chat',
        MGI: 0.1098,
        temp0_HumanEval: 0.6951,
        temp0_HumanEval_ET: 0.6098,
        temp0_8_HumanEval: 0.6368,
        temp0_8_HumanEval_ET: 0.5566,
    },
    {
        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 = [
//     'Pass@1 (temp = 0)',
//     'Pass@1 (temp = 0.8)',
//     'Pass@1 (temp = 0)',
//     'Pass@1 (temp = 0.8)'
// ]
let options = new Array(4)
for(let i = 0; i < 4; i++){
    options[i] = {
        series: [
            {
                name: 'GPT-3.5-turbo-1103',
                itemStyle: {
                    color: '#d8a9f1'
                }
            },
            {
                name: 'GPT-3.5-turbo-0613',
                itemStyle: {
                    color: '#ff4646'
                }
            },
            {
                name: 'CodeGeeX4-All-9B',
                itemStyle: {
                    color: '#faed32'
                }
            },
            {
                name: 'Deepseek-Coder-6.7b-base',
                itemStyle: {
                    color: '#e76b32'
                }
            },
            {
                name: 'Deepseek-Coder-6.7b-instruct',
                itemStyle: {
                    color: '#4dc3f8'
                }
            },
            {
                name: 'CodeLlama-7b',
                itemStyle: {
                    color: '#0b8854'
                }
            },
            {
                name: 'CodeLlama-7b-python',
                itemStyle: {
                    color: '#02ff89'
                }
            },
            {
                name: 'CodeLlama-7b-instruct',
                itemStyle: {
                    color: '#a3a309'
                }
            },
            {
                name: 'CodeGemma-2b',
                itemStyle: {
                    color: '#ff8a9d'
                }
            },
            {
                name: 'CodeGemma-7b',
                itemStyle: {
                    color: '#ebb1d3'
                }
            },
            {
                name: 'AixCoder3-7b-base',
                itemStyle: {
                    color: '#25cb57'
                }
            },
            {
                name: 'CodeQwen1.5-7b',
                itemStyle: {
                    color: '#5f49df'
                }
            },
            {
                name: 'CodeQwen1.5-7b-Chat',
                itemStyle: {
                    color: '#27b1b1'
                }
            },
            {
                name: 'Starcoder2-7b',
                itemStyle: {
                    color: '#bb2490'
                }
            },
            {
                name: 'Starcoder2-15b',
                itemStyle: {
                    color: '#31d1a6'
                }
            },
            {
                name: 'CodeLlama-13b',
                itemStyle: {
                    color: '#7ccdd5'
                }
            },
            {
                name: 'CodeLlama-34b',
                itemStyle: {
                    color: '#efa930'
                }
            },
            {
                name: 'CodeLlama-70b',
                itemStyle: {
                    color: '#b65fe5'
                }
            }
        ],
        grid: {
            show: true,
            top:'6%',
            left: '12%',
            right: '43%',
            bottom: '11%',
            borderColor: 'transparent',
            backgroundColor: '#eff1f7'
        },
        legend: {
            data: [
                'GPT-3.5-turbo-1103', 
                'GPT-3.5-turbo-0613', 
                'CodeGeeX4-All-9B', 
                'Deepseek-Coder-6.7b-base', 
                'Deepseek-Coder-6.7b-instruct', 
                'CodeLlama-7b', 
                'CodeLlama-7b-python', 
                'CodeLlama-7b-instruct', 
                'CodeGemma-2b', 
                'CodeGemma-7b', 
                'AixCoder3-7b-base', 
                'CodeQwen1.5-7b', 
                'CodeQwen1.5-7b-Chat', 
                'Starcoder2-7b', 
                'Starcoder2-15b', 
                'CodeLlama-13b', 
                'CodeLlama-34b', 
                'CodeLlama-70b'
            ],
            right: 55,
            bottom: '10.5%',
            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 +   
            `<span style="color: ${params.color}; text-decoration: underline">` + params.seriesName + '</span>' +  
            '<br/><br/>MGI: ' + params.data[0] +   
            '<br/>HumanEval: ' + params.data[1] +   
            '<br/>HumanEval-ET: ' + params.data[2];  
        }
        : function(params) {  
            return params.marker +   
            `<span style="color: ${params.color}; text-decoration: underline">` + params.seriesName + '</span>' +  
            '<br/><br/>MGI: ' + params.data[0] +   
            '<br/>HumanEval-ET: ' + params.data[1] +   
            '<br/>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[2])


//0 temp0_humaneval
//1 temp0_8_humaneval
//2 temp0_humaneval_et
//3 temp0_8_humaneval_et

// button and span
var btn_temp0_HumanEval = document.getElementById('btn_temp0_HumanEval')
var btn_temp0_8_HumanEval = document.getElementById('btn_temp0_8_HumanEval')
var btn_temp0_HumanEval_ET = document.getElementById('btn_temp0_HumanEval_ET')
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_8_HumanEval = document.getElementById('span_temp0_8_HumanEval')
var span_temp0_HumanEval_ET = document.getElementById('span_temp0_HumanEval_ET')
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_8_HumanEval.style.backgroundColor = '#d3d3d3'
    span_temp0_8_HumanEval.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_8_HumanEval.style.backgroundColor = '#d3d3d3'
    span_temp0_8_HumanEval.style.color = '#d3d3d3'
})

btn_temp0_8_HumanEval.addEventListener("click", function() {
    Chart.setOption(options[1])
    btn_temp0_HumanEval.style.backgroundColor = '#d3d3d3'
    span_temp0_HumanEval.style.color = '#d3d3d3'
    btn_temp0_8_HumanEval.style.backgroundColor = '#386df4'
    span_temp0_8_HumanEval.style.color = '#386df4'
})
span_temp0_8_HumanEval.addEventListener("click", function() {
    Chart.setOption(options[1]);
    btn_temp0_HumanEval.style.backgroundColor = '#d3d3d3'
    span_temp0_HumanEval.style.color = '#d3d3d3'
    btn_temp0_8_HumanEval.style.backgroundColor = '#386df4'
    span_temp0_8_HumanEval.style.color = '#386df4'
})

btn_temp0_HumanEval_ET.addEventListener("click", function() {
    Chart2.setOption(options[2])
    btn_temp0_HumanEval_ET.style.backgroundColor = '#386df4'
    span_temp0_HumanEval_ET.style.color = '#386df4'
    btn_temp0_8_HumanEval_ET.style.backgroundColor = '#d3d3d3'
    span_temp0_8_HumanEval_ET.style.color = '#d3d3d3'
})
span_temp0_HumanEval_ET.addEventListener("click", function() {
    Chart2.setOption(options[2])
    btn_temp0_HumanEval_ET.style.backgroundColor = '#386df4'
    span_temp0_HumanEval_ET.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_HumanEval_ET.style.backgroundColor = '#d3d3d3'
    span_temp0_HumanEval_ET.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_HumanEval_ET.style.backgroundColor = '#d3d3d3'
    span_temp0_HumanEval_ET.style.color = '#d3d3d3'
    btn_temp0_8_HumanEval_ET.style.backgroundColor = '#386df4'
    span_temp0_8_HumanEval_ET.style.color = '#386df4'
})