diff --git a/public/app.js b/public/app.js index eadb961..264273a 100644 --- a/public/app.js +++ b/public/app.js @@ -9,12 +9,14 @@ let xScale, yScale; let highlighted = [] const renderTable = () => { - const trs = d3.select('tbody') + let trs = d3.select('tbody') .selectAll('tr') .data(highlighted, d => d.instance_id) + trs.exit().remove() - trs.enter().append('tr') - .selectAll('td') + + trs = trs.enter().append('tr') + trs.selectAll('td') .data(d => [ d.instance_id, d.course, @@ -27,6 +29,17 @@ const renderTable = () => { .enter() .append('td') .text(value => value) + + trs.append('td') + .append('button') + .text('Deselect') + .on('click', (event, datum) =>{ + event.preventDefault(); + highlighted = highlighted.filter(i => i.instance_id != datum.instance_id) + renderPoints() + renderTable() + }) + } const renderPoints = () => { diff --git a/public/index.html b/public/index.html index 5bd08a2..4f486b1 100644 --- a/public/index.html +++ b/public/index.html @@ -36,13 +36,14 @@
| Instance ID | -Course | -Graduation Date | -Total Students | -Dropped | -Graduates | -Outcomes After 90 Days | +Instance ID | +Course | +Graduation Date | +Total Students | +Dropped | +Graduates | +Outcomes After 90 Days | +Deselect |
|---|