removing list. using table

public/app.css

@@ -2,8 +2,9 @@ circle {
 	r:5;
 	fill: black;
 }
-circle.highlighted {
+circle.highlighted{
 	fill:red;
+	r:10;
 }
 #container {
 	overflow: visible;

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 createFormSubmissionHandler = () => {
-	d3.select('form').on('submit', (event)=>{
-		event.preventDefault();
-		const instanceID = parseInt(d3.select('input[type="text"]').property('value'))
+const highlightInstance = (instanceID) => {
 	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){
+			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'))
+		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>