created average line

public/app.js

@@ -11,8 +11,9 @@ let yAxis = 'outcomes'
 let bottomAxis;
 let leftAxis;
 let zoomScale = 1
-let averageOutcomes = []
+let averageOutcomes
 let sortedInstances;
+let displayAverage = true;
 
 const randomColor = ()=>{
 	const red = Math.floor(Math.random()*128) + 64;
@@ -240,6 +241,7 @@ const createRadioButtonHanlders = ()=>{
 			setupGraph()
 			createAxes()
 			renderPoints()
+			displayMeanStandardDeviation();
 		})
 }
 
@@ -264,20 +266,51 @@ const setUpZoomPan = ()=>{
 }
 
 const getAverage = (start, end) => {
-	let sum = 0
+	let sumOutcomes = 0
+	let sumDropped = 0
 	for(let i = start; i < end; i++){
-		sum += sortedInstances[i].ninety_day_outcomes/sortedInstances[i].graduates*100
+		sumOutcomes += sortedInstances[i].ninety_day_outcomes/sortedInstances[i].graduates*100
+		sumDropped += sortedInstances[i].dropped/sortedInstances[i].total_students*100
 	}
-	averageOutcomes.push({average:sum/(end-start), initialGraduationDate:sortedInstances[start].graduation_date})
+	averageOutcomes.push({
+		averageOutcomes:sumOutcomes/(end-start),
+		averageDropped:sumDropped/(end-start),
+		initialGraduationDate:sortedInstances[start].graduation_date
+	})
 }
 
 const displayMeanStandardDeviation = () => {
 	sortedInstances = instances.sort((a,b) => Date.parse(a.graduation_date) - Date.parse(b.graduation_date))
-
+	averageOutcomes = []
 	for(let i = 0; i < sortedInstances.length-10; i += 10){
 		getAverage(i,i+10)
 	}
-	console.log(averageOutcomes);
+
+	d3.selectAll('#points path').remove();
+
+	if(displayAverage){
+
+		d3.select('#points')
+			.append('path')
+			.datum(averageOutcomes)
+			.attr('fill', 'none')
+			.attr('stroke', 'steelblue')
+			.attr('stroke-width', 5)
+			.attr('opacity', 0.7)
+			.attr('d', d3.line()
+				.x(d => xScale(parseTime(d.initialGraduationDate)))
+				.y(d => (yAxis === 'outcomes') ? yScale(d.averageOutcomes) : yScale(d.averageDropped))
+			)
+
+	}
+}
+
+const setUpDisplayAverageHandler = ()=>{
+	d3.select('#average input')
+		.on('click', (event)=>{
+			displayAverage = event.target.checked
+			displayMeanStandardDeviation()
+		})
 }
 
 window.onload = async ()=>{
@@ -303,4 +336,5 @@ window.onload = async ()=>{
 	setUpZoomPan();
 
 	displayMeanStandardDeviation();
+	setUpDisplayAverageHandler()
 }

public/index.html

@@ -23,6 +23,11 @@
 				90 Day Outcomes %<input checked name="y-axis" type="radio" value="outcomes"/>
 				Dropped %<input name="y-axis" type="radio" value="dropped"/>
 			</section>
+			<section id="average">
+				<h3>Display Average?</h3>
+				<input type='checkbox' checked/>
+				Display Average?
+			</section>
 			<section id="metros">
 				<h3>Choose Metros To Display</h3>
 				<button>All</button>