D3 Examples - Phone Connection in Service Areas

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Service Area</title>
    <meta charset="UTF-8">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href="textmove.css" rel = 'stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    
</head>
<body>
    <script src="https://d3js.org/d3.v3.min.js" charset="UTF-8"></script>
    <script>
    /**
  
  
 * Created by Adiamaan on 7/6/2016.
 */
​
var margin ={top:100,bottom:20,left:130,right:20};
​
var width = 900 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
​
var DATA_FILE_LOC ="service_area.csv";
      
      
​
​
​
var x = d3.scale.linear().range([margin.left,width]).domain([0,260])
​
var y = d3.scale.ordinal().rangeRoundBands([height,margin.bottom])
​
var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(8)
​
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
​
​
​
var svg = d3.select("body").append('svg')
            .attr("width",width+margin.left+margin.right)
            .attr("height",height+margin.top+margin.bottom);
​
var CURR_YEAR = 2002;
​
var SPEED = 2000;
​
svg.append('text').attr("x",width/2+margin.left)
    .attr("y",50)
    .attr("dy",".75em")
    .attr("text-anchor","middle")
    .text(CURR_YEAR)
    .attr("id","texttitle");
​
svg.append("g").attr("id","bars").attr("transform","translate("+ margin.left+","+150+")")
​
d3.csv(DATA_FILE_LOC,function (error,data)
{
    if (error) throw error;
​
    y.domain(data.map(function (d){ return d.Service_Area;}))
​
    svg.append("g")
        .attr("class","x axis")
        .call(xAxis)
        .attr("transform","translate("+0+","+margin.top+")")
​
    var year = 2002,
        height = 10;
​
    svg.append("g")
        .attr("class","y axis")
        .call(yAxis)
        .attr("transform","translate("+margin.left+","+margin.top+")")
​
var ydata = "year".concat(CURR_YEAR);
console.log(ydata);
   svg.append("g")
        .selectAll(".bar")
        .data(data)
        .enter().append("rect")
         .attr("class","bar")
         .attr("x",margin.left+4)
         .attr("y",function (d){ return margin.top+y(d.Service_Area)+2})
        .attr("height",y.rangeBand()-2)
        .attr("width",function (d){ return x(d["year"+CURR_YEAR])-x(0)})
        .attr("fill",function (d){ return d.color;})
        
​
    console.log(data)
​
    // var real_data = d3.nest()
    //     .key(function(d){return d.Service_Area})
    //     .entries(data);
    //
    // for (var key in real_data)
    // {
    //     console.log(key,real_data[key]);
    // }
​
});
​
​
function timer(){
    CURR_YEAR += 1;
    update();
​
    if(CURR_YEAR == 2015) {
        CURR_YEAR = 2001;
        setTimeout(timer, SPEED * 10);
    }
    else if(CURR_YEAR == 2002)
    {
        setTimeout(timer, SPEED * 1.8);
    }
    else{
        setTimeout(timer,SPEED);
    }
}
​
setTimeout(timer,SPEED)
​
function update(){
    if (CURR_YEAR == 2002){
        SPEED = 1500;
        svg.select("#texttitle").transition().duration(SPEED)
            .tween("text",function (){
                var i = d3.interpolate(this.textContent, CURR_YEAR);
                return function(t) {
                    this.textContent = Math.round(i(t));
                };
            });
        var easing = "bounce";
    } else {
        SPEED = 200;
        svg.select("#texttitle").text(CURR_YEAR);
        var easing = "linear";
    }
​
    svg.selectAll(".bar")
        .transition()
        .duration(SPEED)
        .ease(easing)
        .attr("width", function (d){ return x(d["year"+CURR_YEAR]) - x(0)})
​
}</script>
​
</body>
</html>
    