instance details table

public/app.js

@@ -32,6 +32,16 @@ const renderPoints = () => {
 			return datum.highlighted
 		})
 
+	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)}%)`);
+	});
+
 }
 
 const setupGraph = ()=>{

public/index.html

@@ -35,5 +35,32 @@
 			<h2>Highlighted Instances</h2>
 			<ul></ul>
 		</section>
+		<section>
+			<h2>Instance Details</h2>
+			<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>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td></td>
+						<td></td>
+						<td></td>
+						<td></td>
+						<td></td>
+						<td></td>
+						<td></td>
+					</tr>
+				</tbody>
+			</table>
+		</section>
 	</body>
 </html>