diff --git a/public/app.css b/public/app.css index 2f55cbc..076d70d 100644 --- a/public/app.css +++ b/public/app.css @@ -1,21 +1,22 @@ circle { - r:5; - fill: black; + r:5; + fill: black; } -circle.highlighted { +circle.highlighted{ fill:red; + r:10; } #container { - overflow: visible; - margin-bottom: 50px; + overflow: visible; + margin-bottom: 50px; } body { - margin: 20px 40px; + margin: 20px 40px; } table, th, td { - border: 1px solid black; + border: 1px solid black; } th, td { - padding:10px; - text-align: center; + padding:10px; + text-align: center; } diff --git a/public/app.js b/public/app.js index f12a35b..eb3276a 100644 --- a/public/app.js +++ b/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 highlightInstance = (instanceID) => { + selectedInstances.push(instanceID); + 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')) - 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){ - instance.highlighted = true - } - } - renderPoints() + highlightInstance(instanceID); }); } diff --git a/public/index.html b/public/index.html index e24f52b..274f5f4 100644 --- a/public/index.html +++ b/public/index.html @@ -31,10 +31,6 @@ -
-

Highlighted Instances

- -

Instance Details

@@ -50,15 +46,7 @@ - - - - - - - - - +