// Boxplot code

d3.csv("box_data.csv", boxplot);

const tickSize = 470;

function boxplot(data) {
	console.log(data);

	const margin = {top: 25, right: 25, bottom: 25, left: 25};
	const height = 500 - margin.top - margin.bottom;
	const width = 500 - margin.right - margin.left;

	const svg = d3.select('body')
		.append('svg')
		.attr('width', width + margin.right + margin.left)
		.attr('height', height + margin.top + margin.bottom)
		.append('g')
		.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	const maxSize = d3.max(data, d => d.number);

	const xScale = d3.scaleLinear().domain([1, 8]).range([20, width]);
	const yScale = d3.scaleLinear().domain([0, 100]).range([height, 20]);
	const colScale = d3.scaleLinear()
					.domain([0, maxSize]).range(colorbrewer.Blues[7]);

	// Define axes
	const yAxis = d3.axisRight().scale(yScale)
		.ticks(8).tickSize(width);

	svg.append('g')
		.attr('id', 'yAxisG')
		.call(yAxis);

	const xAxis = d3.axisBottom().scale(xScale)
		.tickSize(-height)
		.tickValues([1,2,3,4,5,6,7]);
	svg.append('g')
		.attr('transform', 'translate(0,' + height + ')')
		.attr('id', 'xAxisG')
		.call(xAxis);
	d3.select('#xAxisG > path.domain').style('display', 'none');

	svg.selectAll('g.box')
		.data(data).enter()
		.append('g')
		.attr('class', 'box')
		.attr('transform', d => 'translate(' + xScale(d.day) + ',' + yScale(d.median) + ')')
		.each(function(d,i) {
			d3.select(this)
				//line for min/max
				.append('line')
				.attr('class', 'range')
				.attr('x1', 0).attr('x2', 0)
				.attr('y1', yScale(d.max) - yScale(d.median))
				.attr('y2', yScale(d.min) - yScale(d.median))
				.style('stroke', 'black')
				.style('stroke-width', 4);
				// tick at top of line
			d3.select(this).append('line')
				.attr('x1', -5).attr('x2', 5)
				.attr('y1', yScale(d.max) - yScale(d.median))
				.attr('y2', yScale(d.max) - yScale(d.median))
				.style('stroke', 'black')
				.style('stroke-width', 4)
			d3.select(this).append('line')
				.attr('x1', -5).attr('x2', 5)
				.attr('y1', yScale(d.min) - yScale(d.median))
				.attr('y2', yScale(d.min) - yScale(d.median))
				.style('stroke', 'black')
				.style('stroke-width', 4)
			d3.select(this).append('rect')
				.attr('x', -20)
				.attr('y', yScale(d.q3) - yScale(d.median))
				.attr('width', 40)
				.attr('height', yScale(d.q1) - yScale(d.q3))
				.attr('fill', colScale(d.number))
				.attr('stroke', 'black')
			// add median line
			d3.select(this).append('line')
					.attr('x1', -20).attr('x2', 20)
					.attr('y1', 0)
					.attr('y2', 0)
					.style('stroke', 'grey')
					.style('stroke-width', 3);
		})


}