@import url(‘https://fonts.googleapis.com/css?family=Droid+Serif|Raleway’);

h1 {
text-align: center;
font-size: 50px;
margin-bottom: 0px;
font-family: ‘Raleway’, serif;
}

p {
color: black;
margin-bottom: 15px;
margin-top: 15px;
font-family: ‘Raleway’, sans-serif;
}

#words {
padding-left: 30px;
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
}

#words_summary {
padding-left: 70px;
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
}

#words_text {
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
}

#words_text_area {
display:inline-block;
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
padding-left: 100px;
}

#calcTitle {
text-align: center;
font-size: 20px;
margin-bottom: 0px;
font-family: ‘Raleway’, serif;
}

#hr_top {
width: 30%;
margin-bottom: 0px;
border: none;
height: 2px;
color: black;
background-color: black;
}

#hr_bottom {
width: 30%;
margin-top: 15px;
border: none;
height: 2px;
color: black;
background-color: black;
}

#words label, input {
display: inline-block;
vertical-align: baseline;
width: 350px;
}

#button {
border: 1px solid;
border-radius: 10px;
margin-top: 20px;

cursor: pointer;
outline: none;
background-color: white;
color: black;
font-family: ‘Work Sans’, sans-serif;
border: 1px solid grey;
/* Green */
}

#button:hover {
background-color: #f6f6f6;
border: 1px solid black;
}

#words_table {
color: black;
font-family: Raleway;
max-width: 350px;
margin: 25px auto;
line-height: 1.75;
}

#summary_table {
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
padding-left: 20px;
}

.label_radio {
text-align: center;
}

td, tr, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
td, th {
min-width: 50px;
height: 21px;
}
.label_radio {
text-align: center;
}

#text_area_input {
padding-left: 35%;
float: left;
}

svg:not(:root) {
overflow: visible;
}

x values:

y values:

function calc() {

//get input data
var x = document.getElementById(‘x’).value.split(‘,’).map(Number);
var y = document.getElementById(‘y’).value.split(‘,’).map(Number);

//check that both lists are equal length
if (x.length – y.length == 0) {
document.getElementById(‘error_msg’).innerHTML = ”;

function linearRegression(y,x){
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;
var sxx = jStat.variance(x) *x.length;

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[‘sxx’] = sxx;
lr[‘slope’] = (n * sum_xy – sum_x * sum_y) / (n*sum_xx – sum_x * sum_x);
lr[‘intercept’] = (sum_y – lr.slope * 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;
}
var lr = linearRegression(y, x);
var a = lr.slope*lr.sxx;
var b = lr.intercept;

document.getElementById(‘a’).innerHTML = a.toFixed(5);
}

//output error message if boths lists are not equal
else {
document.getElementById(‘error_msg’).innerHTML = ‘The two lists must be of equal length.’;
}

} //end calc function