#Isotype - Square:
Square based isotypes with masking. While isotype does not actually represent the data correctly, as they are based off height of an imaginary bar rather than actual values in the dataset.
###ToDo:
| 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... | |
| }) | |
| } | |
| } | |
| } |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Isotype - Square</title> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart" style="border: 2px dashed black"></div> | |
| </body> | |
| <script src="chart.js"></script> | |
| </html> |
