stacked to multiples d3 js

Answer to SO http://stackoverflow.com/questions/29196915/d3-js-linear-scale-bar-position-and-height-in-stacked-to-multiple-charts

HTML

<!DOCTYPE html>
<script src="http://d3js.org/d3.v3.js"></script>
<body>
    <form>
      <label><input type="radio" name="mode" value="states" checked> States</label>
      <label><input type="radio" name="mode" value="india"> India </label>
    </form>
</body>

CSS

body {
font-family: "Open Sans", sans-serif;
background: cadetblue;
}
svg {
background: white;
}
.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}



.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

.info-head:hover .info {
    display: block;
}

.info {
    display: none;
    background: #C8C8C8;
    margin-left: 28px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width: 150px;
    height: 30px;
}

.info-head {
    margin: 10px;
    cursor: default;
}

JavaScript

var margin = {
    top: 30,
    right: 20,
    bottom: 40,
    left: 60
},
width = 960 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var y0 = d3.scale.ordinal()
    .rangeRoundBands([height, 0], .2);

var y1 = d3.scale.linear();

var y2 = d3.scale.linear();

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 1, 0);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(0);

var yAxis = d3.svg.axis()
    .scale(y2)
    .orient("left")
    .ticks(20);

var nest = d3.nest()
    .key(function (d) {
    return d.group;
});

var nest_year = d3.nest()
    .key(function (d) {
    return d.year;
});

var stack = d3.layout.stack()
    .values(function (d) {
    return d.values;
})
    .x(function (d) {
    return d.year;
})
    .y(function (d) {
    return d.value;
})
    .out(function (d, y0) {
        if(isNaN(y0)) {console.log(d);}
    d.valueOffset = y0;
});

// Not needed
//var stack_year = d3.layout.stack()
//.values(function(d) { return d.values; })
//.x(function(d) { return d.year; })
//.y(function(d) { return d.value; })
//.out(function(d, y2) { d.valueOffset = y2; });

var color = d3.scale.category10();

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var url = '/gh/get/response.json/bkamapantula/bkamapantula.github.io/tree/master/ed/';

d3.xhr(url)
    .header("X-Requested-With", "XMLHttpRequest")
    .header("Content-Type", "application/x-www-form-urlencoded")
    .post("delay=1", function (error, request) {
    if (error) return console.warn(error.responseText);
    var data = jQuery.parseJSON(request.responseText);

    data.forEach(function (d) {
        d.year = +d.year;
        d.value = +d.value;
    });

    var dataByGroup_year = nest_year.entries(data);


    // calculates sum of all wins per...