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.
114 lines
2.9 KiB
114 lines
2.9 KiB
const WIDTH = 800;
|
|
const HEIGHT = 600;
|
|
|
|
let instances;
|
|
const selectedInstances = [];
|
|
let xScale, yScale;
|
|
const parseTime = d3.timeParse("%B %e, %Y");
|
|
const formatTime = d3.timeFormat("%B %e, %Y");
|
|
|
|
|
|
const renderPoints = () => {
|
|
d3.select('#points').html('');
|
|
const circles = d3.select('#points')
|
|
.selectAll('circle')
|
|
.data(instances, (datum) => {
|
|
return datum.id
|
|
});
|
|
circles.enter().append('circle');
|
|
|
|
d3.selectAll('circle')
|
|
.attr('cy', (datum, index) => {
|
|
return yScale(datum.ninety_day_outcomes/datum.graduates*100);
|
|
});
|
|
|
|
d3.selectAll('circle')
|
|
.attr('cx', (datum, index) => {
|
|
return xScale(parseTime(datum.graduation_date));
|
|
});
|
|
|
|
d3.selectAll('circle')
|
|
.classed('highlighted', (datum, index)=>{
|
|
return datum.highlighted
|
|
})
|
|
|
|
d3.selectAll('circle').on('click', (event, datum) => {
|
|
highlightInstance(datum.instance_id);
|
|
});
|
|
|
|
}
|
|
|
|
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 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);
|
|
});
|
|
}
|
|
|
|
window.onload = async ()=>{
|
|
instances = await d3.json('/instances');
|
|
instances.forEach(instance => instance.highlighted = false)
|
|
setupGraph();
|
|
createAxes();
|
|
renderPoints();
|
|
createFormSubmissionHandler();
|
|
}
|