|
|
|
@ -14,6 +14,8 @@ const renderTable = () => {
|
|
|
|
.data(instances.filter(d => d.highlighted > 0).sort((a,b) => a.highlighted - b.highlighted), d => d.id)
|
|
|
|
.data(instances.filter(d => d.highlighted > 0).sort((a,b) => a.highlighted - b.highlighted), d => d.id)
|
|
|
|
.enter()
|
|
|
|
.enter()
|
|
|
|
.append('tr')
|
|
|
|
.append('tr')
|
|
|
|
|
|
|
|
//.exit()
|
|
|
|
|
|
|
|
//.remove()
|
|
|
|
.selectAll('td')
|
|
|
|
.selectAll('td')
|
|
|
|
.data(d => [
|
|
|
|
.data(d => [
|
|
|
|
d.instance_id,
|
|
|
|
d.instance_id,
|
|
|
|
@ -37,22 +39,20 @@ const renderPoints = () => {
|
|
|
|
.append('circle');
|
|
|
|
.append('circle');
|
|
|
|
|
|
|
|
|
|
|
|
d3.selectAll('circle')
|
|
|
|
d3.selectAll('circle')
|
|
|
|
.attr('cy', (datum, index) => {
|
|
|
|
.attr('cy', (datum, index) => yScale(datum.ninety_day_outcomes/datum.graduates*100) );
|
|
|
|
return yScale(datum.ninety_day_outcomes/datum.graduates*100);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
d3.selectAll('circle')
|
|
|
|
d3.selectAll('circle')
|
|
|
|
.attr('cx', (datum, index) => {
|
|
|
|
.attr('cx', (datum, index) => xScale(parseTime(datum.graduation_date)) );
|
|
|
|
return xScale(parseTime(datum.graduation_date));
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
d3.selectAll('circle')
|
|
|
|
d3.selectAll('circle')
|
|
|
|
.classed('highlighted', (datum, index)=>{
|
|
|
|
.classed('highlighted', (datum, index)=> datum.highlighted > 0 )
|
|
|
|
return datum.highlighted > 0
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
d3.selectAll('circle').on('click', (event, datum) => {
|
|
|
|
d3.selectAll('circle').on('click', (event, datum) => {
|
|
|
|
|
|
|
|
if(datum.highlighted === 0){
|
|
|
|
datum.highlighted = ++highlighted;
|
|
|
|
datum.highlighted = ++highlighted;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
datum.highlighted = 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
renderPoints()
|
|
|
|
renderPoints()
|
|
|
|
renderTable()
|
|
|
|
renderTable()
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|