display highlighted instances in graph

public/app.css

@@ -2,6 +2,9 @@ circle {
     r:5;
     fill: black;
 }
+circle.highlighted {
+	fill:red;
+}
 #container {
     overflow: visible;
     margin-bottom: 50px;

public/app.js

@@ -9,6 +9,7 @@ const formatTime = d3.timeFormat("%B %e, %Y");
 
 
 const renderPoints = () => {
+	d3.select('#points').html('');
 	const circles = d3.select('#points')
 		.selectAll('circle')
 		.data(instances, (datum) => {
@@ -26,6 +27,12 @@ const renderPoints = () => {
 			return xScale(parseTime(datum.graduation_date));
 		});
 
+	d3.selectAll('circle')
+		.classed('highlighted', (datum, index)=>{
+			console.log(datum);
+			return datum.highlighted
+		})
+
 }
 
 const setupGraph = ()=>{
@@ -74,11 +81,20 @@ const createFormSubmissionHandler = () => {
 		for(instance of selectedInstances){
 			list.append('li').html(instance)
 		}
+		for(instance of instances){
+			if(instance.instance_id == instanceID){
+				instance.highlighted = true
+			} else {
+				instance.highlighted = false
+			}
+		}
+		renderPoints()
 	});
 }
 
 window.onload = async ()=>{
 	instances = await d3.json('/instances');
+	instances.forEach(instance => instance.highlighted = false)
 	setupGraph();
 	createAxes();
 	renderPoints();