Drawing A square Matrix using D3.js

Question

I have some data that looks like [ [30 elements], [30 elements], [30 elements]... ] this array can contain any number of arrays of 1-31 elements. The inner arrays will always be the same as the represent the number of days that will be processed. Each inner array will also have its on label, so it would like like

A | 30 element array
B | 30 element array
C | 30 element array

The 30 element Array will just be svg rects i draw on the screen, so really it will look like

A | rect rect rect rect... (1-31 rects)
B | rect rect rect rect... (1-31 rects)
C | rect rect rect rect... (1-31 rects)

naturally I'm new to d3.js so I'm having problems and I think its because I don't understand how to use data() properly. Right now I'm doing something like this

.data(d3.range( d3.range(d[0].length).length) * d3.range(d.length).length )
//this is to know how many rectangles I need to draw

so the first term is the number of elements for an inner array and the second term is the number of inner arrays.

I'm not using scales because I could not position the rects properly, so I guess I don't understand those either. to give you and idea on what I'm doing to position them for the x and y attribute I'm doing stuff like this.

daysProcessed = d[0].length
uniqueLabels  = d3.range(d.length).length

x = svgwidth/(daysProcessed +xmargin) * i%dayProcessed +xmargin // i is from  .attr("x",function(d, i)


y = rectSize *(i%uniqueLables)

so as you can imagine this is a mess can anyone help me with a simpler way and tell me the proper way to use .data on a square matrix?

Answer 1

I think that generating the data before trying to draw the rectangles is a better approach. You can use d3.range to generate the data matrix:

// Setup
var width = 300,
    height = 300,
    div = d3.select('#chart'),
    svg = div.append('svg')
        .attr('width', width)
        .attr('height', height),
    rw = 95,
    rh = 95;  

Where rw and rh are the width and height of the rectangles. Then, you can create the data matrix:

var data = [];
for (var k = 0; k < 3; k += 1) {
    data.push(d3.range(3));
}

To actually draw the rectangles, you can bind the elements of the data array (the inner arrays) to groups in svg, and translate the groups based in the row number, adding a small margin:

// Create a group for each row in the data matrix and translate the 
// group vertically
var grp = svg.selectAll('g')
    .data(data)
    .enter()
    .append('g')
    .attr('transform', function(d, i) {
        return 'translate(0, ' + (rh + 5) * i + ')';
    });

Then, for each group, you can add the rectangles, adjusting the horizontal position only (the vertical position was already set in the containing group). Here, you need to bind the inner array elements (the group datum) to each rectangle:

// For each group, create a set of rectangles and them to the inner array
// (the inner array is binded to the group)
grp.selectAll('rect')
    .data(function(d) { return d; })
    .enter()
    .append('rect')
        .attr('x', function(d, i) { return (rw + 5) * i; })
        .attr('width', rw)
        .attr('height', rh);

I would recomend you to read How Selections Work. Also, I wrote a small jsfidlle with this code: http://jsfiddle.net/pnavarrc/Sg3BY/1/