D3.js group chart

HTML

<script src="https://d3js.org/d3.v4.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="chart"></div>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}


.axis--x path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

JavaScript

var $this =  $('#chart');

		var w = 960;
		var h = 360;

		//var configurations = $this.data("configurations");

		
		var data = [{
		  "State": "a",
		  "AA": 100,
		  "BB": 200
		}, {
		  "State": "b",
		  "AA": 454,
		  "BB": 344
		},{
		  "State": "c",
		  "AA": 140,
		  "BB": 500
		}, {
		  "State": "d",
		  "AA": 154,
		  "BB": 654
		}];
		

		var yLabel = "Count";


		var svg = d3.select($this[0]).append("svg"),
		  margin = {
		    top: 20,
		    right: 20,
		    bottom: 30,
		    left: 40
		  },
		  width = w - margin.left - margin.right,
		  height = h - margin.top - margin.bottom,
		  g = svg
		  .attr("width", w)
		  .attr("height", h)
		  .append("g")
		  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

		// The scale spacing the groups:
		var x0 = d3.scaleBand()
		  .rangeRound([0, width])
		  .paddingInner(0.1);

		// The scale for spacing each group's bar:
		var x1 = d3.scaleBand()
		  .padding(0.05);

		var y = d3.scaleLinear()
		  .rangeRound([height, 0]);

		var z = d3.scaleOrdinal()
		  .range(["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f", "#8bf41b"]);

		var keys = d3.keys(data[0]).slice(1);

		x0.domain(data.map(function(d) {
		  return d.State;
		}));
		x1.domain(keys).rangeRound([0, x0.bandwidth()]);
		y.domain([0, d3.max(data, function(d) {
		  return d3.max(keys, function(key) {
		    return d[key];
		  });
		})]).nice();

		g.append("g")
		  .selectAll("g")
		  .data(data)
		  .enter().append("g")
		  .attr("class", "bar")
		  .attr("transform", function(d) {
		    return "translate(" + x0(d.State) + ",0)";
		  })
		  .selectAll("rect")
		  .data(function(d) {
		    return keys.map(function(key) {
		      return {
		        key: key,
		        value: d[key]
		      };
		    });
		  })
		  .enter().append("rect")
		  .attr("x", function(d) {
		    return x1(d.key);
		  })
		  .attr("y", function(d) {
		    return y(d.value);
		  })
		  .attr("width", x1.bandwidth())
		  .attr("height", function(d) {
		 ...