display instances checkbox

public/app.js

@@ -15,6 +15,7 @@ let averageOutcomesArray
 let sortedInstances;
 let displayAverage = false;
 let displayStandardDeviation = false;
+let displayInstances = true;
 
 const randomColor = ()=>{
 	const red = Math.floor(Math.random()*128) + 64;
@@ -87,7 +88,7 @@ const renderPoints = () => {
 			const metro = metros.find(m => m.metro === instanceMetro)
 			const course = courses.find(c => c.course === instanceCourse)
 
-			if(metro.checked && course.checked){
+			if(displayInstances && metro.checked && course.checked){
 				return 'block'
 			} else {
 				return 'none'
@@ -373,6 +374,11 @@ const setUpDisplayAverageHandler = ()=>{
 			displayStandardDeviation = event.target.checked
 			displayMeanStandardDeviation()
 		})
+	d3.select('#average input:nth-child(4)')
+		.on('click', (event)=>{
+			displayInstances = event.target.checked
+			renderPoints()
+		})
 }
 
 window.onload = async ()=>{

public/index.html

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