D3 Examples - sorted bar chart-h1b visa petitions count

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: relative;
        width: 1146px;
    }
​
    .axis text {
        font: 10px sans-serif;
    }
​
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
​
    .bar {
        fill: steelblue;
        fill-opacity: .9;
    }
​
    .x.axis path {
        display: none;
    }
​
    label {
        position: absolute;
        top: 10px;
        right: 10px;
    }
​
    rect:hover {
        fill: orange;
    }
​
    rect {
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
​
    #tooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
    }
​
        #tooltip.hidden {
            display: none;
        }
​
        #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
        }
</style>
​
<label><input type="checkbox"> Sort count of H1-B</label>
<div id="tooltip" class="hidden">
    <p><strong>H1-B count</strong></p>
    <p><span id="value">100</span>%</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
    var margin = { top: 18, right: 20, bottom: 180, left: 100 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var format = d3.format(".0");
    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1, 1);
    var y = d3.scale.linear()
        .range([height, 0]);
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickFormat(format);
    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 + ")");
    d3.csv("2014_Worksite.csv", function (error, data) {
        data.forEach(function (d) {
            d.h1bcount = +d.h1bcount;
        });
        x.domain(data.map(function (d) { return d.worksite; }));
        y.domain([0, d3.max(data, function (d) { return d.h1bcount; })]);
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .selectAll("text")
                  .style("text-anchor", "end")
                  .attr("dx", "-.5em")
                  .attr("dy", "-.9em")
                  .attr("transform", function (d) {
                      return "rotate(-90)"
                  });
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
          .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "0.6816em")
            .style("text-anchor", "end")
            .text("H1-B count");
        svg.selectAll(".bar")
            .data(data)
          .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function (d) { return x(d.worksite); })
            .attr("width", x.rangeBand())
            .attr("y", function (d) { return y(d.h1bcount); })
            .attr("height", function (d) { return height - y(d.h1bcount); })
            .on("mouseover", function (d) {
​
                //Get this bar's x/y values, then augment for the tooltip
                var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
                var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;
​
                //Update the tooltip position and value
                d3.select("#tooltip")
                    .style("left", xPosition + "px")
                    .style("top", yPosition + "px")
                    .select("#value")
                    .text(d);
​
                //Show the tooltip
                d3.select("#tooltip").classed("hidden", false);
​
            })
                     .on("mouseout", function () {
​
                         //Hide the tooltip
                         d3.select("#tooltip").classed("hidden", true);
​
​
                     })
                     .append("title")
         .text(function (d) {
             return d.h1bcount;
         });
        d3.select("input").on("change", change);
        // var sortTimeout = setTimeout(function() {
        // d3.select("input").property("checked", true).each(change);
        //}, 2000);
        function change() {
            //clearTimeout(sortTimeout);
            // Copy-on-write since tweens are evaluated after a delay.
            var x0 = x.domain(data.sort(this.checked
                ? function (a, b) { return b.h1bcount - a.h1bcount; }
                : function (a, b) { return d3.ascending(a.worksite, b.worksite); })
                .map(function (d) { return d.worksite; }))
                .copy();
            svg.selectAll(".bar")
                .sort(function (a, b) { return x0(a.worksite) - x0(b.worksite); });
            var transition = svg.transition().duration(750),
                delay = function (d, i) { return i * 50; };
            transition.selectAll(".bar")
                .delay(delay)
                .attr("x", function (d) { return x0(d.worksite); });
            transition.select(".x.axis")
                .call(xAxis)
              .selectAll("g")
                .delay(delay)
                .selectAll("text")
                    .style("text-anchor", "end")
                    .attr("dx", "-.5em")
                    .attr("dy", "-.9em")
                    .attr("transform", function (d) {
                        return "rotate(-90)"
                    });
        }
    });
</script>
    