Question: I would like to set a specific color on the circle of bubble chart in terms of a variable. I can change all the bubble in red for example but not each bubble. My condition is an attribute of d and it define by the content of my JSON.

```
node.append("circle")
        .attr("r", function(d) { return d.size; })
        .style("fill", "red"); // all my bubble are red but the condition doesn't works
        /* 
        if (condition) {
          .style("fill", "red");
        } else {
          .style("fill","green");
        }
        */

```

This is the Plunker project : <https://plnkr.co/edit/07RZFQoBrBz2xWxmiCl0?p=preview>
Thanks.

Answer: 
`reduce` over the colspan info.

```
var th = document.querySelectorAll('table thead tr:first-child th');

var cols = [].reduce.call(th, function (p, c) {
  var colspan = c.getAttribute('colspan') || 1;
  return p + +colspan;
}, 0);

```

[DEMO](https://jsfiddle.net/toahb3a3/3/)
To calculate the number of columns in a table, you need to find the row with the most columns in it. To do that, you need to test each row in turn, but take into account any cells from previous rows that span into it.

This should do the trick.

```
// Store the cells in each row
var rows = [];

function increment_row(index, amount) {
    if (rows[index]) {
        rows[index] += amount;
    } else {
        rows[index] = amount;
    }
}

// Count the cells in each row
$("tr").each(function (row_index, row_element) {
    var $row = $(row_element);
    $row.children().each(function (cell_index, cell_element) {
        var $cell = $(cell_element);
        var row_count = parseInt($cell.attr("rowspan"), 10) || 1;
        var col_count = parseInt($cell.attr("colspan"), 10) || 1;
        for (var i = 0; i < row_count; i++) {
             increment_row(row_index + i, col_count);        
        }
    })
});

// Find the row with the most cells
var sorted = rows.sort();
console.log(sorted[sorted.length - 1]);

```