Sortable bar chart

<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.1.3/d3.js"></script>
<style type="text/css">
body {
font: 10px sans-serif;
}
svg {
shape-rendering: crispEdges;
}
.x.axis path{
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">

function newName(length) {
    var consonants = "bcdfglmnprstv";
    var vocals = "aeiou";
    var s = "";
    var type = false;
    for (var i = 0; i < length; i++) {
        type = !type;
        var rnd = Math.random();
        s += (type == 0)? consonants.charAt(~~(rnd*consonants.length)) : vocals.charAt(~~(rnd*vocals.length)); 
        if (s.length == 1) s = s.toUpperCase();
    }
    return s;
}

var w = 430,
    h = 230,
    x = d3.scale.linear().domain([0, 1]).range([0, w]),
    y = d3.scale.ordinal().domain(d3.range(data1.length)).rangeBands([0, h], .2)
    color = d3.interpolateRgb("#446688", "#88ddff"),
    xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
    yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");
    
var vis = d3.select("body")
  .append("svg:svg")
    .attr("width", w + 40)
    .attr("height", h + 20)
  .append("svg:g")
    .attr("transform", "translate(20,0)");

vis.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + h + ")")
    .call(xAxis);

var barGroup = vis.selectAll("g.bar")
    .data(data1)
  .enter().append("svg:g")
    .attr("class", "bar")
    .attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });

barGroup.append("svg:rect")
    .attr("class", "shadow")
    .attr("width", x)
    .attr("height", y.rangeBand())
    .attr("fill", function(d, i){return color(d)})
    .attr("opacity", 0.3);
    
barGroup.append("svg:rect")
    .attr("class", "bar")
    .attr("width", x)
    .attr("height", y.rangeBand())
    .attr("fill", function(d, i){return color(d)});
    
barGroup.append("svg:text")
    .text(function(d, i){return names[i];})
    .attr("width", x)
    .attr("x", 3)
    .attr("y", 3)
    .attr("fill", "black")
    .style("alignment-baseline", "hanging");

vis.append("svg:line")
    .attr("y1", 0)
    .attr("y2", h)
    .attr("stroke", "black")
    .attr("stroke-width", 2);

function resize(){
    barGroup.data(newData);
    
    d3.selectAll("rect.bar")
        .data(newData)
        .transition()
        .delay(500)
        .attr("width", x);
    d3.selectAll("rect.shadow")
        .data(newData)
        .transition()
        .delay(1500)
        .attr("opacity", 0)
        .transition()
        .delay(2000)
        .attr("width", x)
        .each("end", function(d, i){if(i==0)rescale();});
}

function rescale(){
    x.domain([0, d3.max(newData)]);
    var t = vis.transition().duration(500);
    t.select(".x.axis").call(xAxis);   
    d3.selectAll("rect.bar")
        .transition()
        .duration(500)
        .attr("width", x);
    d3.selectAll("rect.shadow")
        .transition()
        .duration(500)
        .attr("width", x)
        .attr("opacity", 0.3);
}
    </script>
  </body>
</html>

Modified http://mbostock.github.com/d3/d3.js?2.0.0 to a secure url

https://mbostock.github.com/d3/d3.js?2.0.0