You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.0 KiB
117 lines
3.0 KiB
// TODO - delete highlighted
|
|
// TODO - different colors for each highted dot, matched in table row backgrounds
|
|
const WIDTH = 800;
|
|
const HEIGHT = 600;
|
|
const parseTime = d3.timeParse("%B %e, %Y");
|
|
|
|
let instances;
|
|
let xScale, yScale;
|
|
let highlighted = []
|
|
|
|
const renderTable = () => {
|
|
const trs = d3.select('tbody')
|
|
.selectAll('tr')
|
|
.data(highlighted, d => d.instance_id)
|
|
trs.exit().remove()
|
|
trs.enter().append('tr')
|
|
.selectAll('td')
|
|
.data(d => [
|
|
d.instance_id,
|
|
d.course,
|
|
d.graduation_date,
|
|
d.total_students,
|
|
`${d.dropped} (${Math.floor(d.dropped/d.total_students*100)}%)`,
|
|
d.graduates,
|
|
`${d.ninety_day_outcomes} (${Math.floor(d.ninety_day_outcomes/d.graduates*100)}%)`
|
|
], d => d.instance_id)
|
|
.enter()
|
|
.append('td')
|
|
.text(value => value)
|
|
}
|
|
|
|
const renderPoints = () => {
|
|
const circles = d3.select('#points')
|
|
.selectAll('circle')
|
|
.data(instances, d => d.id)
|
|
.enter()
|
|
.append('circle');
|
|
|
|
d3.selectAll('circle')
|
|
.attr('cy', (datum, index) => yScale(datum.ninety_day_outcomes/datum.graduates*100) );
|
|
|
|
d3.selectAll('circle')
|
|
.attr('cx', (datum, index) => xScale(parseTime(datum.graduation_date)) );
|
|
|
|
d3.selectAll('circle')
|
|
.classed('highlighted', (datum, index)=> highlighted.find(i => i.instance_id === datum.instance_id) !== undefined)
|
|
|
|
d3.selectAll('circle').on('click', (event, datum) => {
|
|
const found = highlighted.find(i => i.instance_id === datum.instance_id)
|
|
if(found === undefined){
|
|
highlighted.push(datum)
|
|
} else {
|
|
highlighted = highlighted.filter(i => i.instance_id != datum.instance_id)
|
|
}
|
|
renderPoints()
|
|
renderTable()
|
|
});
|
|
|
|
}
|
|
|
|
const setupGraph = ()=>{
|
|
d3.select('svg');
|
|
d3.select('svg')
|
|
.style('width', WIDTH)
|
|
.style('height', HEIGHT);
|
|
|
|
xScale = d3.scaleTime();
|
|
xScale.range([0,WIDTH]);
|
|
const xDomain = d3.extent(instances, (datum, index) => {
|
|
return parseTime(datum.graduation_date);
|
|
});
|
|
xScale.domain(xDomain);
|
|
|
|
yScale = d3.scaleLinear();
|
|
yScale.range([HEIGHT, 0]);
|
|
const yDomain = d3.extent(instances, (datum, index) => {
|
|
return datum.ninety_day_outcomes/datum.graduates*100;
|
|
})
|
|
yScale.domain(yDomain);
|
|
}
|
|
|
|
const createAxes = () => {
|
|
const bottomAxis = d3.axisBottom(xScale);
|
|
d3.select('#container')
|
|
.append('g')
|
|
.attr('id', 'x-axis')
|
|
.call(bottomAxis)
|
|
.attr('transform', 'translate(0,'+HEIGHT+')');
|
|
|
|
const leftAxis = d3.axisLeft(yScale);
|
|
d3.select('#container')
|
|
.append('g')
|
|
.attr('id', 'y-axis')
|
|
.call(leftAxis);
|
|
}
|
|
|
|
const createFormSubmissionHandler = () => {
|
|
d3.select('form').on('submit', (event)=>{
|
|
event.preventDefault();
|
|
const instanceID = parseInt(d3.select('input[type="text"]').property('value'))
|
|
const found = instances.find(i => i.instance_id === instanceID)
|
|
if(found !== undefined && highlighted.find(instance => instance.instance_id === instanceID) === undefined){
|
|
highlighted.push(found);
|
|
}
|
|
renderTable();
|
|
renderPoints();
|
|
});
|
|
}
|
|
|
|
window.onload = async ()=>{
|
|
instances = await d3.json('/instances');
|
|
setupGraph();
|
|
createAxes();
|
|
renderPoints();
|
|
createFormSubmissionHandler();
|
|
}
|