diff --git a/public/app.js b/public/app.js index eb3276a..c24239e 100644 --- a/public/app.js +++ b/public/app.js @@ -7,15 +7,27 @@ let xScale, yScale; const parseTime = d3.timeParse("%B %e, %Y"); const formatTime = d3.timeFormat("%B %e, %Y"); +const renderTable = () => { + d3.select('tbody').html(''); + const trs = d3.select('tbody') + .selectAll('tr') + .data(instances.filter(d => d.highlighted)) + .enter() + .append('tr') + .selectAll('td') + .data(d => [d.instance_id, d.course, d.graduation_date, d.total_students, d.dropped, d.graduates, d.ninety_day_outcomes]) + .enter() + .append('td') + .text(value => value) +} const renderPoints = () => { d3.select('#points').html(''); const circles = d3.select('#points') .selectAll('circle') - .data(instances, (datum) => { - return datum.id - }); - circles.enter().append('circle'); + .data(instances) + .enter() + .append('circle'); d3.selectAll('circle') .attr('cy', (datum, index) => { @@ -33,7 +45,9 @@ const renderPoints = () => { }) d3.selectAll('circle').on('click', (event, datum) => { - highlightInstance(datum.instance_id); + datum.highlighted = true; + renderPoints() + renderTable() }); } @@ -74,32 +88,14 @@ 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')) - highlightInstance(instanceID); + const found = instances.find(i => i.instance_id === instanceID) + found.highlighted = true; + renderTable(); + renderPoints(); }); }