export function linearRegression(x, y) {
var lr = {};
var n = y.length;
var sum_x = 0;
var sum_y = 0;
var sum_xy = 0;
var sum_xx = 0;
var sum_yy = 0;
for (var i = 0; i < y.length; i++) {
sum_x += x[i];
sum_y += y[i];
sum_xy += (x[i] * y[i]);
sum_xx += (x[i] * x[i]);
sum_yy += (y[i] * y[i]);
}
lr['sl'] = (n * sum_xy - sum_x * sum_y) / (n * sum_xx - sum_x * sum_x);
lr['off'] = (sum_y - lr.sl * sum_x) / n;
lr['r2'] = Math.pow((n * sum_xy - sum_x * sum_y) / Math.sqrt((n * sum_xx - sum_x * sum_x) * (n * sum_yy - sum_y * sum_y)), 2);
return lr;
}
export function renderModel(model_id, key_metric, range) {
Plotly.newPlot(
"model_" + model_id,
[{
type: "bar",
orientation: "h",
x: [0],
marker: {
color: "rgb(0, 180, 255)",
},
hoverinfo: "none",
}],
{
xaxis: {
range: range,
showgrid: false,
zeroline: false,
visible: false,
},
yaxis: {
showgrid: false,
zeroline: false,
visible: false,
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },
scrollZoom: false,
dragmode: false,
},
{ displayModeBar: false, responsive: true }
)
Plotly.animate(
"model_" + model_id,
{
data: [{ x: [key_metric] }],
traces: [0],
layout: {}
}, {
transition: {
duration: 500,
easing: 'cubic-in-out'
},
frame: {
duration: 500
}
}
)
}
export function renderDistribution(feature_name, samples, dip) {
Plotly.newPlot(
feature_name + '_distribution',
[{
type: "histogram",
name: feature_name,
x: samples,
marker: {
color: "rgba(0, 180, 255, 0.7)",
line: {
color: "rgba(0, 180, 255, 1)",
width: 1
},
},
}],
{
title: {
font: { family: "Roboto, \"Microsoft Sans Serif\", \"Helvetica Neue\", Arial, sans-serif" },
text: "Distribution: dip = " + (Math.round(dip * 100) / 100).toString(),
},
hoverlabel: {
color: "rgba(0, 180, 255, 0.7)",
bordercolor: "rgba(255, 255, 255, 1)",
font: {
color: "rgba(255, 255, 255, 1)",
family: "Roboto, \"Microsoft Sans Serif\", \"Helvetica Neue\", Arial, sans-serif",
size: 12
},
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
yaxis: { automargin: true },
xaxis: { automargin: true },
margin: { l: 0, r: 0, b: 0, t: 50, pad: 0 },
scrollZoom: false,
dragmode: false,
},
{ displayModeBar: false, responsive: true }
);
}
export function renderOutliers(feature_name, samples, stddev) {
Plotly.newPlot(
feature_name + '_outliers',
[{
type: "box",
jitter: 0.3,
pointpos: -1.8,
boxpoints: 'all',
name: feature_name,
y: samples,
marker: {
color: "rgba(0, 180, 255, 0.3)",
line: {
color: "rgba(0, 180, 255, 0.5)",
width: 1
},
},
}],
{
title: {
font: { family: "Roboto, \"Microsoft Sans Serif\", \"Helvetica Neue\", Arial, sans-serif" },
text: "Outliers: σ = " + (Math.round(stddev * 100) / 100).toString(),
},
hoverlabel: {
bgcolor: "rgba(0, 180, 255, 0.7)",
bordercolor: "rgba(255, 255, 255, 1)",
font: {
color: "rgba(255, 255, 255, 1)",
family: "Roboto, \"Microsoft Sans Serif\", \"Helvetica Neue\", Arial, sans-serif",
size: 12
},
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
yaxis: { automargin: true },
xaxis: { automargin: true },
margin: { l: 0, r: 0, b: 0, t: 50, pad: 0 },
scrollZoom: false,
dragmode: false,
},
{ displayModeBar: false, responsive: true }
);
}
export function renderCorrelation(feature_name, other_name, samples, y) {
var lr = linearRegression(samples, y);
var fit_from = Math.min(...samples);
var fit_to = Math.max(...samples);
Plotly.newPlot(
feature_name + '_correlation_' + other_name,
[{
type: "scatter",
mode: "markers",
name: feature_name,
x: samples,
y: y,
marker: {
color: "rgba(0, 180, 255, 0.4)",
line: {
color: "rgba(0, 180, 255, 0.6)",
width: 1
},
},
}, {
type: 'scatter',
mode: 'lines',
name: "R<sup>2</sup> = " + (Math.round(lr.r2 * 100) / 100).toString(),
x: [fit_from, fit_to],
y: [fit_from * lr.sl + lr.off, fit_to * lr.sl + lr.off],
marker: {
color: "rgba(255, 232, 20, 1)",
line: {
color: "rgba(255, 232, 20, 1)",
width: 2
},
},
}],
{
font: { family: "Roboto, \"Microsoft Sans Serif\", \"Helvetica Neue\", Arial, sans-serif" },
title: "Correlation: R<sup>2</sup> = " + (Math.round(lr.r2 * 100) / 100).toString(),
hoverlabel: {
bgcolor: "rgba(0, 180, 255, 0.7)",
bordercolor: "rgba(255, 255, 255, 1)",
font: {
color: "rgba(255, 255, 255, 1)",
family: "Roboto, \"Microsoft Sans Serif\", \"Helvetica Neue\", Arial, sans-serif",
size: 12
},
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
yaxis: { automargin: true },
xaxis: { automargin: true },
margin: { l: 0, r: 0, b: 0, t: 50, pad: 0 },
showlegend: false,
scrollZoom: false,
dragmode: false,
},
{ displayModeBar: false, responsive: true }
);
}
export function renderHyperparam(id, name, title, param, best_index, mean, std) {
console.log("renderHyperparam", id, name, title, param, best_index, mean, std);
Plotly.newPlot(
id,
[{
type: "scatter",
mode: "markers",
name: name,
x: param,
y: mean,
error_y: {
type: 'data',
array: std,
visible: true,
color: "rgba(0, 180, 255, 0.05)"
},
marker: {
color: "rgba(0, 180, 255, 0.4)",
line: {
color: "rgba(0, 180, 255, 0.6)",
width: 1
},
},
},
{
type: "scatter",
mode: "markers",
name: name,
x: [param[best_index]],
y: [mean[best_index]],
error_y: {
type: 'data',
type: 'constant',
value: std[best_index],
visible: true,
color: "rgba(255, 43, 158, 0.5)"
},
marker: {
color: "rgba(255, 43, 158, 0.7)",
line: {
color: "rgba(255, 43, 158, 1.0)",
width: 1
},
},
}],
{
font: { family: "Roboto, \"Microsoft Sans Serif\", \"Helvetica Neue\", Arial, sans-serif" },
title: title,
hoverlabel: {
bgcolor: "rgba(0, 180, 255, 0.7)",
bordercolor: "rgba(255, 255, 255, 1)",
font: {
color: "rgba(255, 255, 255, 1)",
family: "Roboto, \"Microsoft Sans Serif\", \"Helvetica Neue\", Arial, sans-serif",
size: 12
},
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
yaxis: { automargin: true },
xaxis: { automargin: true },
margin: { l: 0, r: 0, b: 0, t: 50, pad: 0 },
showlegend: false,
scrollZoom: false,
dragmode: false,
},
{ displayModeBar: false, responsive: true }
);
}