Bar chart with multiple scales

response to stackoverflow question: http://stackoverflow.com/questions/10121720/grouped-bar-chart-with-different-y-axis-scales/10150814#10150814

by jsl6906

HTML

<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<svg id="svg"></svg>

JavaScript

var w = 300;
var h = 460;
var data = [[0.1, 0.2, 0.3, 0.4], [1000, 10000, 20000, 300000]];

var y0 = d3.scale.linear().domain([0, 1]).range([0,h]),
    y1 = d3.scale.linear().domain([0, 1000000]).range([0,h]);

var x0 = d3.scale.ordinal().domain(d3.range(4)).rangeBands([0, w], 0.2),
    x1 = d3.scale.ordinal().domain(d3.range(2)).rangeBands([0, x0.rangeBand()]);

var color = d3.scale.category10();

var vis = d3.select("#svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g");

var g = vis.selectAll("g")
    .data(data)
    .enter()
    .append("svg:g")
    .attr("fill", function(d, i) {return color(i);})
    .attr("transform", function(d, i) {return "translate(" + x1(i) + ",0)";});

var rect = g.selectAll("rect")
    .data(Object)
    .enter()
    .append("svg:rect")
    .attr("transform", function(d, i) {return "translate(" + x0(i) + ",0)";})
    .attr("width", x1.rangeBand())
    .attr("height", function(d,i,j) { //set the scale according to the series
        if (j==0) {return y0(d);}
        else if (j==1) {return y1(d);}
    })
    .attr("y", function(d,i,j) { //set the scale according the series
        if (j==0) {return h-y0(d);}
        else if (j==1) {return h-y1(d);}
    });