'use strict';

d3.json('tweets.json', function(error, data) { histogram(data.tweets) });
function histogram(data) {

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


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

	// define scales
	const xScale = d3.scaleLinear().domain([0, 5]).range([0, width]);
	const yScale = d3.scaleLinear().domain([0, 10]).range([height, 0]);

	// define axes
	const xAxis = d3.axisBottom().scale(xScale).ticks(5);

	// histogram layout
	var histoChart = d3.histogram();

	histoChart
		.domain([0, 5])
		.thresholds([1, 2, 3, 4, 5])
		.value(d => d.favorites.length);

	// format data with histogram layout
	let histoData = histoChart(data);
	console.log(histoData)

	// create chart
	svg.selectAll('rect')
	.data(histoData)
	.enter()
	.append('rect')
	.attr('x', d => xScale(d.x0))
	.attr('y', d => yScale(d.length))
	.attr('width', d => xScale(d.x1 - d.x0))
	.attr('height', d => height - yScale(d.length))
	.style('fill', 'skyblue')
	.on('click', retweets);

	svg.append('g').attr('class', 'xAxis').attr('transform', 'translate(0,' + height + ')').call(xAxis);

	function retweets() {
		histoChart.value(d => d.retweets.length);
		histoData = histoChart(data);
		d3.selectAll('rect')
			.data(histoData)
			.transition()
			.duration(400)
			.attr('x', d => xScale(d.x0))
			.attr('y', d => yScale(d.length))
			.attr('width', d => xScale(d.x1 - d.x0))
			.attr('height', d => height - yScale(d.length))
			.style('fill', 'skyblue')
			.on('click', favs);
	}

	svg.append('text')
		.html('Histogram Layout Example')
		.attr('x', width / 3.5)
		.attr('y', margin.top / 2)
		.style('font-family', 'consolas')
		.style('font-size', 25)
		.style('text-anchor', 'right')

}