31:T648,md` • ${tex `y`}: the dependent variable we are trying to predict. It is also called the response or output variable. For our example, using the number of bathrooms and bedrooms to predict house price, house price is the dependent variable. • ${tex `x_1, x_2, ... , x_k`}: the independent variables, such as number of bedrooms and number of bathrooms, we are using to predict the dependent variable ${tex `y`}. They are also referred to as predictors and we will be using the term "features" to refer to ${tex `x_1, x_2, ... , x_k`} and "feature" to represent an individual ${tex `x_i`} throughout this project. • ${tex `\beta_0, \beta_1, ... , \beta_k`}: are called regression coefficients. ${tex `\beta_0`} is the intercept. The intercept is always a constant, meaning it does not change value within the model, and is the average value of ${tex `y`} when all independent variables are equal to zero. The remaining coefficients, ${tex `\beta_1, \beta_2, ... , \beta_k`}, are weights or slopes. These determine how much weight one variable contributes to the model. For example: ${tex `\beta_3`} is the weight that ${tex `x_3`} contributes to the model. Later on, we will review regression results and go over coefficients more then. • ${tex `\epsilon`}: error term in the model. It is important to note that the error term does not mean a mistake but is a statistical term representing random fluctuations, measurement errors, or the effect of factors outside of our control. In other words, the error term is the random variation in ${tex `y`} not explained by ${tex `x_1, x_2, ... , x_k`}. `32:Ted2,chartRoomsScaling = { const svg = d3.select(DOM.svg(width*(6/7), height)); // scaling // const scalingBox = svg.append("rect") // .attr("x", (width/2)-65) // .attr("y", (height/2)-65) // .attr("fill", "white") // .attr("stroke", darkpurple) // .attr("stroke-width", 1.5) // .attr("width", 100) // .attr("height", 80); // svg.append("text") // .attr("class", "chartTitle") // .attr("x", (width/2)-15) // .attr("y", 15) // .text(`Scaling`) // svg.append("text") // .attr("class", "scalingText") // .attr("x", (width/2)-15) // .attr("y", (height/2)-10) // .attr("dy", "-1.3em") // .text(`x - ${roomsUnscaledMean}`) // svg.append("text") // .attr("class", "scalingText") // .attr("x", (width/2)-15) // .attr("y", (height/2)-10) // .text(`${roomsUnscaledStd}`) // const divideLine = svg.append("rect") // .attr("x", (width/2)-35-15) // .attr("y", (height/2)-28) // .attr("width", 70) // .attr("height", 2); // const arrow1 = svg.append('image') // .attr('xlink:href', arrowRightURL) // .attr('width', arrowWidth) // .attr('height', arrowHeight) // .attr("x", (width/2)-175) // .attr("y", (height/2) - arrowHeight); // const arrow2 = svg.append('image') // .attr('xlink:href', arrowRightURL) // .attr('width', arrowWidth) // .attr('height', arrowHeight) // .attr("x", (width/2)+40) // .attr("y", (height/2) - arrowHeight); // rooms unscaled graphs svg.append("text") .attr("class", "chartTitle") .attr("x", (width/2)/2) .attr("y", 15) .text(`Rooms Unscaled`) const bar = svg.append("g") .attr("fill", mint) .selectAll("rect") .data(binsRoomsUnscaled) .join("rect") .attr("x", d => xRoomsUnscaled(d.x0) + 1) .attr("width", d => Math.max(0, xRoomsUnscaled(d.x1) - xRoomsUnscaled(d.x0) - 1)) .attr("y", d => yRoomsUnscaled(d.length)) .attr("height", d => yRoomsUnscaled(0) - yRoomsUnscaled(d.length)) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("fill", orange); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html(`Rooms: ${d.x0}
Frequency: ${d.length}`);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("fill", mint) tooltip.style("display", "none");}); svg.append("g") .call(xAxisRoomsUnscaled); svg.append("g") .call(yAxisRoomsUnscaled); // rooms scaled graphs svg.append("text") .attr("class", "chartTitle") .attr("x", 3.15*(width/2)*(6/7)/2) .attr("y", 15) .text(`Rooms Scaled`) const bar2 = svg.append("g") .attr("fill", mint) .selectAll("rect") .data(binsRoomsScaled) .join("rect") .attr("x", d => xRoomsScaled(d.x0) + 1) .attr("width", d => Math.max(0, xRoomsScaled(d.x1) - xRoomsScaled(d.x0) - 1)) .attr("y", d => yRoomsScaled(d.length)) .attr("height", d => yRoomsScaled(0) - yRoomsScaled(d.length)) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("fill", orange); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html(`Rooms: ${d.x0}
Frequency: ${d.length}`);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("fill", mint) tooltip.style("display", "none");}); svg.append("g") .call(xAxisRoomsScaled); svg.append("g") .call(yAxisRoomsScaled); return svg.node(); }33:T82d,trainTestDiagram = { const svg = d3.select(DOM.svg(350, 300)); // train/test split // orignal dataset rect const rect1 = svg.append("rect") .attr("class", "ogRect") .attr("x", trainTestX) .attr("y", 20) .attr("width", trainRectWidth) .attr("height", rectHeight); // original dataset text svg.append("text") .attr("class", "cvText") .attr("x", trainTestX + (trainRectWidth/2)) .attr("y", 20+(rectHeight/2)) .attr("dy", ".35em") .text("Original Dataset") const arrow1 = svg.append('image') .attr('xlink:href', arrowURL) .attr('width', arrowWidth) .attr('height', arrowHeight) .attr('x', trainTestX + (trainRectWidth/2) - .5*arrowWidth) .attr('y', 85) // train rect const rect2 = svg.append("rect") .attr("class", "trainRect") .attr("x", trainTestX) .attr("y", 145) .attr("width", trainRectWidth) .attr("height", rectHeight); // train text svg.append("text") .attr("class", "cvText") .attr("x", trainTestX + ((trainRectWidth-testRectWidth)/2)) .attr("y", 145+(rectHeight/2)) .attr("dy", ".35em") .text("Train"); // test rect const rect3 = svg.append("rect") .attr("class", "testRect") .attr("x", trainTestX+trainRectWidth-testRectWidth) .attr("y", 145) .attr("width", testRectWidth) .attr("height", rectHeight); // test text svg.append("text") .attr("class", "cvText") .attr("x", trainTestX + trainRectWidth - (testRectWidth)/2) .attr("y", 145+(rectHeight/2)) .attr("dy", ".35em") .text("Test"); const arrow2 = svg.append('image') .attr('xlink:href', arrowURL) .attr('width', arrowWidth) .attr('height', arrowHeight) .attr('x', trainTestX + (trainRectWidth/2) - .5*arrowWidth) .attr('y', 205) //mse svg.append("text") .attr("class", "cvText") .attr("x", trainTestX + (trainRectWidth/2)) .attr("y", 145+(rectHeight/2)+100) .attr("dy", ".35em") .text(`MSE: ${numberWithCommas(Math.floor(kFoldMSEData[0].mse*100)/100)}`); return svg.node() }34:T2374,crossValDiagram = { const svg = d3.select(DOM.svg(700, 430)); // original dataset rect const rectOG = svg.append("rect") .attr("class", "ogRect") .attr("x", kFoldX) .attr("y", ogRectY) .attr("width", kTrainRectWidth) .attr("height", rectHeight); // original dataset text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + (kTrainRectWidth/2)) .attr("y", ogRectY+(rectHeight/2)) .attr("dy", ".35em") .text("Original Dataset"); const arrowDown = svg.append('image') .attr('xlink:href', arrowURL) .attr('width', arrowWidth) .attr('height', arrowHeight) .attr('x', kFoldX + (kTrainRectWidth/2) - .5*arrowWidth) .attr('y', ogRectY + arrowHeight) // fold 1 const rect1Train = svg.append("rect") .attr("class", "trainRect") .attr("x", kFoldX) .attr("y", fold5Y) .attr("width", kTrainRectWidth) .attr("height", rectHeight); // train text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + ((kTrainRectWidth-kTestRectWidth)/2)) .attr("y", fold5Y+(rectHeight/2)) .attr("dy", ".35em") .text("Train"); // test rect const rect1Test = svg.append("rect") .attr("class", "testRect") .attr("x", kFoldX+kTrainRectWidth-kTestRectWidth) .attr("y", fold5Y) .attr("width", kTestRectWidth) .attr("height", rectHeight); // test text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + kTrainRectWidth - (kTestRectWidth)/2) .attr("y", fold5Y+(rectHeight/2)) .attr("dy", ".35em") .text("Test"); // fold 2 const rect2Train = svg.append("rect") .attr("class", "trainRect") .attr("x", kFoldX) .attr("y", fold4Y) .attr("width", kTrainRectWidth) .attr("height", rectHeight); // train text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + (kTrainRectWidth-(2*kTestRectWidth))/2) .attr("y", fold4Y+(rectHeight/2)) .attr("dy", ".35em") .text("Train"); svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + kTrainRectWidth - (kTestRectWidth)/2) .attr("y", fold4Y+(rectHeight/2)) .attr("dy", ".35em") .text("Train"); // test rect const rect2Test = svg.append("rect") .attr("class", "testRect") .attr("x", kFoldX+kTrainRectWidth-(2*kTestRectWidth)) .attr("y", fold4Y) .attr("width", kTestRectWidth) .attr("height", rectHeight); // test text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + kTrainRectWidth - (2*kTestRectWidth) + (.5*kTestRectWidth) ) .attr("y", fold4Y+(rectHeight/2)) .attr("dy", ".35em") .text("Test"); // fold 3 const rect3Train= svg.append("rect") .attr("class", "trainRect") .attr("x", kFoldX) .attr("y", fold3Y) .attr("width", kTrainRectWidth) .attr("height", rectHeight); // train text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + (kTrainRectWidth-(3*kTestRectWidth))/2) .attr("y", fold3Y+(rectHeight/2)) .attr("dy", ".35em") .text("Train"); svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + kTrainRectWidth - (2*kTestRectWidth)/2) .attr("y", fold3Y+(rectHeight/2)) .attr("dy", ".35em") .text("Train"); // test rect const rect3Test = svg.append("rect") .attr("class", "testRect") .attr("x", kFoldX+kTrainRectWidth-(3*kTestRectWidth)) .attr("y", fold3Y) .attr("width", kTestRectWidth) .attr("height", rectHeight); // test text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + kTrainRectWidth - (3*kTestRectWidth) + (.5*kTestRectWidth) ) .attr("y", fold3Y+(rectHeight/2)) .attr("dy", ".35em") .text("Test"); // fold 4 const rect4Train= svg.append("rect") .attr("class", "trainRect") .attr("x", kFoldX) .attr("y", fold2Y) .attr("width", kTrainRectWidth) .attr("height", rectHeight); // train text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + (kTestRectWidth/2)) .attr("y", fold2Y+(rectHeight/2)) .attr("dy", ".35em") .text("Train"); svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + kTrainRectWidth - (3*kTestRectWidth)/2) .attr("y", fold2Y+(rectHeight/2)) .attr("dy", ".35em") .text("Train"); // test rect const rect4Test = svg.append("rect") .attr("class", "testRect") .attr("x", kFoldX+kTrainRectWidth-(4*kTestRectWidth)) .attr("y", fold2Y) .attr("width", kTestRectWidth) .attr("height", rectHeight); // test text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + kTrainRectWidth - (4*kTestRectWidth) + (.5*kTestRectWidth) ) .attr("y", fold2Y+(rectHeight/2)) .attr("dy", ".35em") .text("Test"); // fold 5 const rect5Train = svg.append("rect") .attr("class", "trainRect") .attr("x", kFoldX) .attr("y", fold1Y) .attr("width", kTrainRectWidth) .attr("height", rectHeight); // train text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + kTrainRectWidth - (4*kTestRectWidth)/2) .attr("y", fold1Y+(rectHeight/2)) .attr("dy", ".35em") .text("Train"); // test rect const rect5Test = svg.append("rect") .attr("class", "testRect") .attr("x", kFoldX) .attr("y", fold1Y) .attr("width", kTestRectWidth) .attr("height", rectHeight); // test text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + (kTestRectWidth)/2) .attr("y", fold1Y+(rectHeight/2)) .attr("dy", ".35em") .text("Test"); // arrows for each fold const arrow1 = svg.append('image') .attr('xlink:href', arrowRightURL) .attr('width', arrowWidth) .attr('height', arrowHeight) .attr('x', kFoldX + kTrainRectWidth - .3*kTestRectWidth) .attr('y', fold1Y); const arrow2 = svg.append('image') .attr('xlink:href', arrowRightURL) .attr('width', arrowWidth) .attr('height', arrowHeight) .attr('x', kFoldX + kTrainRectWidth - .3*kTestRectWidth) .attr('y', fold2Y); const arrow3 = svg.append('image') .attr('xlink:href', arrowRightURL) .attr('width', arrowWidth) .attr('height', arrowHeight) .attr('x', kFoldX + kTrainRectWidth - .3*kTestRectWidth) .attr('y', fold3Y); const arrow4 = svg.append('image') .attr('xlink:href', arrowRightURL) .attr('width', arrowWidth) .attr('height', arrowHeight) .attr('x', kFoldX + kTrainRectWidth - .3*kTestRectWidth) .attr('y', fold4Y); const arrow5 = svg.append('image') .attr('xlink:href', arrowRightURL) .attr('width', arrowWidth) .attr('height', arrowHeight) .attr('x', kFoldX + kTrainRectWidth - .3*kTestRectWidth) .attr('y', fold5Y); // mse for each fold svg.append("text") .attr("class", "mseText") .attr("x", kFoldX + kTrainRectWidth + 20 + arrowHeight) .attr("y", fold1Y+(rectHeight/2)) .attr("dy", ".35em") .text(`MSE: ${numberWithCommas(Math.floor(kFoldMSEData[0].mse*100)/100)}`); svg.append("text") .attr("class", "mseText") .attr("x", kFoldX + kTrainRectWidth + 20 + arrowHeight) .attr("y", fold2Y+(rectHeight/2)) .attr("dy", ".35em") .text(`MSE: ${numberWithCommas(Math.floor(kFoldMSEData[1].mse*100)/100)}`); svg.append("text") .attr("class", "mseText") .attr("x", kFoldX + kTrainRectWidth + 20 + arrowHeight) .attr("y", fold3Y+(rectHeight/2)) .attr("dy", ".35em") .text(`MSE: ${numberWithCommas(Math.floor(kFoldMSEData[2].mse*100)/100)}`); svg.append("text") .attr("class", "mseText") .attr("x", kFoldX + kTrainRectWidth + 20 + arrowHeight) .attr("y", fold4Y+(rectHeight/2)) .attr("dy", ".35em") .text(`MSE: ${numberWithCommas(Math.floor(kFoldMSEData[3].mse*100)/100)}`); svg.append("text") .attr("class", "mseText") .attr("x", kFoldX + kTrainRectWidth + 20 + arrowHeight) .attr("y", fold5Y+(rectHeight/2)) .attr("dy", ".35em") .text(`MSE: ${numberWithCommas(Math.floor(kFoldMSEData[4].mse*100)/100)}`); // curly bracket const curlyBrag = svg.append('image') .attr('xlink:href', curlyBracURL) .attr("width", 200) .attr("height", rectHeight*5.4) .attr('x', kFoldX + kTrainRectWidth + 100 + arrowHeight ) .attr('y', fold1Y +10) // CV MSE text svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + kTrainRectWidth + 100 + arrowHeight + 200) .attr("y", fold3Y+(rectHeight/2) - 5) .attr("dy", "0em") .text("CV MSE:") .attr("text-anchor", "middle") .attr("font-weight", "bold"); // actual CV MSE svg.append("text") .attr("class", "cvText") .attr("x", kFoldX + kTrainRectWidth + 100 + arrowHeight + 200) .attr("y", fold3Y+(rectHeight/2) - 5) .attr("dy", "1em") .text(`${numberWithCommas(Math.floor(cvMSE*100)/100)}`) .attr("text-anchor", "middle") .attr("font-weight", "bold"); return svg.node(); } 35:Td2c,chartFold = { const svg = d3.select(DOM.svg(width, height)); svg.append("text") .attr("class", "chartTitle") .attr("x", (width* (6/7)) /2) .attr("y", 15) .text(`Fold ${foldNumber} Fit with MSE = ${numberWithCommas(Math.floor(kFoldMSEData[foldNumber - 1].mse*100)/100)}`) // const box = svg.append("rect") // .attr("x", (width* (6/7)) - 325) // .attr("y", height - 100) // .attr("width", 300) // .attr("height", 30) // .attr("fill", "white") // .attr("stroke", darkpurple) // .style("stroke-width", 1.5) // svg.append("text") // .attr("x", (width* (6/7))-325 + 15) // .attr("y", height-80) // .style("font-family", "sans-serif") // .style("font-size", "14px") // .html(`Price = ${numberWithCommas(Math.floor(linearRegression.m*100)/100)} × livingArea + ${numberWithCommas(Math.floor(linearRegression.b*100)/100)}`) const dotsTrain = svg.append("g") .attr("fill", mint) .selectAll("circle") .data(foldTrainData) .join("circle") .attr("cx", d =>xFold(d.XTrain)) .attr("cy", d =>yFold(d.yTrain)) .attr("r", 3) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("fill", purple); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html(`livingArea: ${numberWithCommas(Math.floor(d.XTrain*100)/100)}
Price: $${numberWithCommas(Math.floor(d.yTrain*100)/100)}`);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("fill", mint) tooltip.style("display", "none");}); const dotsTest = svg.append("g") .attr("fill", orange) .selectAll("circle") .data(foldTestData) .join("circle") .attr("cx", d =>xFold(d.XTest)) .attr("cy", d =>yFold(d.yTest)) .attr("r", 3) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("fill", purple); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html(`livingArea: ${numberWithCommas(Math.floor(d.XTest*100)/100)}
Price: $${numberWithCommas(Math.floor(d.yTest*100)/100)}`);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("fill", orange) tooltip.style("display", "none");}); svg.append('path') .classed('regressionLine', true) .datum(regressionPoints) .style("stroke", "black") .style("stroke-width", 2) .attr('d', fittedLine) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("stroke", "grey"); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html(`Price = ${numberWithCommas(Math.floor(linearRegression.b*100)/100)} + ${numberWithCommas(Math.floor(linearRegression.m*100)/100)} × livingArea `);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("stroke", "black") tooltip.style("display", "none");}); svg.append("g") .call(xAxisFold); svg.append("g") .call(yAxisFold); return svg.node(); }36:Tbd8,inputChart1 = { const svg = d3.select(DOM.svg(width, height)); svg.append("text") .attr("class", "chartTitle") .attr("x", width/4 ) .attr("y", 20) .text(`MSE by Model Number`) const bars = svg.append("g") .selectAll("rect") .data(inputModelsData) .join("rect") .attr("x", d => xInputChart1(d.model)) .attr("y", d => yInputChart1(d.mse)) .attr("height", d => yInputChart1(0) - yInputChart1(d.mse)) .attr("width", xInputChart1.bandwidth()) .attr("fill", mint) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("fill", orange); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 125 + "px") .style("display", "inline-block") .html(`MSE: ${numberWithCommas(Math.floor(d.mse*100)/100)}
Features: ${d.selectedFeat}`);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("fill", mint) tooltip.style("display", "none");}); svg.append("g") .call(xAxisInputChart1); svg.append("g") .call(yAxisInputChart1); // input graph 2 svg.append("text") .attr("class", "chartTitle") .attr("x", 1.5*width/2*(6/7)+50) .attr("y", 20) .text(`MSE by Number of Features`) const dotsTrain = svg.append("g") .attr("fill", mint) .selectAll("circle") .data(inputModelsData) .join("circle") .attr("cx", d =>xInputChart2(d.numFeat)) .attr("cy", d =>yInputChart2(d.mse)) .attr("r", 3) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("fill", purple); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 100 + "px") .style("display", "inline-block") .html(`MSE: ${numberWithCommas(Math.floor(d.mse*100)/100)}
Features: ${d.selectedFeat}`);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("fill", mint) tooltip.style("display", "none");}); if (showMeBox==="checked"){ const dotsLowest = svg.append("g") .attr("fill", orange) .selectAll("circle") .data(lowestMSEFeatCountData) .join("circle") .attr("cx", d =>xInputChart2(d.numFeat)) .attr("cy", d =>yInputChart2(d.mse)) .attr("r", 3) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("fill", purple); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 125 + "px") .style("display", "inline-block") .html(`MSE: ${numberWithCommas(Math.floor(d.mse*100)/100)}
Features: ${d.features}`);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("fill", orange) tooltip.style("display", "none");}); } svg.append("g") .call(xAxisInputChart2); svg.append("g") .call(yAxisInputChart2); return svg.node(); }37:T509,chartLinearCC = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width*(7/7), height*(5/7)]); svg.append("g") .selectAll("rect") .data(linearResults) .join("rect") .attr("x", d => xLinear(d.feature)) .attr("y", d => yLinear(findNeg(d.coef))) .attr("height", d => yLinear(0) - yLinear(findNeg(d.coef))) .attr("width", xLinear.bandwidth()) .attr("fill", d => getColor(d.coef)) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("fill", orange); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html(`Feature: ${d.feature}
Coefficient: ${numberWithCommas(Math.floor(d.coef*100)/100)}`);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("fill", d => getColor(d.coef)) tooltip.style("display", "none");});; svg.append("g") .call(xAxisLinear); svg.append("g") .call(yAxisLinear); svg.append("text") .attr("class", "chartTitle") .attr("x", (width*(5/7))/2) .attr("y", 30) .text(`Linear Regression Coefficients`) return svg.node(); }38:T4fe,chartFeatSelection = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width*(7/7), height*(5/7)]); svg.append("g") .selectAll("rect") .data(featData) .join("rect") .attr("x", d => xFeat(d.feature)) .attr("y", d => yFeat(findNeg(d.coef))) .attr("height", d => yFeat(0) - yFeat(findNeg(d.coef))) .attr("width", xFeat.bandwidth()) .attr("fill", d => getColor(d.coef)) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("fill", orange); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html(`Feature: ${d.feature}
Coefficient: ${numberWithCommas(Math.floor(d.coef*100)/100)}`);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("fill", d => getColor(d.coef)) tooltip.style("display", "none");});; svg.append("g") .call(xAxisFeat); svg.append("g") .call(yAxisFeat); svg.append("text") .attr("class", "chartTitle") .attr("x", width/2*(5/7)) .attr("y", 30) .text(`Feature Selection Regression Coefficients`) return svg.node(); }39:T502,chartLassoCC = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width*(7/7), height*(5/7)]); svg.append("g") .selectAll("rect") .data(lassoData) .join("rect") .attr("x", d => xLassoCC(d.feature)) .attr("y", d => yLassoCC(findNeg(d.coef))) .attr("height", d => yLassoCC(0) - yLassoCC(findNeg(d.coef))) .attr("width", xLassoCC.bandwidth()) .attr("fill", d => getColor(d.coef)) .on("mousemove", (d,i,nodes) => { d3.select(nodes[i]).style("fill", orange); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html(`Feature: ${d.feature}
Coefficient: ${numberWithCommas(Math.floor(d.coef*100)/100)}`);}) .on("mouseout", (d,i,nodes) => { d3.select(nodes[i]).style("fill", d => getColor(d.coef)) tooltip.style("display", "none");});; svg.append("g") .call(xAxisLassoCC); svg.append("g") .call(yAxisLassoCC); svg.append("text") .attr("class", "chartTitle") .attr("x", width/2*(5/7)) .attr("y", 30) .text(`Lasso Regression Coefficients`) return svg.node(); }3a:T9e5,createTable1 = (data, options) => { options = Object.assign({}, defaultOptions, options); const { sortable, rank, paged } = options; let sortKey = undefined; let sortDirection = true; let columns = Object.keys(data[0]).map(key => { const opts = options.columns[key] || {}; return { key: key, type: opts.type || typeof data[0][key], options: opts }; }); function bake() { let rows = data.slice(0, paged); return html`

${ options.header === false ? `` : html` ${rank ? html`` : ""} ${columns.map(c => { return th(c, sortKey, sortDirection, sortable); })} ` } ${rows.map( (row, i) => html` ${rank ? html`` : ""} ${columns.map(c => { let displayValue = (c.options.formatter || identity)( row[c.key], i, row ); if ( displayValue instanceof window.HTMLElement && displayValue.tagName == "TD" ) { return displayValue; } return html``; })} ` )}


${i + 1}	${displayValue}

`; } let dom = bake(); return dom; }3b:T8cd,createTable2 = (data, options) => { options = Object.assign({}, defaultOptions, options); const { sortable, rank, paged } = options; let sortKey = undefined; let sortDirection = true; let columns = Object.keys(data[0]).map(key => { const opts = options.columns[key] || {}; return { key: key, type: opts.type || typeof data[0][key], options: opts }; }); function bake() { let rows = data.slice(0, paged); return html`


${i + 1}	${displayValue}

`; } let dom = bake(); return dom; }3c:[] 2f:{"title":"Introduction to Linear Regression","cells":[{"id":5507,"value":"md`# Introduction to Linear Regression`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4976,"value":"md`Linear Regression is a powerful and well-understood machine learning algorithm used for predictive analysis and root cause analysis. It has deep roots in statistics and probability. In the first section of this project, you will learn what precisely a Linear Model is, how to interpret results for scaled and unscaled features, and how linear models are used to make predictions. Next, we will cover accuracy with the validation methods Train-Test Split and K-Fold Cross Validation. You will even get to create your very own models and see their accuracy. Lastly, you will learn about Feature Selection and Lasso Regression as tools to decide which features improve accuracy most and should be included in your linear model. Upon completion, you will have a considerable understanding of the many aspects that go into the making of an accurate linear model.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2165,"value":"md`## Linear Models`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2119,"value":"md`A linear model describes the relationship between a dependent variable as a function of one or more independent variables. Some examples of linear models are: using years of education and years of experience to predict income, using height to predict weight, and using the number of bathrooms and bedrooms to predict the price of a house. The general equation for a linear model is: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3860,"value":"md`${tex`y = \\beta_0 + \\beta_1 * x_1 + \\beta_2 * x_2 + ... + \\beta_k * x_k + \\epsilon` }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3908,"value":"md`with each key part defined below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3883,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4528,"value":"md`Once we select which features to include in a model, an algorithm is used to determine the values of the regression coefficients that minimize the squared residuals. A residual is the difference between the actual value of ${tex `y`} and the predicted value of ${tex `y`}, depicted as ${tex `\\hat{y}`}. Actually, a residual and error term are the same thing! They are both the part of ${tex `y`} left unexplained by ${tex `x_1, x_2, ... , x_k`} used to create the prediction. They are calculated for each value of the dependent variable in the dataset. Therefore, to calculate the regression coefficients, the following equation, referred to as the sum of squares, needs to be minimized:\n\n${tex `\\sum_{i=1}^{n} (y_i - \\hat{y_i})^2`}\n\nThis will appear again later while we go over mean squared error and also Lasso Regression.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2162,"value":"md`## Description of Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"// link to SaratogaHouses description: https://cran.r-project.org/web/packages/mosaicData/mosaicData.pdf\nmd`Throughout this project, we will be using a dataset on houses in Saratoga County, New York, USA in 2006. The data was collected by Candice Corvetti and used in the \"Stat 101\" case study \"How much is a Fireplace\nWorth\". The variables we will use include:\n\n• price - price of house (US dollars)\n\n• lotSize - size of lot (square feet)\n\n• age - age of house (years)\n\n• livingArea - living area (square feet)\n\n• pctCollege - percent of neighborhood that graduated college\n\n• bedrooms - number of bedrooms\n\n• fireplaces - number of fireplaces\n\n• bathrooms - number of bathrooms (half bathrooms have no shower or tub)\n\n• rooms - number of rooms\n\nPrice will be the dependent variable and we will use the remaining features to predict it. An example of a linear model using the Satatoga Houses data is:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2120,"value":"// example of linear models with Saratoga Houses Dataset\nmd`${tex`price = \\beta_0 + \\beta_1 * livingArea + \\beta_2 * fireplaces + \\beta_3 * rooms`}` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2123,"value":"// how to interpret regression results \nmd`This model uses livingArea, fireplaces, and rooms to predict the price of a house in Saratoga Country in 2006. Below are the regression results that show the regression coefficients for this linear model: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3752,"value":"createTable1([\n { feature: linearResultsUnscaled[0]['feature'], coefficient: linearResultsUnscaled[0]['coef']},\n { feature: linearResultsUnscaled[1]['feature'], coefficient: linearResultsUnscaled[1]['coef']},\n { feature: linearResultsUnscaled[2]['feature'], coefficient: linearResultsUnscaled[2]['coef']},\n { feature: linearResultsUnscaled[3]['feature'], coefficient: linearResultsUnscaled[3]['coef']}\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3974,"value":"md`This can also be showed in the form of the equation:\n\n${tex `price = ${numberWithCommas(linearResultsUnscaled[0]['coef'])} + ${numberWithCommas(linearResultsUnscaled[1]['coef'])} * livingArea + ${numberWithCommas(linearResultsUnscaled[2]['coef'])} * fireplaces + ${numberWithCommas(linearResultsUnscaled[3]['coef'])} * rooms `}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3926,"value":"md`If livingArea, fireplaces, and rooms were all zero, the expected price of the house would be $${numberWithCommas(linearResultsUnscaled[0]['coef'])}. Having this combination of features all be equal to zero is nonsensical, however. How can there be a house with zero rooms? In this situation, the intercept has no real meaning but is still necessary for calculating predicted values. Later we will see a method called scaling that gives our intercept a more interpretable value. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3950,"value":"md`Now, how do we interpret the remaining regression coefficients? As an example, let's look at the rooms coefficient. Having a coefficient for rooms of ${numberWithCommas(linearResultsUnscaled[3]['coef'])} means that: on average, holding all other features (livingArea and fireplaces) fixed, increasing rooms by one will increase price by $${numberWithCommas(linearResultsUnscaled[3]['coef'])}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3943,"value":"md`There are three key parts to that interpretation. The first one is \"on average,\" which highlights that not every housing price will respond in this way to rooms, but that this change is what happens on average. The second is \"holding all other features fixed\" which notes that the other features must stay at the same value for this change to happen, or else the overall change will now be dependent on the other feature's coefficient as well.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4010,"value":"md`The last key part pertains to the units. Remember, while explaining each feature, we included the units for that feature. Rooms is measured as the number of rooms and price is measured in US dollars. We also added these units in the coefficient interpretation. This is important because our features are measured in different units. If we were interpreting the coefficient for livingArea, we would have said: on average, holding all other features fixed, increasing livingArea by one unit (one square foot) would increase price by $${numberWithCommas(linearResultsUnscaled[1]['coef'])}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3973,"value":"md`Lastly, we can use these regression results to predict the price of a house in 2006 Saratoga County for different values of the features by placing those values in the linear model equation. For example, if we have 1,000 square feet of livingArea, one fireplace, and four rooms, the predicted value of price would be:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3992,"value":"md`${tex `${numberWithCommas(linearResultsUnscaled[0]['coef'])} + ${numberWithCommas(linearResultsUnscaled[1]['coef'])} * 1,000 + ${numberWithCommas(linearResultsUnscaled[2]['coef'])} * 1 + ${numberWithCommas(linearResultsUnscaled[3]['coef'])} * 4 = `} **$${numberWithCommas(linearResultsUnscaled[0]['coef'] + linearResultsUnscaled[1]['coef']*1000 + linearResultsUnscaled[2]['coef'] + linearResultsUnscaled[3]['coef']*4)}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2128,"value":"md`## Scaling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2131,"value":"md`The concept of scaling is important when continuous independent variables are measured at different scales. For example, livingArea falls between 616 and 5,228 square feet. Meanwhile, fireplaces is between 0 and 4. Because of this, variables do not give an equal contribution to the analysis and thus need to be scaled. This is also called standardization and allows variables to be measured on comparable scales. The process of standardization includes subtracting the mean and dividing by the standard deviation. After standardizing independent variables, you can better determine which variables are most important for determining output. The importance is ranked in descending order of absolute value of the standardized coefficient of our independent variables. That is to say, larger standardized coefficients, negative or positive, are more important than smaller ones.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3103,"value":"md`For the rooms feature, the mean is ${roomsUnscaledMean} and the standard deviation is ${roomsUnscaledStd}. Therefore, each value for rooms will pass through the standardization equation below so that the mean is subtracted from the value and then divided by the standard deviation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2546,"value":"latex = md`${tex`z = \\dfrac{x - ${roomsUnscaledMean}}{${roomsUnscaledStd}}`}` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4279,"value":"md`Now you can see how the distribution of rooms changes before and after scaling. The center is now between -.5 and 0 and all values fall between -2.2 and 2:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3093,"value":"md`This standardization would be done for each feature. However, standardizing changes the interpretation of the coefficients. The intercept is now simply the mean of ${tex `y`} at the mean value of each of the features. The remaining standardized regression coefficients are interpreted as the number of standard deviation units ${tex `y`} changes with an increase in one standard deviation of that feature.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3307,"value":"md`Below are the regression results including the same features as the model before, but now with standardized features:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3781,"value":"createTable1([\n { feature: linearResultsScaled[0]['feature'], coefficient: linearResultsScaled[0]['coef'] },\n { feature: linearResultsScaled[1]['feature'], coefficient: linearResultsScaled[1]['coef'] },\n { feature: linearResultsScaled[2]['feature'], coefficient: linearResultsScaled[2]['coef'] },\n { feature: linearResultsScaled[3]['feature'], coefficient: linearResultsScaled[3]['coef'] }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4329,"value":"md`The scaled intercept value is now ${numberWithCommas(linearResultsScaled[0]['coef'])}. This means that when livingArea, fireplaces, and rooms are all at their average value, the price of the house, on average, will be $${numberWithCommas(linearResultsScaled[0]['coef'])}. Also, on average, holding all other features fixed, increasing the value of livingArea by one standard deviation will increase price by $${numberWithCommas(linearResultsScaled[1]['coef'])}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4340,"value":"md`As mentioned above, importance is determined by ranking independent variables based on the descending order of absolute value of the standardized coefficient. After looking at the regression results for the standardized features, we can determine that livingArea is the most important of the three features included. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3134,"value":"md`**Please note:** throughout the remainder of this project, all features will be standardized.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`## Cross Validation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2133,"value":"md`So we have a handful of models to predict house price, but how do we pick which one to use? The answer is by using cross validation. Cross validation determines the quality of a linear model and helps us select the model which will perform best on unseen data. That is which model is the best predictor of the actual house price. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3167,"value":"md`Throughout the cross validation section, we will be assessing the quality of the below linear model using the standardized feature:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3170,"value":"md`${tex`price = \\beta_0 + \\beta_1 * livingArea`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3141,"value":"md`### Train-Test Split`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3160,"value":"md`To test model performance, we will first separate our dataset into a training set and a testing set. The training set will be used to train or fit our model. With the fit provided from the training set, we will then test how accurate our model is by having it predict the values in the testing set. Model performance is determined by how far those predicted values are from the actual testing set values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3154,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3279,"value":"md`### Mean Squared Error`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3152,"value":"md`The metric we will use to determine prediction performance is the mean squared error (MSE). The equation below is used to calculate the MSE:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3366,"value":"md`${tex ` MSE = \\dfrac{1}{n} \\sum_{i=1}^{n} (y_i - \\hat{y_i})^2`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3386,"value":"md`The purpose of MSE is to measure the difference between predicted values ${tex `\\hat{Y_i}`} and the actual values ${tex `Y_i`} where greater differences are penalized more than smaller ones. This difference between predicted and actual is called the residual. Some residuals will be positive and others negative depending on where the predicted value is relative to the actual value. If we sum these residuals, we should obtain a value of zero. In order to make use of these residual terms to help assess goodness of fit, we first square the individual terms, which results in a positive number for all values, before adding them all together. The last step is to divide the summation of squared residuals by the number of datapoints in the testing set, ${tex`n`}. And now we have the MSE.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3283,"value":"md`### K-Fold Cross Validation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2134,"value":"md`In K-Fold Cross Validation, we split the dataset into K number of sections or folds. Each fold will be used as a testing set while the remaining will be used as the training set. K-Fold allows for a more accurate performance metric since all data points are used in the testing set at some point. This is not the case for a single Train-Test Split. The diagram below shows the 5-Fold Cross Validation process while trying to predict price with livingArea:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3422,"value":"md`In the first iteration, the first fold is used to test the model, and the second through fifth are used to train the model. In the second iteration, the second fold is used as the testing set, while the rest serve as the training set. We repeat this process until each fold of the 5 folds are used as the testing set. For each fold, we calculate the MSE and then take the average to find the K-Fold Cross Validation MSE.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3435,"value":"md`To better understand what is happening in each iteration, flip through the different folds below to see how the prediction changes depending on which points are in the training or testing set. For each fold, hover over the line of best fit to see the linear regression equation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"viewof foldSelected = radio({\n description: md` = train = test`,\n options: [\n { label: 'Fold 1', value: 1 },\n { label: 'Fold 2', value: 2 },\n { label: 'Fold 3', value: 3 },\n { label: 'Fold 4', value: 4 },\n { label: 'Fold 5', value: 5 },\n ],\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":4368,"value":"md`As you can see, because of how the points were seperated into training and testing sets, the fourth fold has an MSE of ${numberWithCommas(Math.floor(kFoldMSEData[4 - 1].mse*100)/100)}, but that the fifth fold has an MSE of ${numberWithCommas(Math.floor(kFoldMSEData[5 - 1].mse*100)/100)}. These differ by a significant amount and help show why it is so essential to do K-Fold CV, so all data points are in the testing set at some point instead of doing a single Train-Test Split where only a select portion is included.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`## User Input Graphs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3444,"value":"md`Now that you understand model accuracy, it is your turn to construct a model to determine the price. Select which variables you would like to include, click the submit button, and see the graphs below update. You can submit as many models as you would like. The mean squared errors will be calculated using K-Fold Cross Validation. Can you find which variables provide the lowest MSE and therefore the best accuracy? `","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"viewof selectedFeats = checkbox({\n title: \"Features\",\n description:\"Please select features for your model\",\n options: [\"lotSize\", \"age\", \"livingArea\", \"pctCollege\", \"bedrooms\", \"fireplaces\", \"bathrooms\", \"rooms\"],\n value: [\"lotSize\",\"age\",\"bedrooms\"],\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3450,"value":"md`Once you are done, click the \"Show Me\" box to see the lowest MSE for each Number of Features and the features included to get that MSE on the MSE by Number of Features graph:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3037,"value":"viewof showMeBox = checkbox({\n description: \"Check the box to see the lowest MSE for each Number of Features\",\n options: [{ value: \"checked\", label: \"Show me\" }]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3455,"value":"md`After submitting your models and clicking the \"Show Me\" button, you probably realized that more features in the model does not necessarily improve accuracy. The lowest MSE occurs when only 5 features are used: livingArea, bathrooms, bedrooms, rooms, and lotSize. If you add any more, the MSE starts to increase again. Shouldn't more features mean more data to make the model even more accurate? This is not always the case and introduces us to the Bias Variance Trade-Off.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2136,"value":"md`## The Bias Variance Trade-Off`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3461,"value":"md`For each model, there are two different kinds of errors within the mean squared error: reducible and irreducible. Irreducible error is the measure of the amount of noise in our data and cannot be reduced by using better models. However, we can minimize the reducible error by choosing a model that better fits our problem and by fine-tuning the model's performance. The reducible error consists of two parts, bias error and variance error.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3467,"value":"md`Bias error is the difference between the average prediction of our model and the actual value. A model that pays little attention to the training data and oversimplifies, by not having enough features, will have a high bias. As you include more features, this bias will decrease.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3476,"value":"md`Variance error is the variability of model prediction for a given data point. A model with too many features will have high variance. Reducing the number of features can reduce this type of error.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3468,"value":"md`Overall, if our model has too few features, then it may have high bias and low variance. On the other hand, if our model has too many features, it will have high variance and low bias. This is why we refer to it as a trade-off. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3488,"value":"md`While constructing a model, it is important to add and remove features to see which features, and what number of them, yield the best model. But how do we know which features to add and which to remove?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2144,"value":"md`## Feature Selection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4042,"value":"md`Accuracy not only depends on the number of features you include but also on which features you include! You likely noticed this while creating your models. While making a model with only one feature, livingArea yields a lower mean squared error than fireplaces. Feature selection is a process where you automatically select the features in your data that contribute most to the dependent variable and accuracy. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4075,"value":"md`We used a part of the Feature Selection process to find which features to include in the model that gave the lowest MSE for a specified number of features. These results were seen once the \"Show Me\" was selected. By looking at the order that the features are added to the model, we also know the order of contribution. The lists of features are shown below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4047,"value":"createTable2([\n { features: lowestMSEFeatCountData[0]['features'] },\n { features: lowestMSEFeatCountData[1]['features'] },\n { features: lowestMSEFeatCountData[2]['features'] },\n { features: lowestMSEFeatCountData[3]['features'] },\n { features: lowestMSEFeatCountData[4]['features'] },\n { features: lowestMSEFeatCountData[5]['features'] },\n { features: lowestMSEFeatCountData[6]['features'] },\n { features: lowestMSEFeatCountData[7]['features'] }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4451,"value":"md`You know you have reached the optimal set of features if adding more begins to decrease the accuracy of your model. We saw this happen when we added fireplaces to the model that already included livingArea, bathrooms, bedrooms, rooms, and lotSize. Therefore, we can conclude that a model with only livingArea, bathrooms, bedrooms, rooms, and lotSize will be the most accurate. Knowing when to stop adding features is the last step in Feature Selection.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4080,"value":"md`Remember, if we run a regression with all the scaled variables, their importance appears in decreasing magnitude. By looking at the order for which variables are included in the model depending on its size, we can make assumptions about coefficient magnitudes. Since livingArea was the first variable selected, that means it has the highest magnitude of all the features and is, therefore, most important for our model. Since age was chosen last, it has the lowest magnitude and is thus the least important to determine house price in this dataset. We will show that this assumption about coefficient magnitude is correct later in the *Comparing Coefficients* section.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`## Lasso Regression`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4477,"value":"md`Another analysis for selecting which features to include in a model is Lasso Regression. Lasso selects features by imposing a constraint on the model parameters that causes regression coefficients for some features to shrink toward zero. Those that reach zero are excluded from the model and those that do not remain. The features with non-zero regression coefficients are the ones most strongly associated with the response variable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4585,"value":"md`Remember that linear regression coefficients are calculated by minimizing the sum of squares: \n\n${tex `\\sum_{i=1}^{n} (y_i - \\hat{y_i})^2`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4486,"value":"md`Lasso Regression also minimizes this equation but subject to a constraint. This constraint requires that the summation of the absolute values of the regression coefficients must be less than or equal to a value of lambda:\n\n${tex`|\\beta_1| + |\\beta_2| + ... + |\\beta_k| \\leq \\lambda`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2151,"value":"md`The graph below shows the constraint space for ${tex `\\beta_1`} and ${tex `\\beta_2`}, and how the space changes as lambda changes:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"viewof lassoLambda = slider({\n title: \"Lambda Value\",\n min: 0,\n max: 10,\n precision: 3,\n // submit: true,\n description: \"Please select a value for lambda\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1605,"value":"chartLasso = {\n const svg = d3.select(DOM.svg(height, height)); \n // create points for polygon \n const poly = [{\"x\":0, \"y\":lassoLambda},\n {\"x\":lassoLambda,\"y\":0},\n {\"x\":0,\"y\":-lassoLambda},\n {\"x\":-lassoLambda,\"y\":0}];\n // text showing equation\n svg.append(\"text\")\n .attr(\"x\", 50)\n .attr(\"y\", 50)\n .attr(\"font-weight\", \"bold\")\n .text(\"|β₁| + |β₂| ≤ λ\")\n \n svg.selectAll(\"polygon\")\n .data([poly])\n .enter().append(\"polygon\")\n .attr(\"fill\", mint)\n .attr(\"points\", d => { \n return d.map( d => {\n return [xLasso(d.x-.65),yLasso(d.y-.01)].join(\",\");\n }).join(\" \");\n });\n \n svg.append(\"g\")\n .call(xAxisLasso);\n \n svg.append(\"g\")\n .call(yAxisLasso);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4600,"value":"md`Putting the sum of squares and the constraint together, the Lasso Regression minimizes the following:\n\n${tex `\\sum_{i=1}^{n} (y_i - \\hat{y_i})^2 + \\lambda\\sum_{j=1}^{k}|\\beta_j|`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4494,"value":"md`Lambda is also known as a tuning parameter. If it is equal to zero, the regression coefficient magnitudes are the same as the linear regression coefficient magnitudes, and no features are excluded. As lambda increases (causing the constraint space to increase), bias also increases as the coefficient magnitudes shrink and features are excluded. As lambda decreases, the variance increases. Therefore, an optimal lambda does exist that minimizes the mean squared error.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2156,"value":"md`## Comparing Coefficients`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4616,"value":"md`Throughout this project, we have gone over Linear Regression, Feature Selection, and Lasso Regression. In this section, we will see how the coefficients change between the three and also how they vary within each other. For the Feature Selection Regression Coefficients, you can see how coefficient magnitudes change depending on the size of the model and the addition of more features. For the Lasso Regression Coefficients, you can see how coefficient magnitudes change as you change the value for lambda.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1427,"value":"md` = positive = negative`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4630,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":4777,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4661,"value":"viewof featSelInput = slider({\n title: \"Number of Features for Feature Selection\",\n min: 1,\n max: 8,\n precision: 0,\n submit: true,\n description: \"Please select number of features\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4659,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":4792,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2845,"value":"viewof lassoInput = slider({\n title: \"Lambda Value for Lasso Regression\",\n min: 0,\n max: 4000,\n precision: 0,\n submit: true,\n description: \"Please select a value for lambda\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":4882,"value":"md`As lambda increases and is approximately 1,000, we see the coefficient for age become zero. As we continue to increase to 4,000, we see fireplaces, rooms, and bedrooms also converge to zero. As lambda goes to infinity, we would see all coefficients converge to zero except for the intercept, which would remain unchanged.\n\nAs we mentioned earlier, there is an optimal lambda value that minimizes the mean squared error for a Lasso Regression. For this dataset, the value is actually ${optimalLasso[0]['optimalLambda']}, which results in a MSE of ${numberWithCommas(Math.floor(optimalLasso[0]['optimalMSE']*100)/100)}. If you recall, the lowest MSE during Feature Selection was ${numberWithCommas(Math.floor(lowestMSEFeatCountData[4]['mse']*100)/100)}. In terms of accuracy, the Feature Selection model with only livingArea, bathrooms, bedrooms, rooms, and lotSize is better than the Lasso Regression.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4902,"value":"md`## Conclusion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4905,"value":"md`Throughout this project, you have learned:\n\n• what a linear model is\n\n• how to interpret regression results for unstandardized and standardized features\n\n• the difference between a Train-Test Split and K-Fold Cross Validation\n\n• the importance of the Bias Variance Trade-Off\n\n• how to use Feature Selection to find an optimal model\n\n• how Lasso Regression and its constraint space works\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4910,"value":"md`After understanding all of these sections, you now know how to make accurate linear models for continuous independent variables.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5035,"value":"logo = {\n const svg = d3.select(DOM.svg(800, 180));\n \n const logoImage = svg.append('image')\n .attr('xlink:href', logoURL)\n .attr('width', 800)\n .attr('height', 180)\n .attr('x', -250)\n // .attr('x', -90)\n .attr('y', 0)\n \n // svg.append(\"text\")\n // // .attr(\"x\", 0)\n // .attr(\"x\", 80)\n // .attr(\"y\", 240)\n // .style(\"font-size\",\"30px\")\n // .style(\"font-family\", \"arial\")\n // .style(\"font-weight\", \"bold\")\n // .style(\"fill\", \"#3f3f3f\")\n // .text(\"Introduction to Linear Regression\")\n\nreturn svg.node()}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5237,"value":"md`*By Kaydee Hartmann, Business Laboratory Intern *\n\n*[Business Laboratory](http://www.business-laboratory.com) harnesses powerful business intelligence using data science models that enable business leaders better ways to solve complex problems. We perform scientific simulations and model-based analysis for mid-size and large businesses, and government organizations. *\n\n*This project was completed with the help of Brooks Lybrand and Edward Krueger. Python's Scikit-learn library was used for all preprocessing and statistical modeling. Code for the Flask application containing the APIs can be found [here](https://github.com/kdhartmann/LinearRegression). The application was deployed using Heroku and all APIs were tested using pytest. The charts in this Observable Notebook were made using Javascript's D3 library. The remaining code can be found below.*\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5619,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":5527,"value":"md`Imports:\n\n• [@tmcw/tables@513](https://observablehq.com/@tmcw/tables)\n\n• [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5556,"value":"space = {\n \n const svg = d3.select(DOM.svg(800, 50)); \n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2375,"value":"md`#### Linear Results Tables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3593,"value":"linearResultFeatures = [\"livingArea\", \"fireplaces\", \"rooms\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3592,"value":"linearResultsUnscaled = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//linear_regression?scale=unscaled`,{method:\"POST\",\n body: JSON.stringify({\n features: linearResultFeatures\n }),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\"\n }\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3294,"value":"linearResultsScaled = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//linear_regression?scale=scaled`,{method:\"POST\",\n body: JSON.stringify({\n features: linearResultFeatures\n }),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\"\n }\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2206,"value":"import {table} from \"@tmcw/tables@513\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2204,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2217,"value":"defaultOptions = ({ columns: {}, style: 'normal', paged: 8 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2214,"value":"identity = i => i","pinned":false,"hidden":false,"mode":"ojs"},{"id":2219,"value":"th = (c, sortKey, sortDirection, sortable) => {\n let {\n options: { title }\n } = c;\n let sortIndicator = sortKey && sortDirection ? \"↑\" : \"↓\";\n let arrow = html`${sortIndicator}`;\n let displayedTitle = title !== undefined ? title : c.key;\n return c.type === \"number\"\n ? html`\n ${arrow}${displayedTitle}\n `\n : html`\n ${displayedTitle}${arrow}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"md`#### Rooms Scaling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"roomsUnscaledData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/rooms?scale=unscaled\", ({rooms}) => +rooms)) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2530,"value":"roomsUnscaledMean = Math.floor(d3.mean(roomsUnscaledData.map(d => d.rooms))*100)/100","pinned":false,"hidden":false,"mode":"ojs"},{"id":2539,"value":"roomsUnscaledStd = Math.floor(d3.deviation(roomsUnscaledData.map(d => d.rooms))*100)/100","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"roomsScaledData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/rooms?scale=scaled\", ({rooms}) => +rooms))","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"xRoomsUnscaled = d3.scaleLinear()\n .domain(d3.extent(roomsUnscaledData.map(d => d.rooms)))\n .range([margin.left, (width/2)*(6/7)-margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"binsRoomsUnscaled = d3.histogram()\n .domain(xRoomsUnscaled.domain())\n .thresholds(xRoomsUnscaled.ticks(12))\n (roomsUnscaledData.map(d => d.rooms))","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"yRoomsUnscaled = d3.scaleLinear()\n .domain([0, d3.max(binsRoomsUnscaled, d => d.length)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"xAxisRoomsUnscaled = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xRoomsUnscaled).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", (width/4)- 18 )\n .attr(\"y\", 29)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"Rooms\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"yAxisRoomsUnscaled = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yRoomsUnscaled))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"xRoomsScaled = d3.scaleLinear()\n .domain(d3.extent(roomsScaledData.map(d => d.rooms)))\n .range([width*(6/7) - margin.right - (width/2) + 3*margin.left, (width)*(6/7) - .5*margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"binsRoomsScaled = d3.histogram()\n .domain(xRoomsScaled.domain())\n .thresholds(xRoomsScaled.ticks(12))\n (roomsScaledData.map(d => d.rooms))","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"yRoomsScaled = d3.scaleLinear()\n .domain([0, d3.max(binsRoomsScaled, d => d.length)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"xAxisRoomsScaled = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xRoomsScaled).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", width*(6/7)*(3/4)+30)\n .attr(\"y\", 29)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"Rooms\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"yAxisRoomsScaled = g => g\n .attr(\"transform\", `translate(${width*(6/7) - margin.right - (width/2) + 3*margin.left},0)`)\n .call(d3.axisLeft(yRoomsScaled))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"md`#### Cross Validation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"kFoldMSEData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_mse\", ({mse}) => +mse))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"cvMSE = (kFoldMSEData[0].mse + kFoldMSEData[1].mse + kFoldMSEData[2].mse + kFoldMSEData[3].mse + kFoldMSEData[4].mse)/5","pinned":false,"hidden":false,"mode":"ojs"},{"id":5038,"value":"logoURL = \"https://user-images.githubusercontent.com/25338504/62653798-f4965e80-b923-11e9-92a4-41576497ccf3.png\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"arrowURL = \"https://user-images.githubusercontent.com/25338504/60997748-2a442980-a31d-11e9-8e75-55a4d953f149.png\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"arrowRightURL = \"https://user-images.githubusercontent.com/25338504/60998839-5c568b00-a31f-11e9-83d5-2359190ef91f.png\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"curlyBracURL = \"https://user-images.githubusercontent.com/25338504/60994777-c454a380-a316-11e9-8681-81431e2eb6ab.png\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3186,"value":"ogRectY = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"arrowWidth = width/10","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"arrowHeight = height/10","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"trainRectWidth = {\n if (width>500){\n yield 245\n } else{\n yield width/2\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"testRectWidth = trainRectWidth/5","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"rectHeight = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"trainTestX = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":3244,"value":"kTrainRectWidth = {\n if (width>800){\n yield trainRectWidth\n }else {\n yield width/3\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3251,"value":"kTestRectWidth = kTrainRectWidth/5","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"kFoldX = trainTestX","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"fold1Y = ogRectY + 2*arrowHeight","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"fold2Y = fold1Y + rectHeight + 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"fold3Y = fold2Y +rectHeight +10","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"fold4Y = fold3Y + rectHeight + 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"fold5Y = fold4Y + rectHeight + 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"md`#### K-Fold fits` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"kfold1TestData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_sets?fold_set=test&fold_num=1\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1959,"value":"kfold2TestData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_sets?fold_set=test&fold_num=2\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1961,"value":"kfold3TestData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_sets?fold_set=test&fold_num=3\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1963,"value":"kfold4TestData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_sets?fold_set=test&fold_num=4\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1965,"value":"kfold5TestData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_sets?fold_set=test&fold_num=5\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1974,"value":"kfold1TrainData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_sets?fold_set=train&fold_num=1\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1976,"value":"kfold2TrainData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_sets?fold_set=train&fold_num=1\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1978,"value":"kfold3TrainData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_sets?fold_set=train&fold_num=3\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1980,"value":"kfold4TrainData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_sets?fold_set=train&fold_num=4\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1982,"value":"kfold5TrainData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/kfold_sets?fold_set=train&fold_num=5\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"ss = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"foldNumber = parseInt(foldSelected)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1338,"value":"foldTestData = {\n if (foldNumber===1) {\n yield kfold1TestData;\n } else if (foldNumber===2){\n yield kfold2TestData;\n }else if (foldNumber===3){\n yield kfold3TestData;\n } else if (foldNumber===4){\n yield kfold4TestData;\n }else{\n yield kfold5TestData;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"foldTrainData = {\n if (foldNumber===1) {\n yield kfold1TrainData;\n } else if (foldNumber===2){\n yield kfold2TrainData;\n }else if (foldNumber===3){\n yield kfold3TrainData;\n } else if (foldNumber===4){\n yield kfold4TrainData;\n }else{\n yield kfold5TrainData;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"linearRegression = ss.linearRegression(foldTrainData.map(d => [d.XTrain, d.yTrain]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"linearRegressionLine = ss.linearRegressionLine(linearRegression)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"regressionPoints = {\n const firstX = d3.min(foldTrainData.map(d => d.XTrain));\n const lastX = d3.max(foldTrainData.map(d => d.XTrain));\n const xCoordinates = [firstX, lastX];\n \n return xCoordinates.map(d => ({\n x: d, \n y: linearRegressionLine(d)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"fittedLine = d3.line()\n .x(d => xFold(d.x))\n .y(d => yFold(d.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"xFold = d3.scaleLinear()\n .domain([d3.min([d3.min(foldTrainData.map(d=> d.XTrain)), d3.min(foldTestData.map(d=> d.XTest))]), 5.6])\n .range([margin.left, width*(6/7) - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"yFold = d3.scaleLinear()\n .domain([0, d3.max([d3.max(foldTrainData.map(d => d.yTrain)), d3.max(foldTestData.map(d => d.yTest))])])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"xAxisFold = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xFold).tickFormat(d3.format(\"d\")).tickValues([-1,0,1,2,3,4,5]))\n .call(g => g.append(\"text\")\n .attr(\"x\", (width*(6/7)/2)+30)\n .attr(\"y\", 28)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"livingArea\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"yAxisFold = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yFold))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"y\", -42)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Price\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"md`#### Input Graphs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3570,"value":"latestInput = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com/input_graphs`,{method:\"POST\",\n body: JSON.stringify({\n features: selectedFeats\n }),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\"\n }\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3502,"value":"history = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":4099,"value":"inputModelsData = {\n const model = history.length + 1\n const newLatestModel = { ...latestInput[0], model }\n history.push(newLatestModel)\n return history\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2454,"value":"lowestMSEFeatCountData = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/lowest_mse_by_count\", ({mse}) => +mse))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1840,"value":"xInputChart1 = d3.scaleBand()\n .domain(inputModelsData.map(d => d.model))\n .range([margin.left+24, (width/2)*(6/7) - margin.right-15])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1842,"value":"yInputChart1 = d3.scaleLinear()\n .domain([0, d3.max(inputModelsData, d => d.mse)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1845,"value":"xAxisInputChart1 = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xInputChart1).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", (width/4)*(6/7) + 13)\n .attr(\"y\", 29)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"Model Number\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1847,"value":"yAxisInputChart1 = g => g\n .attr(\"transform\", `translate(${margin.left+28},0)`)\n .call(d3.axisLeft(yInputChart1))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1865,"value":"xInputChart2 = d3.scaleLinear()\n .domain([0,8])\n .range([(width/2)*(6/7) + 1.5*margin.left, width*(6/7) - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1867,"value":"yInputChart2 = d3.scaleLinear()\n .domain([4000000000, d3.max(inputModelsData.map(d => d.mse))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1869,"value":"xAxisInputChart2 = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xInputChart2).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", 1.5*(width/2)*(6/7)+35)\n .attr(\"y\", 28)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"Number of Features\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1875,"value":"yAxisInputChart2 = g => g\n .attr(\"transform\", `translate(${width/2*(6/7) + 1.5*margin.left},0)`)\n .call(d3.axisLeft(yInputChart2))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"y\", -42)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"MSE\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4522,"value":"md`#### Feature Selection Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4057,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":4249,"value":"md`#### Lasso`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"xLasso = d3.scaleLinear()\n .domain([-10,10])\n .range([margin.left, height - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1637,"value":"yLasso = d3.scaleLinear()\n .domain([-10,10])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1625,"value":"xAxisLasso = g => g\n .attr(\"transform\", `translate(${margin.right - margin.left + 15},${(height/2)})`)\n .call(d3.axisBottom(xLasso).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", height - margin.right + 6)\n .attr(\"y\", 30)\n .attr(\"fill\", \"#000\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-size\", \"12px\")\n .attr(\"font-weight\", \"bold\")\n .text(\"β₁\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1640,"value":"yAxisLasso = g => g\n .attr(\"transform\", `translate(${(height/2)},0)`)\n .call(d3.axisLeft(yLasso))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 7)\n .attr(\"y\", height-65)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-size\", \"12px\")\n .attr(\"font-weight\", \"bold\")\n .text(\"β₂\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"md`#### Linear Regression Results`","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"linearResults = Object.assign(await d3.json(\"https://bl-linear-regression.herokuapp.com/linear_regression_all\", ({coef}) => +coef))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4639,"value":"xLinear = d3.scaleBand()\n .domain(linearResults.map(d => d.feature))\n .range([margin.left, width*(5/7) - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4647,"value":"yLinear = d3.scaleLinear()\n .domain([0, d3.max(linearResults, d => d.coef)]).nice()\n .range([height*(5/7) - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4642,"value":"xAxisLinear = g => g\n .attr(\"transform\", `translate(0,${height*(5/7) - margin.bottom})`)\n .call(d3.axisBottom(xLinear).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", (width/2)*(5/7) + 13)\n .attr(\"y\", 29)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"Features\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4650,"value":"yAxisLinear = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yLinear))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Magnitude\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"md`#### Feature Selection Regression Results`","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"selFeat1Data = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//feature_selection_results?num_feats=1`, ({coef}) => +coef))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2039,"value":"selFeat2Data = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//feature_selection_results?num_feats=2`, ({coef}) => +coef))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2041,"value":"selFeat3Data = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//feature_selection_results?num_feats=3`, ({coef}) => +coef))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2043,"value":"selFeat4Data = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//feature_selection_results?num_feats=4`, ({coef}) => +coef))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2045,"value":"selFeat5Data = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//feature_selection_results?num_feats=5`, ({coef}) => +coef))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2047,"value":"selFeat6Data = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//feature_selection_results?num_feats=6`, ({coef}) => +coef))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"selFeat7Data = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//feature_selection_results?num_feats=7`, ({coef}) => +coef))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2051,"value":"selFeat8Data = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//feature_selection_results?num_feats=8`, ({coef}) => +coef))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4666,"value":"featData = {\n if (featSelInput===1){\n yield selFeat1Data;\n } else if (featSelInput===2){\n yield selFeat2Data;\n }else if (featSelInput===3){\n yield selFeat3Data;\n }else if (featSelInput===4){\n yield selFeat4Data;\n }else if (featSelInput===5){\n yield selFeat5Data;\n }else if (featSelInput===6){\n yield selFeat6Data;\n }else if (featSelInput===7){\n yield selFeat7Data;\n }else{\n yield selFeat8Data;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4671,"value":"xFeat = d3.scaleBand()\n .domain(featData.map(d => d.feature))\n .range([margin.left, width*(5/7) - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4673,"value":"yFeat = d3.scaleLinear()\n .domain([0, d3.max(featData, d => d.coef)]).nice()\n .range([height*(5/7) - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4677,"value":"xAxisFeat = g => g\n .attr(\"transform\", `translate(0,${height*(5/7) - margin.bottom})`)\n .call(d3.axisBottom(xFeat).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", (width/2)*(5/7) + 13)\n .attr(\"y\", 29)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"Features\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4688,"value":"yAxisFeat = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yFeat))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Magnitude\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4816,"value":"md`#### Lasso - Comparing Coefficients`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2889,"value":"lassoData = Object.assign(await d3.json(`https://bl-linear-regression.herokuapp.com//lasso_results?alpha=${lassoInput}`, ({coef}) => +coef));","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"xLassoCC = d3.scaleBand()\n .domain(lassoData.map(d => d.feature))\n .range([margin.left, width*(5/7) - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"yLassoCC = d3.scaleLinear()\n .domain([0, d3.max(lassoData, d => d.coef)]).nice()\n .range([height*(5/7) - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"xAxisLassoCC = g => g\n .attr(\"transform\", `translate(0,${height*(5/7) - margin.bottom})`)\n .call(d3.axisBottom(xLassoCC).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", (width/2)*(5/7) + 13)\n .attr(\"y\", 29)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"Features\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"yAxisLassoCC = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yLassoCC))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Magnitude\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4879,"value":"optimalLasso = Object.assign(await d3.json('https://bl-linear-regression.herokuapp.com/optimal_lasso'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"md`#### For the Notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"tooltip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"margin = ({top: 30, right: 20, bottom: 30, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"// https://observablehq.com/@jashkenas/inputs?collection=@observablehq/libraries#sliderDemo\nimport {slider} from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"import {checkbox} from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":2448,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"md`#### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"function numberWithCommas(x) {\n var parts = x.toString().split(\".\");\n parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n return parts.join(\".\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"function findNeg(coef){\n let newCoef = coef;\n if (coef<0){\n newCoef = coef * -1; \n }\n return newCoef;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"function getColor(coef){\n let barColor;\n if (coef>=0){\n barColor = mint;\n }else{\n barColor = purple;\n }\nreturn barColor\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"md`#### Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"mint = \"#99d5ca\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"purple = \"#d1bcd2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"orange = \"#ffdba9\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2826,"value":"darkpurple = \"#6F257F\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}