D3 Examples - sorted bar chart years

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: relative;
        width: 960px;
    }
​
    .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: yellow;
    }
​
    rect {
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
​
    #tooltip {
        position: absolute;
        width: 220px;
        height: auto;
        padding: 10px;
        background-color: #aec;
        -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 id='sort' type="checkbox" align='right'> Sort values</label>
<div id="tooltip" class="hidden">
    <p><strong id="worksite">Worksite </strong></p>
    <p><span id="h1bcount">H1-B count</span></p>
</div>
​
<div id="types">
​
    <form action="">
​
​
        <input id="radio1" type="radio" name="group" value="2014" /> 2014<br>
        <input id="radio2" type="radio" name="group" value="2015" />2015<br>
        <input id="radio3" type="radio" name="group" value="2016" /> 2016<br>
    </form>
</div>
​
<div id="tooltip" class="hidden">
    <p><strong>H1-count by worksite</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 Unit;//string for the units in toolptips
    var Label;
    var Dataset;
    var InputFileName;
    var margin = { top: 20, 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 + ")");
​
    //Default Values
    Unit = ' count ';
    Label = 'H1-B count: ';
    InputFileName = "2014_Worksite.csv";
​
​
    if (document.getElementById('radio1').checked) {
        Unit = ' count';
        Label = 'H1-B count: ';
        InputFileName = '2014_Worksite.csv';
    }
    if (document.getElementById('radio2').checked) {
        Unit = ' count';
        Label = 'H1-B count: ';
        InputFileName = '2015_Worksite.csv';
    }
    if (document.getElementById('radio3').checked) {
        Label = 'H1-B count: ';
        Unit = ' count:';
        InputFileName = '2016_Worksite.csv';
    }
​
    document.getElementById('radio1').checked = true;
​
    d3.csv(InputFileName, function (error, data) {
        data.forEach(function (d) {
            d.h1bcount = +d.h1bcount;
        });
        Dataset = data;
        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", ".71em")
            .style("text-anchor", "end")
            .text("Value");
​
        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"));
                var yPosition = parseFloat(d3.select(this).attr("y"));
​
                //Update the tooltip position and value
                d3.select("#tooltip")
                    .style("left", xPosition + "px")
                    .style("top", yPosition + "px")
                    .select("#h1bcount")
                    .text(Label + d.h1bcount + Unit);
          
                d3.select("#tooltip")
                    .style("left", xPosition + "px")
                    .style("top", yPosition + "px")
                    .select("#worksite")
                    .text("Worksite: " + d.worksite)
​
​
                //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 'HDI Rank:'+d.Rank+'  Value:'+d.Value;
        //      });
        d3.selectAll("input").on("change", change);
        d3.select("#sort").on("change", sort);
​
        var sortTimeout = setTimeout(function () {
            d3.select("#sort").property("checked", true).each(change);
        }, 2000);
​
​
​
        //Action when radiobutton status is changed
        function change() {
            //update status and filename
            document.getElementById('sort').checked = false;
            if (document.getElementById('radio1').checked) {
                Unit = ' count';
                Label = 'Worksite: ';
                InputFileName = '2014_Worksite.csv';
            }
            if (document.getElementById('radio2').checked) {
                Unit = ' count';
                Label = 'Worksite: ';
                InputFileName = '2015_Worksite.csv';
            }
            if (document.getElementById('radio3').checked) {
                Label = 'count ';
                Unit = ' Worksite:';
                InputFileName = '2016_Worksite.csv';
            }
            //if(document.getElementById('radio4').checked){
​
            //InputFileName='HDI-Low.csv';}
​
​
            //change dataset
            d3.selectAll("svg").remove();
            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(InputFileName, function (error, data) {
                data.forEach(function (d) {
                    d.Value = +d.Value;
                });
​
                Dataset = data;
                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", ".71em")
                .style("text-anchor", "end")
                .text("Value");
​
                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) {
​
​
                    var xPosition = parseFloat(d3.select(this).attr("x"));
                    var yPosition = parseFloat(d3.select(this).attr("y"));
​
                    d3.select("#tooltip")
                        .style("left", xPosition + "px")
                        .style("top", yPosition + "px")
                        .select("#h1bcount")
                        .text(Label + d.h1bcount + Unit);
                   
                    d3.select("#tooltip")
                        .style("left", xPosition + "px")
                        .style("top", yPosition + "px")
                        .select("#worksite")
                        .text("Worksite: " + d.worksite)
​
                    //Show the tooltip
                    d3.select("#tooltip").classed("hidden", false);
​
                })
                .on("mouseout", function () {
​
                    //Hide the tooltip
                    d3.select("#tooltip").classed("hidden", true);
​
​
                })
​
            });
​
        };
​
        //SORTING
        function sort() {
            data = Dataset;
            var x0 = x.domain(data.sort(this.checked
                ? function (a, b) { return b.h1bcount - a.h1bcoun; }
                : function (a, b) { return a.Rank - b.Rank; })
                .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>
    