cutoffs = ['0.00', '0.01', '0.02', '0.03', '0.04', '0.05', '0.06', '0.07', '0.08', '0.09', '0.10', '0.11', '0.12', '0.13', '0.14', '0.15', '0.16', '0.17', '0.18', '0.19', '0.20', '0.21', '0.22', '0.23', '0.24', '0.25', '0.26', '0.27', '0.28', '0.29', '0.30', '0.31', '0.32', '0.33', '0.34', '0.35', '0.36', '0.37', '0.38', '0.39', '0.40', '0.41', '0.42', '0.43', '0.44', '0.45', '0.46', '0.47', '0.48', '0.49', '0.50', '0.51', '0.52', '0.53', '0.54', '0.55', '0.56', '0.57', '0.58', '0.59', '0.60', '0.61', '0.62', '0.63', '0.64', '0.65', '0.66', '0.67', '0.68', '0.69', '0.70', '0.71', '0.72', '0.73', '0.74', '0.75', '0.76', '0.77', '0.78', '0.79', '0.80', '0.81', '0.82', '0.83', '0.84', '0.85', '0.86', '0.87', '0.88', '0.89', '0.90', '0.91', '0.92', '0.93', '0.94', '0.95', '0.96', '0.97', '0.98', '0.99', '1.00' ]; ft = [ [1.0, 1.0], [0.98, 1.0], [0.95, 1.0], [0.89, 1.0], [0.84, 0.99], [0.78, 0.99], [0.74, 0.98], [0.7, 0.96], [0.67, 0.95], [0.64, 0.94], [0.61, 0.93], [0.59, 0.92], [0.56, 0.92], [0.53, 0.91], [0.51, 0.91], [0.5, 0.9], [0.47, 0.89], [0.44, 0.88], [0.42, 0.87], [0.41, 0.86], [0.39, 0.86], [0.37, 0.85], [0.36, 0.83], [0.35, 0.82], [0.33, 0.8], [0.31, 0.78], [0.3, 0.78], [0.29, 0.76], [0.28, 0.75], [0.26, 0.73], [0.25, 0.73], [0.24, 0.7], [0.22, 0.69], [0.21, 0.67], [0.2, 0.66], [0.19, 0.65], [0.18, 0.65], [0.18, 0.64], [0.17, 0.63], [0.16, 0.6], [0.14, 0.58], [0.14, 0.58], [0.14, 0.57], [0.13, 0.55], [0.13, 0.55], [0.12, 0.54], [0.11, 0.52], [0.1, 0.5], [0.1, 0.49], [0.09, 0.48], [0.09, 0.47], [0.09, 0.46], [0.08, 0.45], [0.08, 0.44], [0.07, 0.42], [0.07, 0.39], [0.06, 0.38], [0.05, 0.37], [0.05, 0.34], [0.05, 0.32], [0.04, 0.31], [0.04, 0.31], [0.04, 0.31], [0.04, 0.28], [0.04, 0.27], [0.04, 0.23], [0.03, 0.22], [0.03, 0.2], [0.03, 0.19], [0.03, 0.18], [0.02, 0.16], [0.02, 0.14], [0.02, 0.13], [0.02, 0.12], [0.02, 0.1], [0.02, 0.08], [0.01, 0.07], [0.01, 0.05], [0.01, 0.05], [0.01, 0.04], [0.01, 0.04], [0.0, 0.02], [0.0, 0.01], [0.0, 0.01], [0.0, 0.01], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0] ]; ft_c5 = [ [1.0, 1.0], [1.0, 1.0], [1.0, 1.0], [1.0, 1.0], [1.0, 1.0], [1.0, 1.0], [1.0, 1.0], [0.98, 1.0], [0.97, 1.0], [0.49, 0.89], [0.48, 0.89], [0.48, 0.89], [0.46, 0.89], [0.46, 0.89], [0.46, 0.89], [0.46, 0.89], [0.28, 0.8], [0.22, 0.78], [0.22, 0.78], [0.22, 0.78], [0.21, 0.78], [0.12, 0.72], [0.12, 0.72], [0.11, 0.71], [0.11, 0.71], [0.1, 0.71], [0.1, 0.71], [0.1, 0.71], [0.1, 0.71], [0.1, 0.71], [0.09, 0.7], [0.09, 0.7], [0.09, 0.7], [0.09, 0.7], [0.08, 0.69], [0.08, 0.69], [0.08, 0.69], [0.08, 0.69], [0.07, 0.68], [0.07, 0.68], [0.07, 0.68], [0.07, 0.68], [0.07, 0.68], [0.07, 0.68], [0.07, 0.68], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.06, 0.67], [0.05, 0.62], [0.05, 0.62], [0.05, 0.62], [0.05, 0.62], [0.05, 0.62], [0.05, 0.6], [0.05, 0.6], [0.05, 0.6], [0.05, 0.6], [0.04, 0.58], [0.04, 0.58], [0.04, 0.58], [0.03, 0.53], [0.03, 0.53], [0.03, 0.53], [0.03, 0.5], [0.03, 0.5], [0.03, 0.49], [0.02, 0.36], [0.02, 0.36], [0.02, 0.36], [0.02, 0.36], [0.02, 0.33], [0.02, 0.33], [0.02, 0.33], [0.02, 0.28], [0.0, 0.02], [0.0, 0.02], [0.0, 0.02], [0.0, 0.02], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0], [0.0, 0.0] ]; // 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]; option = { visualMap: { type: 'continuous', min: 0, max: 1, precision: 2, text: ['1.0', 'cutoff: 0.0'], realtime: false, calculable: false, // color: ['orangered','yellow','lightskyblue'], orient: 'horizontal', show: true, itemHeight: '900%', left: '10%', hoverLink: true, textStyle: { fontWeight: 'normal', fontSize: 16, color: '#F1F1F3' }, dimension: 2, // seriesIndex:1, formatter: function(value) { console.log('here'); index = Math.round(value * 100) cutoff = Math.round(value * 100) / 100; fpr = ft[index][0]; tpr = ft[index][1]; ft_new = ft.slice(); fpr_c5 = ft_c5[index][0]; tpr_c5 = ft_c5[index][1]; ft_new_c5 = ft_c5.slice(); var cut = { 'value': [fpr, tpr], 'symbolSize': 10 }; var cut_c5 = { 'value': [fpr_c5, tpr_c5], 'symbolSize': 10 }; ft_new[index] = cut; ft_new_c5[index] = cut_c5; myChart.setOption({ title: { subtext: ' cutoff: ' + cutoff + "\n" + " Log " + " " + "C5" + "\n" + " fpr " + " " + ft[index][0] + " " + ft_c5[index][0] +"\n" + " tpr " + " " + ft[index][1] + " " + ft_c5[index][1], subtextStyle: { fontSize: 16 } }, series: [{ name: "Log", data: ft_new, },{ name: "C5", data: ft_new_c5, }] }); // console.log('selectDataRange end'); return "Cutoff" + ":" + cutoff; }, }, backgroundColor: '#394056', title: { // text: "Cutoff:" + cutoff + "
" + "fpr: " + 0, // textAlign: 'center', // left: '63%', // top: '55%', // textStyle: { // fontSize: 10, // color: 'rgba(255, 255, 255, 0.7)' // } text: 'Multi Binary Classification Model ROC Comparsion', textStyle: { fontWeight: 'normal', fontSize: 16, color: '#F1F1F3', }, left: '63%', top: '55%' }, tooltip: { trigger: 'axis', // show: true, // alwaysShowContent: true, // text: 'here', triggerOn: 'none', // position: ['63%', '55%'], formatter: function(params) { index = params[0].dataIndex; console.log("tooltip %d", index); return "Cutoff: " + ":" + datas[index][0] + "
" + "fpr " + ":" + ft[index][0] + "
" + "tpr" + ":" + ft[index][1]; // return "Cutoff " + ":" + datas[index][0] + // "
" + "fpr " + ":" + ft[index][0] + // "
" + "tpr" + ":" + ft[index][1] + // "
" + "Recall " + ":" + datas[index][5] + // "
" + "Accuracy " + ":" + datas[index][6]; }, axisPointer: { lineStyle: { color: '#57617B' } }, }, legend: { icon: 'rect', itemWidth: 20, itemHeight: 10, itemGap: 13, data: ['Log', 'C5'], right: '4%', textStyle: { fontSize: 12, color: '#F1F1F3' }, }, grid: { // top: 80, // bottom: 100, left: '3%', right: '4%', bottom: '10%', // containLabel: true }, xAxis: [{ type: 'value', name: 'FPR', nameTextStyle: { fontSize: 14, color: '#F1F1F3' }, show: true, min: 0, max: 1, axisTick: { show: false }, axisLine: { lineStyle: { color: '#57617B' } }, axisLabel: { margin: 10, textStyle: { fontSize: 14, color: '#F1F1F3' } }, splitLine: { lineStyle: { color: '#57617B' } }, }], yAxis: [{ type: 'value', name: 'TPR', nameTextStyle: { fontSize: 14, color: '#F1F1F3' }, min: 0, max: 1, axisTick: { show: false }, axisLine: { lineStyle: { color: '#57617B' } }, axisLabel: { margin: 10, textStyle: { fontSize: 14, color: '#F1F1F3' } }, splitLine: { lineStyle: { color: '#57617B' } } }], series: [{ name: 'Log', type: 'line', smooth: true, symbol: 'circle', symbolSize: 0.1, lineStyle: { normal: { width: 1 } }, itemStyle: { normal: { color: 'rgb(137,189,27)', borderColor: 'rgba(137,189,2,0.27)', borderWidth: 12 } }, data: ft, // show:false },{ name: 'C5', type: 'line', smooth: true, symbol: 'circle', symbolSize: 0.1, lineStyle: { normal: { width: 1 } }, itemStyle: { normal: { color: 'rgb(0,136,212)', borderColor: 'rgba(0,136,212,0.2)', borderWidth: 12 } }, data: ft_c5, // show:false } // { // name: 'cutoff', // type: 'line', // smooth: false, // lineStyle: { // normal: { // width: 1 // } // }, // itemStyle: { // normal: { // color: 'rgb(137,189,27)', // borderColor: 'rgba(137,189,2,0.27)', // borderWidth: 12 // } // }, // data: cutoffs, // // show:false // }, ], }; // myChart.on("click", function(params) { // console.log(params); // var opt = myChart.getOption(); // opt.tooltip[0].triggerOn = 'click'; // myChart.setOption(opt); // }); myChart.on('datarangeselected', function(params) { // console.log('datarangeselected'); console.log(params); // console.log(params.selected); // console.log('datarangeselected end'); }); // myChart.on("mousemove", function(params) { // // $("#test .Rmodule").remove(); // // console.log('mousemove'); // // console.log(params.dataIndex); // // var dataIndex = params.dataIndex; // // var maxpoint = testData[dataIndex][1]; // // var minpoint = testData[dataIndex][2]; // // var startPoint = [dataIndex, maxpoint]; // // var endPoint = [dataIndex, minpoint]; // var opt = myChart.getOption(); // // var html = '

tn:' + tn[params.dataIndex] + '
minRadius:' + 1 + '

'; // // $("#test").append(html); // // $("#test .Rmodule").css({ // // top: params.event.offsetY + 10, // // left: params.event.offsetX + 10 // // }); // }); // myChart.on("mouseout", function(params) { // var opt = myChart.getOption(); // myChart.setOption(opt); // // $("#test .Rmodule").remove(); // });

Multi Model Comparsion