<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
let xSum=0, ySum=0, xxSum=0, xySum=0;
let count = xArray.length;
for (let i = 0, len = count; i < count; i++) {
xSum += xArray[i];
ySum += yArray[i];
xxSum += xArray[i] * xArray[i];
xySum += xArray[i] * yArray[i];
}
let slope = (count * xySum - xSum * ySum) / (count * xxSum - xSum * xSum);
let intercept = (ySum / count) - (slope * xSum) / count;
const xValues = [];
const yValues = [];
for (let x = 50; x <= 150; x += 1) {
xValues.push(x);
yValues.push(x * slope + intercept);
}
const data = [
{x:xArray, y:yArray, mode:"markers"},
{x:xValues, y:yValues, mode:"line"}
];
const layout = {
xaxis: {range: [40, 160], title: "Square Meters"},
yaxis: {range: [5, 16], title: "Price in Millions"},
title: "House Prices vs. Size"
};
Plotly.newPlot("myPlot", data, layout);
</script>