Trouble Binding JSON subarrays in d3.js

Question

I guess anyone who monitors the d3 questions is getting used to seeing me this week (this is my first time using d3) so here goes another question. I am fetching data via php/ajax but I have placed a sample as hard code below. I wish to bind the fineBinSummary data to a bar chart but can't seem to figure out how. When I inspect the html it makes it as far as setting up the svg and then stops when I start to try to bind data to it.

I successfully bound the detail data (code not shown, just the JSON) but can't get the fineBinSummary data to bind in the same manner. I also will need to extract the length of the fineBinSummary array (you can see that I've just made it the width / 5 but there won't always be 5 bars in the chart. Any assistance is much appreciated.

(document).ready(function() {

var data = [
    {"Id":"93439440411",

        "detail":[{"fineBin":"UNCLASSIFIED","x":"-142000.0","y":"-21000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-142000.0","y":"16000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-141000.0","y":"-15000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-141000.0","y":"24000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-141000.0","y":"27000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-140000.0","y":"-15000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"}],

        "fineBinSummary":[{"fineBin":"UNCLASSIFIED","count":8212},{"fineBin":"SMALL_PARTICLE","count":104},{"fineBin":"RESIDUE","count":68},
            {"fineBin":"FALSE","count":16},{"fineBin":"258","count":12}]},

    {"Id":"93439440419",

        "detail":[{"fineBin":"UNCLASSIFIED","x":"-142839.40900000001","y":"20448.394","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-142546.65599999999","y":"26731.720000000001","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-142499.136","y":"-24443.516","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-142267.68799999999","y":"32411.870999999999","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-142000.0","y":"-33000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"}],

        "fineBinSummary":[{"fineBin":"UNCLASSIFIED","count":8212},{"fineBin":"SMALL_PARTICLE","count":104},{"fineBin":"RESIDUE","count":68},
                            {"fineBin":"FALSE","count":16},{"fineBin":"258","count":12}]}]

//Constants

var squareSide = 400;
var height = squareSide / 2.0;
var barWidth = squareSide / 5;

//begin building bootstrap courousel stack
var slides = d3.select(".carousel-inner").selectAll('div')
    .data(data)
    .enter()
    .append("div")
    .attr("class","item")
    .append("div")
    .attr("class","container-fluid")
    .append("div")
    .attr("class","row");

//Make the first slide the active slide
d3.selectAll(".item").classed('active', function(d, i) { return i == 0; });

//Build the image side of the slide
var imageSide = slides.append("div")
    .attr("class","col-lg-6 wafer-and-pareto");


//build final location for div that will hold the histogram
var paretoBox = imageSide.append("div")
    .attr("class","row")
    .append("div")
    .attr("class","col-lg-12")
    .append("div")
    .attr("class","pareto-box")
    .append("svg")
    .attr("class","chart")
    .attr("width",squareSide)
    .attr("height",squareSide / 2.0);

Seems to be working up to this point based on reviewing the html but does not successfully execute the code below:

var bar = paretoBox.selectAll("g")
    .data(function(d) {return data.fineBinSummary})
    .enter()
    .append("g")
    .attr("transform",function(d,i) {
        return "translate(" + i * barWidth + ",0)";
    });

bar.append("rect")
    .attr("y",function(d) {
        return y(d.count);
    })
    .attr("height",function(d) {
        return height - y(d.count)
    })
    .attr("width",barWidth - 1);

var y = d3.scale.linear()
    .range([height,0])
    .domain([0,d3.max(data.fineBinSummary,function(d) {
        return d.count;
    })]);

})

Answer 1

There are just two small problems with your code. First, in your nested selection, you are referencing the original data instead of the part bound to the current element. Instead of

var bar = paretoBox.selectAll("g")
  .data(function(d) {return data.fineBinSummary})

use

var bar = paretoBox.selectAll("g")
  .data(function(d) {return d.fineBinSummary})

Second, the max element for your scale is determined incorrectly -- data doesn't have a fineBinSummary member. The code should look like this:

var y = d3.scale.linear()
  .range([height,0])
  .domain([0, d3.max(data, function(d) {
    return d3.max(d.fineBinSummary, function(e) { return e.count; });
  })]);