|
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... |
|
}) |
|
} |
|
} |
|
} |
