const WIDTH = 800;
const HEIGHT = 600;

let instances;
let xScale, yScale;
const parseTime = d3.timeParse("%B %e, %Y");
const formatTime = d3.timeFormat("%B %e, %Y");


const render = () => {
	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);
		});

	d3.selectAll('circle')
		.attr('cx', (datum, index) => {
			return xScale(parseTime(datum.graduation_date));
		});

}

window.onload = async ()=>{
	d3.select('svg');
	d3.select('svg')
		.style('width', WIDTH)
		.style('height', HEIGHT);

	instances = await d3.json('/instances');
	
	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;
	})
	yScale.domain(yDomain);

	render();
}