D3 Grouped Bar Chart JSON

by aybalasubramanian

HTML

<svg width="960" height="500"></svg>

JavaScript

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

        var x0 = d3.scaleBand()
            .rangeRound([0, width])
            .paddingInner(0.1);

        var x1 = d3.scaleBand()
            .padding(0.05);

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

        var z = d3.scaleOrdinal()
            .range(["#16A085", "#33435C"]);

        var vals = '[{"Race":"R1","HTC":270,"Registry":449},{"Race":"R2","HTC":202,"Registry":327},{"Race":"R3","HTC":120,"Registry":214},{"Race":"R4","HTC":114,"Registry":193},{"Race":"R5","HTC":894,"Registry":155},{"Race":"R6","HTC":737,"Registry":134}]';
        data = JSON.parse(vals);
        var keys = Object.keys(data[0]).slice(1);

        x0.domain(data.map(function (d) { return d.Race; }));
        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("transform", function (d) { return "translate(" + x0(d.Race) + ",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) { return height - y(d.value); })
            .attr("fill", function (d) { return z(d.key); });

        g.append("g")
           ...