// gradient legend based on https://stackoverflow.com/questions/43196546/d3-legend-for-a-color-scale
var width = document.getElementById("legend").offsetWidth;
var height = 50;
var margin = {top: 0, right: 0, bottom: 0, left: 0};
var legend = d3.select("#legend").append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("border", 2)
	.attr("margin", 2)
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");     

var colorscale = d3.schemeRdYlGn['11'];
var color = d3.scaleQuantize()
	.domain([0, 1600])
	.range(colorscale);

var format = d3.format(".1f")

drawColorScale();

function drawColorScale() {
	var pallete = legend.append('g')
		.attr('id', 'pallete');

	var swatch = pallete.selectAll('rect').data(colorscale);
	swatch.enter().append('rect')
		.attr('fill', function(d) {
			return d;
		})
		.attr('x', function(d, i) {
			return i * ((width-20)/11);
		}) 
		.attr('y', 20)
		.attr('width', ((width-20)/11))
		.attr('height', 10)
		.attr('transform', 'translate(10,0)');

	legend.append('g')
		.attr('class', 'axis')
		.call(d3.axisBottom(d3.scaleLinear().domain([-10, 10]).range([0, (width-20)])))
		.attr('transform', 'translate(10,30)');

	legend.append('text')
		.attr('class', 'text')
		.text("Source's Trust Rating for Target")
		.attr('transform', 'translate(' + (width/2) + ',15)')
		.style('text-anchor', 'middle');
}