all/none

public/app.js

@@ -7,8 +7,8 @@ const parseTime = d3.timeParse("%B %e, %Y");
 let instances;
 let xScale, yScale;
 let highlighted = []
-const courses = [];
+let courses = []
-const metros = [];
+let metros = []
 
 const randomColor = ()=>{
 	const red = Math.floor(Math.random()*128) + 64;
@@ -147,19 +147,8 @@ const createFormSubmissionHandler = () => {
 }
 
 const populateMetrosCoursesCheckboxes = ()=>{
-	for(let instance of instances){
-		const segments = instance.course.split('-')
-
-		if(metros.find(m => m.metro === segments[0]) === undefined){
-			metros.push({ checked:true, metro: segments[0] })
-		}
-
-		if(courses.find(c => c.course === segments[1]) === undefined){
-			courses.push({ checked:true, course: segments[1] })
-		}
 
-	}
+	d3.select('#courses ul').html('') //TODO remove .html() somehow
-	d3.select('#courses')
 		.selectAll('li')
 		.data(courses)
 		.enter()
@@ -171,7 +160,7 @@ const populateMetrosCoursesCheckboxes = ()=>{
 			renderPoints()
 		})
 
-	d3.select('#metros')
+	d3.select('#metros ul').html('') //TODO remove .html() somehow
 		.selectAll('li')
 		.data(metros)
 		.enter()
@@ -182,11 +171,57 @@ const populateMetrosCoursesCheckboxes = ()=>{
 			datum.checked = !datum.checked
 			renderPoints()
 		})
+
+	d3.select('#courses button:nth-child(2)')
+		.on('click', ()=>{
+			for(course of courses){
+				course.checked = true
+			}
+			renderPoints()
+			populateMetrosCoursesCheckboxes()
+		})
+	d3.select('#courses button:nth-child(3)')
+		.on('click', ()=>{
+			for(course of courses){
+				course.checked = false 
+			}
+			renderPoints()
+			populateMetrosCoursesCheckboxes()
+		})
+
+	d3.select('#metros button:nth-child(2)')
+		.on('click', ()=>{
+			for(metro of metros){
+				metro.checked = true
+			}
+			renderPoints()
+			populateMetrosCoursesCheckboxes()
+		})
+	d3.select('#metros button:nth-child(3)')
+		.on('click', ()=>{
+			for(metro of metros){
+				metro.checked = false 
+			}
+			renderPoints()
+			populateMetrosCoursesCheckboxes()
+		})
 }
 
 window.onload = async ()=>{
 	instances = await d3.json('/instances');
-	populateMetrosCoursesCheckboxes();
+	for(let instance of instances){
+		const segments = instance.course.split('-')
+
+		if(metros.find(m => m.metro === segments[0]) === undefined){
+			metros.push({ checked:true, metro: segments[0] })
+		}
+
+		if(courses.find(c => c.course === segments[1]) === undefined){
+			courses.push({ checked:true, course: segments[1] })
+		}
+
+	}
+	populateMetrosCoursesCheckboxes()
 	setupGraph();
 	createAxes();
 	renderPoints();

public/index.html

@@ -18,10 +18,18 @@
 				<dt>Y-Axis:</dt>
 				<dd>Percentage of graduates that got a job within 90 days of graduation.</dd>
 			</dl>
+			<section id="metros">
 				<h3>Choose Metros To Display</h3>
-			<ul id="metros"></ul>
+				<button>All</button>
+				<button>None</button>
+				<ul></ul>
+			</section>
+			<section id="courses">
 				<h3>Choose Courses To Display</h3>
-			<ul id="courses"></ul>
+				<button>All</button>
+				<button>None</button>
+				<ul></ul>
+			</section>
 			<svg id="container">
 				<svg>
 					<g id="points"></g>