D3 Examples - Elections and Search Weeks

xxxxxxxxxx
 
<!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>
​
<img src="flag.svg">
​
<div class="ui">
    <h1>Week of 12/28/2014</h1>
    <h3><a onclick="nextWeek()">view next week</a></h3>
</div>
​
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
<script>
​
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>
​
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
<script>
</script>
​
    