d3 accessing nested data in grouped bar chart

by sladav

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<pre id="data">
Month,Category,Rate
Jul-14,Actual,200000
Aug-14,Actual,198426.57
Sep-14,Actual,290681.62
Oct-14,Actual,362974.9
Nov-14,Actual,397662.09
Dec-14,Actual,512434.27
Jan-15,Actual,511470.25
Jan-15,Forecast,511470.25
Feb-15,Forecast,536472.5467
Mar-15,Forecast,612579.9047
Apr-15,Forecast,680936.5086
May-15,Forecast,755526.7173
Jun-15,Forecast,811512.772
Jul-14,Budget,74073.86651
Aug-14,Budget,155530.2499
Sep-14,Budget,220881.4631
Oct-14,Budget,314506.6437
Nov-14,Budget,382407.67
Dec-14,Budget,442192.1932
Jan-15,Budget,495847.6137
Feb-15,Budget,520849.9105
Mar-15,Budget,596957.2684
Apr-15,Budget,465313.8723
May-15,Budget,739904.081
Jun-15,Budget,895890.1357
</pre>

<div class="plot-div">

</div>

CSS

pre#data {display:none;}

.plot-div{
  width: 700px
}

.plot-svg {
  border-style: solid;
  border-width: 1px;
  border-color: green;
}

.line {
  fill: none;
  stroke-width: 3;
}

JavaScript

var margin = {top: 100, right: 150, bottom: 100, left: 150}
var height = 900 - margin.top - margin.bottom,
		width  = 1600 - margin.right - margin.left;

var data = d3.csv.parse( d3.select("pre#data").text());

parseDate = d3.time.format("%b-%y").parse;
data.forEach(function(d) {
	d.Month = parseDate(d.Month);
  d.value = Number(d.Rate);
  });
   
var nestedData = d3.nest()
			.key(function(d) { return d.Category;})
      .entries(data)

function getKeys(objArr){
		return objArr.map(function(a) {return a.key;})
  };

var x = d3.time.scale()
			.domain(d3.extent(data, function(d) {return d.Month;}))
      .range([0, width])
      
var y = d3.scale.linear()
			.domain([0,d3.max(data.map(function(a){return a.Rate}))])
      .range([height, 0])
   
var color = d3.scale.category10()
			.domain(getKeys(nestedData))
 			
      
var xAxis = d3.svg.axis()
			.scale(x)
      .orient("bottom")
      
var yAxis = d3.svg.axis()
			.scale(y)
      .orient("left")
      
var lineFunction = d3.svg.line()
			.interpolate("linear")
			.x(function(d) {return x(d.Month)})
      .y(function(d) {return y(d.Rate)})
      
			
d3.select(".plot-div").append("svg")
		.attr("class", "plot-svg")
		.attr("width", "100%")
    .attr("viewBox", "0 0 1600 900")
    .append("g")
    	.attr("class", "plot-space")
      .attr("transform", 
      	"translate(" + margin.left + "," + margin.top + ")"
        );
   
d3.select(".plot-space").append("g")
		.attr("class", "xAxis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

d3.select(".plot-space").append("g")
		.attr("class", "yAxis")
    .call(yAxis);
 
d3.select(".plot-space").selectAll(".g-category")
    .data(nestedData)
    .enter().append("g")
    .attr("class", "g-category")

d3.selectAll(".g-category").append("path")
		.attr("class", "line")
    .attr("d", function(d){ return lineFunction(d.values);})
    .style("stroke", function(d) {return...