standard deviation

public/app.js

@@ -11,7 +11,7 @@ let yAxis = 'outcomes'
 let bottomAxis;
 let leftAxis;
 let zoomScale = 1
-let averageOutcomes
+let averageOutcomesArray
 let sortedInstances;
 let displayAverage = true;
 
@@ -278,9 +278,23 @@ const getAverage = (start, end) => {
 		sumOutcomes += sortedInstances[i].ninety_day_outcomes/sortedInstances[i].graduates*100
 		sumDropped += sortedInstances[i].dropped/sortedInstances[i].total_students*100
 	}
-	averageOutcomes.push({
-		averageOutcomes:sumOutcomes/(end-start),
-		averageDropped:sumDropped/(end-start),
+	const averageOutcomes = sumOutcomes/(end-start)
+	const averageDropped = sumDropped/(end-start)
+
+	let sumOutcomesDifferences = 0
+	let sumDroppedDifferences = 0
+	for(let i = start; i < end; i++){
+		sumOutcomesDifferences += Math.pow(sortedInstances[i].ninety_day_outcomes/sortedInstances[i].graduates*100 - averageOutcomes,2)
+		sumDroppedDifferences += Math.pow(sortedInstances[i].dropped/sortedInstances[i].total_students*100 - averageDropped,2)
+	}
+	const stdDevOutcomes = Math.sqrt(sumOutcomesDifferences/(end-start))
+	const stdDevDropped = Math.sqrt(sumDroppedDifferences/(end-start))
+
+	averageOutcomesArray.push({
+		averageOutcomes,
+		averageDropped,
+		stdDevOutcomes,
+		stdDevDropped,
 		initialGraduationDate:sortedInstances[start].graduation_date
 	})
 }
@@ -299,7 +313,7 @@ const displayMeanStandardDeviation = () => {
 		}
 	})
 
-	averageOutcomes = []
+	averageOutcomesArray = []
 	for(let i = 0; i < sortedInstances.length-10; i += 10){
 		getAverage(i,i+10)
 	}
@@ -310,16 +324,39 @@ const displayMeanStandardDeviation = () => {
 
 		d3.select('#points')
 			.append('path')
-			.datum(averageOutcomes)
+			.datum(averageOutcomesArray)
 			.attr('fill', 'none')
 			.attr('stroke', 'steelblue')
-			.attr('stroke-width', 5)
+			.attr('stroke-width', 2)
 			.attr('opacity', 0.7)
 			.attr('d', d3.line()
 				.x(d => xScale(parseTime(d.initialGraduationDate)))
 				.y(d => (yAxis === 'outcomes') ? yScale(d.averageOutcomes) : yScale(d.averageDropped))
 			)
 
+		d3.select('#points')
+			.append('path')
+			.datum(averageOutcomesArray)
+			.attr('fill', 'none')
+			.attr('stroke', 'red')
+			.attr('stroke-width', 2)
+			.attr('opacity', 0.7)
+			.attr('d', d3.line()
+				.x(d => xScale(parseTime(d.initialGraduationDate)))
+				.y(d => (yAxis === 'outcomes') ? yScale(d.averageOutcomes+d.stdDevOutcomes) : yScale(d.averageDropped+d.stdDevDropped))
+			)
+
+		d3.select('#points')
+			.append('path')
+			.datum(averageOutcomesArray)
+			.attr('fill', 'none')
+			.attr('stroke', 'red')
+			.attr('stroke-width', 2)
+			.attr('opacity', 0.7)
+			.attr('d', d3.line()
+				.x(d => xScale(parseTime(d.initialGraduationDate)))
+				.y(d => (yAxis === 'outcomes') ? yScale(d.averageOutcomes-d.stdDevOutcomes) : yScale(d.averageDropped-d.stdDevDropped))
+			)
 	}
 }