understand the nested and stack function

[Maitep]

Hi guys, I try to understand the nested and stack function in D3.

For that, I follow this example, that is really really great.

and I try my own example, but don't work, 

I want to show the date separate by  key each key must have different color no the same 

keys = ['6-12m_a', '6-12m_b', '>12m_b' , '0'.. etc ]

I don't know why my data are separate and the bar is floating 

This is my code and you can see running here

var data = {"6-12m_a": [{"count": 1231, "code": "272.4"}, {"count": 1115, "code": "V04.81"}, {"count": 1024, "code": "V70.0"}, {"count": 922, "code": "268.9"}, {"count": 818, "code": "780.79"}, {"count": 764, "code": "530.81"}, {"count": 693, "code": "V72.84"}, {"count": 652, "code": "V82.9"}, {"count": 650, "code": "278.00"}, {"count": 649, "code": "786.2"}], "6-12m_b": [{"count": 791, "code": "272.4"}, {"count": 734, "code": "250.00"}, {"count": 555, "code": "V70.0"}, {"count": 403, "code": "268.9"}, {"count": 395, "code": "244.9"}, {"count": 388, "code": "530.81"}, {"count": 336, "code": "780.79"}, {"count": 313, "code": "285.9"}, {"count": 292, "code": "278.00"}, {"count": 273, "code": "599.0"}], ">12m_b": [{"count": 1252, "code": "V70.0"}, {"count": 1237, "code": "272.4"}, {"count": 1109, "code": "250.00"}, {"count": 731, "code": "V72.31"}, {"count": 633, "code": "V82.9"}, {"count": 594, "code": "268.9"}, {"count": 574, "code": "780.79"}, {"count": 570, "code": "599.0"}, {"count": 565, "code": "244.9"}, {"count": 548, "code": "724.2"}], ">12m_a": [{"count": 3613, "code": "V70.0"}, {"count": 3480, "code": "401.1"}, {"count": 2915, "code": "V72.62"}, {"count": 2732, "code": "268.9"}, {"count": 2660, "code": "272.4"}, {"count": 2636, "code": "V72.84"}, {"count": 2383, "code": "V04.81"}, {"count": 2378, "code": "278.02"}, {"count": 2369, "code": "780.79"}, {"count": 2210, "code": "729.5"}], "0": [{"count": 8348, "code": "272.4"}, {"count": 6732, "code": "250.00"}, {"count": 3819, "code": "V70.0"}, {"count": 2728, "code": "278.00"}, {"count": 2412, "code": "V72.83"}, {"count": 2071, "code": "272.0"}, {"count": 1958, "code": "414.00"}, {"count": 1886, "code": "244.9"}, {"count": 1796, "code": "V82.9"}, {"count": 1703, "code": "530.81"}], "<6m_b": [{"count": 2001, "code": "250.00"}, {"count": 1818, "code": "272.4"}, {"count": 1455, "code": "V70.0"}, {"count": 935, "code": "268.9"}, {"count": 870, "code": "244.9"}, {"count": 820, "code": "278.00"}, {"count": 818, "code": "530.81"}, {"count": 743, "code": "780.79"}, {"count": 710, "code": "V82.9"}, {"count": 690, "code": "285.9"}], "<6m_a": [{"count": 2974, "code": "272.4"}, {"count": 1486, "code": "250.00"}, {"count": 1474, "code": "268.9"}, {"count": 1374, "code": "285.9"}, {"count": 1373, "code": "278.00"}, {"count": 1373, "code": "V72.84"}, {"count": 1218, "code": "530.81"}, {"count": 1204, "code": "V67.00"}, {"count": 1191, "code": "780.79"}, {"count": 1179, "code": "V70.0"}]}

  var outerWidth = 500;
  var outerHeight = 250;
  var margin = { left: 90, top: 30, right: 30, bottom: 40 };
  var barPadding = 0.2;
  var xColumn = "key";
  var yColumn = "count";
  var colorColumn = "code";
  var layerColumn = colorColumn;


  var innerWidth  = outerWidth  - margin.left - margin.right;
  var innerHeight = outerHeight - margin.top  - margin.bottom;


  var svg = d3.select("body").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight);
  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  var xAxisG = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + innerHeight + ")");
  var yAxisG = g.append("g")
    .attr("class", "y axis");

  var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding);
  var yScale = d3.scale.linear().range([innerHeight, 0]);
  var colorScale = d3.scale.category10();

  var siFormat = d3.format("s");
  var customTickFormat = function (d){
    return siFormat(d).replace("G", "B");
  };

  var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
    .outerTickSize(0);
  var yAxis = d3.svg.axis().scale(yScale).orient("left")
    .ticks(5)
    .tickFormat(customTickFormat)
    .outerTickSize(0);

  function render(d){
    var obj_key = [];
    $.each(d,function(item){
      obj_key.push(item);
    });
    objData = [];
    obj_key.forEach(function(item_key){
      d[item_key].forEach(function(items){
        items.key = item_key;
        objData.push(items);
      });
    })


    var nested = d3.nest()
      .key(function (d){ return d[xColumn]; })
      .entries(objData);


    var stack = d3.layout.stack()
      .y(function(objData){ return objData[yColumn]; })
      .values(function(objData){ return objData.values; });


    var layers = stack(nested);

    xScale.domain(layers.map(function (d){ return d[xColumn]; }));
    yScale.domain([
      0,
      d3.max(layers, function (layer){
        return d3.max(layer.values, function (d){
          return d.y0 + d.y;
        });
      })
    ]);


    xAxisG.call(xAxis);
    yAxisG.call(yAxis);


    var layerGroups = g.selectAll(".layer").data(layers);
    layerGroups.enter().append("g").attr("class", "layer");
    layerGroups.exit().remove();
    layerGroups.style("fill", function (d){
      return colorScale(d.key);
    });


    var bars = layerGroups.selectAll("rect").data(function (d){
      return d.values;
    });
    bars.enter().append("rect")
    bars.exit().remove();
    bars
      .attr("x", function (d){
        return xScale(d[xColumn]);
      })
      .attr("y", function (d){
        return yScale(d.y0 + d.y);
      })
      .attr("width", xScale.rangeBand())
      .attr("height", function (d){ return innerHeight - yScale(d.y); });
  }


render (data);

Any idea!

Thanks in advances

[Maitep]

I think that my problem is the data!

I try this now

  function print_data(d){

    var xColumn = "key";
    var yColumn = "count";
    var colorColumn = "code";

    var obj_key = [];
    $.each(d,function(item){
      obj_key.push(item);
    });
    objData = [];
    obj_key.forEach(function(item_key){
      d[item_key].forEach(function(items){
        items.key = item_key;
        objData.push(items);
      });
    })


    var nested = d3.nest()

      .key(function (d){ return d[colorColumn]; })

      .entries(objData);


    var stack = d3.layout.stack()
      .y(function(objData){ return objData[yColumn]; })
      .values(function(objData){ return objData.values; });


    var layers = stack(nested);

change in d3.nest 

before I have this .key(function (d){ return d[xColumn]; })

and now I change like this  

.key(function (d){ return d[colorColumn]; })

and I obtain this error

Uncaught TypeError: Cannot read property '1' of undefined(…)

in this line

 var layers = stack(nested);

any idea ??

Thanks in advances