diff --git a/public/app.css b/public/app.css index dfc03a6..2f55cbc 100644 --- a/public/app.css +++ b/public/app.css @@ -2,6 +2,9 @@ circle { r:5; fill: black; } +circle.highlighted { + fill:red; +} #container { overflow: visible; margin-bottom: 50px; diff --git a/public/app.js b/public/app.js index 2f69672..996df0f 100644 --- a/public/app.js +++ b/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();