const dataSet1 = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
  11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 10, 13, 16, 5, 2];
const w = 600;
const h = 450;
const stroke_width = 3;//can change, will auto scale
var svg = d3.select("#chart").append("svg")
	.attr('width', w)
	.attr('height', h)

const spacing = stroke_width/(w/dataSet1.length);

const xScale = d3.scale.ordinal()
	.domain(d3.range(dataSet1.length))
	.rangeRoundBands([0, w], spacing);

const yScale = d3.scale.linear()
	.domain([0, d3.max(dataSet1) + 1])
	.range([0, h]);

const colourScale = d3.scale.category20b();

var isotype = [];
var width_subtraction = 5
svg.selectAll("rect.base")
	.data(dataSet1)
	.enter()
	.append("rect")
	.classed('base', true)
	.attr('id', function(d, i){ return 'a'+i})
	.each(function(d, i){
		isotype.push({
			x: xScale(i),
			y: h - yScale(d),
			width: xScale.rangeBand(),
			height: yScale(d),
			fill: colourScale(d),
			i: 'a' + i
		})
	});

drawCircle(isotype)
	function drawCircle(lines){
	for(i in lines){ //iterating through each column
		var bar = lines[i];
		for(var l = bar.y + bar.height - bar.width - stroke_width; l > bar.y - bar.width/2; l = l - bar.width - stroke_width){

			var x = bar.x + bar.width/2
			var y = l

			svg.append("rect")
				.style('stroke', colourScale(-l))
				.attr('prevStroke', colourScale(-l))//storing previous state in the element...
				.style('stroke-width', stroke_width/2)
				.attr('prevStroke-Width', stroke_width/2)//storing previous state in the element...
		    .style("fill", colourScale(l)) //switch to 'bar.fill' if want to draw colours vertical, rather than horizontal
		    .attr('x', x)
		    .attr('y', y)
		    .classed('a' + l + ' a' + i, true)//row + column
		    .attr('height', bar.width) //try scaling height of this???
		    .attr('width', bar.width)
		    .on('mouseover', function(){
		    	d3.selectAll('.' + this.classList[0]).style('stroke', 'black')//row
		    	d3.selectAll('.' + this.classList[1]).style('stroke', 'black')//column

		    	d3.select(this).style('stroke', 'maroon')
		    	d3.select(this).style('stroke-width', stroke_width)
		    })
		    .on('mouseout', function(){
		    	var self = d3.select(this);
		    	self.style('stroke', self.attr('prevStroke'))//why not going back??
		    	self.style('stroke-width', self.attr('prevStroke-Width'))

		    	var row = d3.selectAll('.' + this.classList[0])
		    	row.style('stroke', row.attr('prevStroke'))

		    	//Try to assign a unique identifier to each one..
		    	//try going id based, will help reverting original colour easier
		    	var column = d3.selectAll('.' + this.classList[1]); //select all might be generating issues..
		    	column.style('stroke', column.attr('prevStroke'))
		    	//prev line is creating error...colour is mismatch -> probably due to id issues...
		    })
		}
	}
}