removing list. using table

public/app.css

@@ -1,21 +1,22 @@
 circle {
-    r:5;
-    fill: black;
+	r:5;
+	fill: black;
 }
-circle.highlighted {
+circle.highlighted{
 	fill:red;
+	r:10;
 }
 #container {
-    overflow: visible;
-    margin-bottom: 50px;
+	overflow: visible;
+	margin-bottom: 50px;
 }
 body {
-    margin: 20px 40px;
+	margin: 20px 40px;
 }
 table, th, td {
-    border: 1px solid black;
+	border: 1px solid black;
 }
 th, td {
-    padding:10px;
-    text-align: center;
+	padding:10px;
+	text-align: center;
 }

public/app.js

@@ -33,13 +33,7 @@ const renderPoints = () => {
 		})
 
 	d3.selectAll('circle').on('click', (event, datum) => {
-		d3.select('tbody td:nth-child(1)').html(datum.instance_id);
-		d3.select('tbody td:nth-child(2)').html(datum.course);
-		d3.select('tbody td:nth-child(3)').html(datum.graduation_date);
-		d3.select('tbody td:nth-child(4)').html(datum.total_students);
-		d3.select('tbody td:nth-child(5)').html(`${datum.dropped} (${Math.floor(datum.dropped/datum.total_students*100)}%)`);
-		d3.select('tbody td:nth-child(6)').html(datum.graduates);
-		d3.select('tbody td:nth-child(7)').html(`${datum.ninety_day_outcomes} (${Math.floor(datum.ninety_day_outcomes/datum.graduates*100)}%)`);
+		highlightInstance(datum.instance_id);
 	});
 
 }
@@ -80,22 +74,32 @@ const createAxes = () => {
 		.call(leftAxis);
 }
 
+const highlightInstance = (instanceID) => {
+	selectedInstances.push(instanceID);
+	for(instance of instances){
+		if(instance.instance_id == instanceID){
+			if(!instance.highlighted){
+				instance.highlighted = true
+				const tbody = d3.select('tbody');
+				const tr = tbody.append('tr');
+				tr.append('td').html(instance.instance_id);
+				tr.append('td').html(instance.course);
+				tr.append('td').html(instance.graduation_date);
+				tr.append('td').html(instance.total_students);
+				tr.append('td').html(`${instance.dropped} (${Math.floor(instance.dropped/instance.total_students*100)}%)`);
+				tr.append('td').html(instance.graduates);
+				tr.append('td').html(`${instance.ninety_day_outcomes} (${Math.floor(instance.ninety_day_outcomes/instance.graduates*100)}%)`)
+			}
+		}
+	}
+	renderPoints()
+}
+
 const createFormSubmissionHandler = () => {
 	d3.select('form').on('submit', (event)=>{
 		event.preventDefault();
 		const instanceID = parseInt(d3.select('input[type="text"]').property('value'))
-		selectedInstances.push(instanceID);
-		const list = d3.select('ul');
-		list.html('');
-		for(instance of selectedInstances){
-			list.append('li').html(instance)
-		}
-		for(instance of instances){
-			if(instance.instance_id == instanceID){
-				instance.highlighted = true
-			}
-		}
-		renderPoints()
+		highlightInstance(instanceID);
 	});
 }
 

public/index.html

@@ -31,10 +31,6 @@
 				<input type="submit"/>
 			</form>
 		</section>
-		<section>
-			<h2>Highlighted Instances</h2>
-			<ul></ul>
-		</section>
 		<section>
 			<h2>Instance Details</h2>
 			<table>
@@ -50,15 +46,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr>
-						<td></td>
-						<td></td>
-						<td></td>
-						<td></td>
-						<td></td>
-						<td></td>
-						<td></td>
-					</tr>
+					<tr></tr>
 				</tbody>
 			</table>
 		</section>