fixed html('') issue

public/app.js

@@ -1,4 +1,3 @@
-// TODO - filter by course
 // TODO - change y axis to dropped
 const WIDTH = 800;
 const HEIGHT = 600;
@@ -148,24 +147,30 @@ const createFormSubmissionHandler = () => {
 
 const populateMetrosCoursesCheckboxes = ()=>{
 
-	d3.select('#courses ul').html('') //TODO remove .html() somehow
+	d3.select('#courses ul')
 		.selectAll('li')
 		.data(courses)
 		.enter()
-		.append('li').text(d => d.course)
+		.append('li')
-		.append('input').attr('type', 'checkbox')
+		.text(d => d.course)
+		.append('input')
+	d3.selectAll('#courses ul li input')
+		.attr('type', 'checkbox')
 		.property('checked', d => d.checked)
 		.on('click', (event, datum)=>{
 			datum.checked = !datum.checked
 			renderPoints()
 		})
 
-	d3.select('#metros ul').html('') //TODO remove .html() somehow
+	d3.select('#metros ul')
 		.selectAll('li')
 		.data(metros)
 		.enter()
-		.append('li').text(d => d.metro)
+		.append('li')
-		.append('input').attr('type', 'checkbox')
+		.text(d => d.metro)
+		.append('input')
+	d3.selectAll('#metros ul li input')
+		.attr('type', 'checkbox')
 		.property('checked', d => d.checked)
 		.on('click', (event, datum)=>{
 			datum.checked = !datum.checked