JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

CSS

body {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.bar {
    fill: steelblue;
}
.x.axis path {
    display: none;
}

JavaScript

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

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

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

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

var svg = d3.select("body").append("svg")
    .attr("id", "mySVG")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")rotate(90," + width / 2 + "," + height / 2 + ")");
var legend = d3.select("svg").append("g");
//rotate the whole graph on width/2 and height/2
var data = [{
    "State": "AL",
        "Under 5 Years": "310504",
        "5 to 13 Years": "552339",
        "14 to 17 Years": "259034",
        "18 to 24 Years": "450818"
}, {
    "State": "AK",
        "Under 5 Years": "52083",
        "5 to 13 Years": "85640",
        "14 to 17 Years": "42153",
        "18 to 24 Years": "74257"
}, {
    "State": "AZ",
        "Under 5 Years": "515910",
        "5 to 13 Years": "828669",
        "14 to 17 Years": "362642",
        "18 to 24 Years": "601943"
}, {
    "State": "AR",
        "Under 5 Years": "202070",
        "5 to 13 Years": "343207",
        "14 to 17 Years": "157204",
        "18 to 24 Years": "264160"
}]




color.domain(d3.keys(data[0]).filter(function (key) {
    return key !== "State";
}));

data.forEach(function (d) {
    var y0 = 0;
    d.ages = color.domain().map(function (name) {
        return {
            name: name,
            y0: y0,
            y1: y0 += +d[name]
        };
    });
    d.total = d.ages[d.ages.length -...