Phone Connection in Service Areas - India

<!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+")")

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)

svg.selectAll(".bar")
        .transition()
        .duration(SPEED)
        .ease(easing)
        .attr("width", function (d){ return x(d["year"+CURR_YEAR]) - x(0)})

}</script>

</body>
</html>

https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js

https://d3js.org/d3.v3.min.js