D3.js : How To Read Data From JSON In Grouped Bar Chart

I am working on D3.js where I am exploring each and every aspects of D3. While Exploring Grouped Bar Chart I can across to read file through JSON (not via CSV). If you can see in G

Solution 1:

Finally I created Grouped Bar Chart using JSON data. I have written web services which will send JSON data to D3.

My JSON is same as above I posted in Question

Only the change I have done in D3 is ..

d3.json("rooturi/rest/ordernumbertracks", function(error, data) {
  var ageNames = d3.keys(data.ordernumbertrack[0]).filter(function(key) { return key !== "state";
});

data.ordernumbertrack.forEach(function(d) {
  d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
});

x0.domain(data.ordernumbertrack.map(function(d) { return d.state; }));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data.ordernumbertrack, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("");

var state = svg.selectAll(".state")
  .data(data.ordernumbertrack)
.enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x0(d.state) + ",0)"; });

I can't expect It is as simple as that :)