How to create a bar chart made up of very small squares - svg

Question

I am trying to use d3 to create a chart which will end up being almost like a bar chart. However, I would like to accomplish this by using very small individual squares. Something like the image below but ignoring the random squares dotted around:
http://i.imgur.com/jYSyhur.jpg
Each square represents a vote (or group of votes depending on how many votes are made on a given day) and can have 3 possible values, each with a different shade of blue, i.e. light blue, blue and dark blue.
One example I have already found is http://bost.ocks.org/mike/miserables/ but I would like to convert this style in to a bar chart.
I have already attempted at doing the markup in HTML using tables and divs, but this got widely out of control and ending up massively slowing down the page loading speed -- hence the use of SVG instead.
Any ideas on how to approach this would be appreciated.

Answer 1

The basis for what you want to do is the stacked bar chart: http://bl.ocks.org/mbostock/3886208
However, there are a few things you will need to take into account. The y and x axes must be proportional so you will have to carefully consider:
the size of the graph
the number of data points
the max value each data point can have
and select a height, width and "value" for each tick - each square.
I've made a demonstration fiddle here: http://jsfiddle.net/sa5RK/
It assumes a few things (for simplicity!):
Each tick is one value
The height & width of the box is set
var boxheight = 6;
the height / width can be dynamic based on the size of the box and data values
var margin = {top: 20, right: 20, bottom: 80, left: 40},
width = boxheight * data.length;
var max = d3.max(data, function(d){return d.a + d.b + d.c});
var height = max * boxheight;
I hope that's enough to get you started!
The other key thing which will help you out, is learning how each data joined selection can be set to a variable, then selecting inside of it will allow you access to the outside bound data. eg. below, each data group (value in the original array) -> has types (a,b or c) -> has rectangles
var groups = svg.selectAll(".group")
.data(data)
.enter().append("g")
.attr("transform", function(d,i){return "translate(" + x(i) + ", 0)"})
.attr("class", "group")
var types = groups.selectAll(".type")
.data(function(d){return d.offsets})
.enter().append("g")
.attr("transform", function(d){ return translate(0,y(d.y1))})
.attr("class", "type")
.attr("fill", function(d){return color(d.type)})
types.selectAll("rect")
.data(function(d){return d3.range(0,d.value)})
.enter().append("rect")
.attr("height", boxheight-0.5)
.attr("width", boxheight-0.5)
.attr("y", function(d){ return boxheight * d })