separate button to display standard deviation

public/app.js

@@ -13,7 +13,8 @@ let leftAxis;
 let zoomScale = 1
 let averageOutcomesArray
 let sortedInstances;
-let displayAverage = true;
+let displayAverage = false;
+let displayStandardDeviation = false;
 
 const randomColor = ()=>{
 	const red = Math.floor(Math.random()*128) + 64;
@@ -333,7 +334,8 @@ const displayMeanStandardDeviation = () => {
 				.x(d => xScale(parseTime(d.initialGraduationDate)))
 				.y(d => (yAxis === 'outcomes') ? yScale(d.averageOutcomes) : yScale(d.averageDropped))
 			)
-
+	}
+	if(displayStandardDeviation){
 		d3.select('#points')
 			.append('path')
 			.datum(averageOutcomesArray)
@@ -361,11 +363,16 @@ const displayMeanStandardDeviation = () => {
 }
 
 const setUpDisplayAverageHandler = ()=>{
-	d3.select('#average input')
+	d3.select('#average input:nth-child(2)')
 		.on('click', (event)=>{
 			displayAverage = event.target.checked
 			displayMeanStandardDeviation()
 		})
+	d3.select('#average input:nth-child(3)')
+		.on('click', (event)=>{
+			displayStandardDeviation = event.target.checked
+			displayMeanStandardDeviation()
+		})
 }
 
 window.onload = async ()=>{

public/index.html

@@ -25,8 +25,10 @@
 			</section>
 			<section id="average">
 				<h3>Display Average?</h3>
-				<input type='checkbox' checked/>
+				<input type='checkbox' />
 				Display Average?
+				<input type='checkbox' />
+				Display Standard Deviation?
 			</section>
 			<section id="metros">
 				<h3>Choose Metros To Display</h3>