D3 - SORT BARS IN BAR CHART

by bizamajig

HTML

<label>
    <input type="checkbox">Sort values</label>

CSS

body {
    font: 10px sans-serif;
}
label {
    position: absolute;
    top: 10px;
    left: 200px;
}
.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 = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .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("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

data = [{
    "State": "AL",
        "Under 5 Years": "310504",
        "5 to 13 Years": "552339",
        "14 to 17 Years": "259034",
        "18 to 24 Years": "450818",
        "25 to 44 Years": "1231572",
        "45 to 64 Years": "1215966",
        "65 Years and Over": "641667"
}, {
    "State": "AK",
        "Under 5 Years": "52083",
        "5 to 13 Years": "85640",
        "14 to 17 Years": "42153",
        "18 to 24 Years": "74257",
        "25 to 44 Years": "198724",
        "45 to 64 Years": "183159",
        "65 Years and Over": "50277"
}, {
    "State": "AZ",
        "Under 5 Years": "515910",
        "5 to 13 Years": "828669",
        "14 to 17 Years": "362642",
        "18 to 24 Years": "601943",
        "25 to 44 Years": "1804762",
        "45 to 64 Years": "1523681",
        "65 Years and Over": "862573"
}, {
    "State": "AR",
        "Under 5 Years": "202070",
        "5 to 13 Years": "343207",
        "14 to 17 Years": "157204",
        "18 to 24 Years": "264160",
        "25 to 44 Years": "754420",
        "45 to 64 Years": "727124",
        "65 Years and Over": "407205"
}, {
    "State": "CA",
        "Under 5 Years": "2704659",
        "5 to 13 Years": "4499890",
        "14 to 17 Years":...