deselect button in table

public/app.js

@@ -9,12 +9,14 @@ let xScale, yScale;
 let highlighted = []
 
 const renderTable = () => {
-	const trs = d3.select('tbody')
+	let trs = d3.select('tbody')
 		.selectAll('tr')
 		.data(highlighted, d => d.instance_id)
+
 	trs.exit().remove()
-	trs.enter().append('tr')
-		.selectAll('td')
+	
+	trs = trs.enter().append('tr')
+	trs.selectAll('td')
 		.data(d => [
 			d.instance_id, 
 			d.course, 
@@ -27,6 +29,17 @@ const renderTable = () => {
 		.enter()
 		.append('td')
 		.text(value => value)
+
+	trs.append('td')
+		.append('button')
+		.text('Deselect')
+		.on('click', (event, datum) =>{
+			event.preventDefault();
+			highlighted = highlighted.filter(i => i.instance_id != datum.instance_id)
+			renderPoints()
+			renderTable()
+		})
+		
 }
 
 const renderPoints = () => {

public/index.html

@@ -36,13 +36,14 @@
 			<table>
 				<thead>
 					<tr>
-						<td>Instance ID</td>
-						<td>Course</td>
-						<td>Graduation Date</td>
-						<td>Total Students</td>
-						<td>Dropped</td>
-						<td>Graduates</td>
-						<td>Outcomes After 90 Days</td>
+						<th>Instance ID</th>
+						<th>Course</th>
+						<th>Graduation Date</th>
+						<th>Total Students</th>
+						<th>Dropped</th>
+						<th>Graduates</th>
+						<th>Outcomes After 90 Days</th>
+						<th>Deselect</th>
 					</tr>
 				</thead>
 				<tbody></tbody>