var width = document.getElementById("scatterplot").offsetWidth;
var height = 600;
var margin = {top: 0, right: 0, bottom: 0, left: 0};
var svg2 = d3.select('#scatterplot').append('svg')
	.attr("width", width)
	.attr("height", height)
	.attr("border", 2)
	.attr("margin", 2)
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");		

// svg-border
svg2.append('rect')
	.attr('height', height)
	.attr('width', width)
	.attr('fill', '#353535')
	.attr('stroke', 'white')
	.attr('stroke-width', 1);	
d3.json('soc-sign-bitcoinotc-1000.json', function(error, data) {

var minTime = d3.min(data.links, function(d) { return new Date(d.time * 1000); });
var maxTime = d3.max(data.links, function(d) { return new Date(d.time * 1000); });

var minRating = -10
var maxRating = 10;

var timeScale = d3.scaleTime()
	.domain([minTime, maxTime])
	.range([0, width - margin.left - margin.right - 60]);
var ratingScale = d3.scaleLinear()
	.domain([minRating, maxRating])
	.range([height - margin.top - margin.bottom - 80, 0])
	.nice();
var ratingColorScale = d3.scaleLinear()
	.domain([-10,10])
	.range([0,1]);

var timeAxis = d3.axisBottom()
	.scale(timeScale);
var ratingAxis = d3.axisLeft()
	.scale(ratingScale)
	.ticks(21);

// x axis
svg2.append('g')
	.attr('class', 'axis')
	.call(timeAxis)
	.attr('transform', 'translate(' + (margin.left + 30) + ',' + ((margin.top + height) - 45) + ')');
// y axis
svg2.append('g')
	.attr('class', 'axis')
	.call(ratingAxis)
	.attr('transform', 'translate(' + (margin.left + 25) + ',30)' )

var lineX = margin.left+30;
var lineY = 30 + ((height - margin.top - margin.bottom - 80)/2);

// zero line
svg2.append('line')
	.attr('x1', lineX)
	.attr('y1', lineY)
	.attr('x2', width - margin.left - margin.right - 30)
	.attr('y2', lineY)
	.style("stroke-dasharray", ("5, 5"))
	.attr('stroke', '#bababa')
	.attr('stroke-width', 1);

// plot the data
var points = svg2.append('g')
	.selectAll('circle')
	.data(data.links)
	.enter().append('circle')
		.attr('id', function(d, i) {
			return 'p-' + i;
		})
		.attr('class', 'point')
		.attr('r', 1.5)
		.attr('fill', function(d) { return d3.interpolateRdYlGn(ratingColorScale(d.rating));})
		.attr('cx', function(d) { return timeScale(new Date(d.time * 1000)); })
		.attr('cy', function(d) { return ratingScale(d.rating); })
		.attr('transform', 'translate(' + (margin.left + 30) + ',' + 30 + ')')
		.on('mouseover', function(d,i) {
			d3.select(this).attr('r', 10);
			d3.selectAll('.link').attr('opacity', 0);
			document.getElementById('l-' + i).setAttribute('opacity', 1);
			document.getElementById('l-' + i).setAttribute('stroke-width', 3.5);
		})
		.on('mouseout', function(d,i) {
			d3.select(this).attr('r', 1.5);
			document.getElementById('l-' + i).setAttribute('stroke-width', 1);
			d3.selectAll('.link').attr('opacity', 1);
		});
});