Grouped Bar Chart

<!DOCTYPE HTML>
<html>

<head>
    <title>ninjaPixel.js Bar Chart</title>
</head>
<style>
    .ninja-axis path,
    .ninja-axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    .ninja-background{
        fill: #333333;
        stroke: black;
    }
    text {
        font: 12px sans-serif;
        position: absolute;
    }
    .ninja-chartTitle {
        font: 18px sans-serif;
    }
    .yTitle,
    .xTitle {
        font: 16px sans-serif;
    }
    .d3-tip {
        line-height: 1;
        padding: 8px;
        background: rgba(100, 100, 100, 0.7);
        color: #fff;
        border-radius: 2px;
        font: 12px sans-serif;
        width: 100px;
    }
    /* Creates a small triangle extender for the tip */
    .d3-tip:after {
        box-sizing: border-box;
        display: inline;
        font-size: 10px;
        width: 100%;
        line-height: 1;
        color: rgba(100, 100, 100, 0.7);
        content: "\25BC";
        position: absolute;
        text-align: center;
    }
    /* Style northward tooltips differently */
    .d3-tip.n:after {
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
    }

.ninja-yAxisGroup.ninja-axis g.tick line{
        stroke: #333333;
        opacity: 0.7; 
    }
</style>

var toolTip = barChart.toolTip();
    toolTip.html(function (d) {
        return d.y;
    });
    barChart.toolTip(toolTip);
    
    ready();

function menWomenData(sex, color){
        return {group: sex, y: Math.random() * (10), color: color};
    }
    function ready(error) {
        var data = [
            {x:'Jersey', data:[menWomenData('men', '#fc8d59'), menWomenData('women','#91cf60')]},
            {x:'Guernsey', data:[menWomenData('men', '#fc8d59'), menWomenData('women','#91cf60')]},
            {x:'Sark', data:[menWomenData('men', '#fc8d59'), menWomenData('women','#91cf60')]}
                  ];

barChart.plot(d3.select("#chart")
            .datum(data));
    }
</script>

</html>