Elections and Search Weeks

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>

.ui{
        font-family: sans-serif;
        margin-left:3em;
        cursor:pointer;
    }

rect{
        fill:#B22234;
    }

.axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

.axis text {
        font-family: sans-serif;
        font-size: 11px;
    }

</style>
</head>
<body>

var margin = {top: 20, right: 80, bottom: 130, left: 120}, 
   width = window.innerWidth*0.9 - margin.left - margin.right,
	height = 600 - margin.top - margin.bottom;

var widthScale = d3.scale.linear()
                    .range([ 0, width ]);

var heightScale = d3.scale.ordinal()
                    .rangeRoundBands([ 0, height ], 0.1);

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

var yAxis = d3.svg.axis()
                .scale(heightScale)
                .orient("left");

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 + ')');

var d = [];
var weekCount = 0;

d3.csv("data.csv",function(root){
    root.forEach(function(data){
        for(var k in data){
            if (data.hasOwnProperty(k)) {
                if(k=="Week"){
                   var week = {"week":data[k],"ranks":[]};
                }else{
                   week["ranks"].push({"name":k,"rank":+data[k]});
                }
            }
        }
        d.push(week);
    })
    update(d[weekCount].ranks);
});

function nextWeek(){

weekCount = (weekCount+1<d.length)?weekCount+1:0;

update(d[weekCount].ranks);

d3.selectAll("h1").text(function(){  return "Week of "+d[weekCount].week; });

}

function update(_data){

_data.sort(function(a, b) {
        return d3.descending(a.rank, b.rank);
    });

widthScale.domain([ 0, d3.max(_data, function(d) {
        return +d.rank;
    }) ]);

heightScale.domain(_data.map(function(d) { return d.name; } ));

var rects =  svg.selectAll("rect").data(_data);

rects.enter()
    .append("rect");

rects
    .attr("x",0)
    .attr("y",function(d,i){ return heightScale(d.name);})
	.attr("height", heightScale.rangeBand())
    .attr("width",function(d,i){ return  widthScale(d.rank); })
    .append("title").text(function(d,i){   return d["name"]; });

rects.exit().remove();

svg.select(".x.axis").remove();
    svg.select(".y.axis").remove();

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

svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(0,0)")
        .call(yAxis);

}

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js