random colors when selected

public/app.css

@@ -1,11 +1,3 @@
-circle {
-	r:5;
-	fill: black;
-}
-circle.highlighted{
-	fill:red;
-	r:10;
-}
 #container {
 	overflow: visible;
 	margin-bottom: 50px;

public/app.js

@@ -1,4 +1,3 @@
-// TODO - different colors for each highted dot, matched in table row backgrounds
 // TODO - filter by course
 // TODO - change y axis to dropped
 const WIDTH = 800;
@@ -9,6 +8,13 @@ let instances;
 let xScale, yScale;
 let highlighted = []
 
+const randomColor = ()=>{
+	const red = Math.floor(Math.random()*128) + 64;
+	const green = Math.floor(Math.random()*128) + 64;
+	const blue = Math.floor(Math.random()*128) + 64;
+	return `rgb(${red}, ${green}, ${blue})`
+}
+
 const renderTable = () => {
 	let trs = d3.select('tbody')
 		.selectAll('tr')
@@ -16,7 +22,10 @@ const renderTable = () => {
 
 	trs.exit().remove()
 
-	trs = trs.enter().append('tr')
+	trs = trs
+		.enter()
+		.append('tr')
+		.style('background-color', datum => datum.color)
 	trs.selectAll('td')
 		.data(d => [
 			d.instance_id, 
@@ -36,6 +45,7 @@ const renderTable = () => {
 		.text('Deselect')
 		.on('click', (event, datum) =>{
 			event.preventDefault();
+			delete datum.color
 			highlighted = highlighted.filter(i => i.instance_id != datum.instance_id)
 			renderPoints()
 			renderTable()
@@ -57,13 +67,16 @@ const renderPoints = () => {
 		.attr('cx', (datum, index) => xScale(parseTime(datum.graduation_date)) );
 
 	d3.selectAll('circle')
-		.classed('highlighted', (datum, index)=> highlighted.find(i => i.instance_id === datum.instance_id) !== undefined)
+		.attr('fill', datum => datum.color? datum.color : 'black')
+		.attr('r', datum => datum.color? 10 : 5)
 
 	d3.selectAll('circle').on('click', (event, datum) => {
 		const found = highlighted.find(i => i.instance_id === datum.instance_id)
 		if(found === undefined){
+			datum.color = randomColor()
 			highlighted.push(datum)
 		} else {
+			delete datum.color
 			highlighted = highlighted.filter(i => i.instance_id != datum.instance_id)
 		}
 		renderPoints()
@@ -114,6 +127,7 @@ const createFormSubmissionHandler = () => {
 		const instanceID = parseInt(d3.select('input[type="text"]').property('value'))
 		const found = instances.find(i => i.instance_id === instanceID)
 		if(found !== undefined && highlighted.find(instance => instance.instance_id === instanceID) === undefined){
+			found.color = randomColor()
 			highlighted.push(found);
 		}
 		renderTable();