adiamaan92/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>

## service_area.csv

          
            Service_Area
            year2002
            year2003
            year2004
            year2005
            year2006
            year2007
            year2008
            year2009
            year2010
            year2011
            year2012
            year2013
            year2014
            year2015
            color

            
              ANDHRA PRADESH
              4.93
              5.66
              7.85
              9.48
              13.45
              19.62
              28.25
              39.59
              57.23
              74.35
              80.87
              77.19
              79.52
              83.89
               #6b8ef7

            
              ASSAM 
              1.67
              1.94
              2.13
              2.79
              5.67
              9.74
              14.74
              20.65
              29.99
              38.98
              46.61
              46.51
              48.74
              52.66
               #7b99f8

            
              BIHAR
              1.16
              1.41
              1.75
              2.34
              4.77
              6.37
              10.43
              17.78
              30.07
              42.32
              48.9
              45.72
              46.1
              50.23
               #abbffb

            
              GUJARAT
              6.37
              7.77
              10.14
              12.73
              16.98
              24.14
              33.63
              45.16
              58.46
              81.9
              91.14
              87.23
              90.54
              94.89
               #05b1b5

            
              HARYANA 
              5.06
              6.21
              8.38
              10.83
              14.47
              23.11
              30.39
              43.75
              59.7
              82.59
              89.42
              76.44
              81.44
              81.94
               #037173

            
              HIMACHAL PRADESH 
              7.48
              8.5
              10.14
              13.12
              18.78
              28.57
              41.16
              55.5
              79.35
              111.11
              120.67
              105.39
              105.59
              112.76
               #07d3d5

            
              JAMMU & KASHMIR 
              2.15
              2.48
              3.01
              5.09
              12.18
              16.08
              21.84
              32.76
              49.91
              50.9
              54.82
              58.57
              66.8
              75.61
               #048183

            
              KARNATAKA
              5.58
              6.67
              9.46
              12.19
              17.06
              25.05
              34.53
              45.21
              67.81
              87.76
              97.22
              91.24
              92.45
              96.92
               #e175e6

            
              KERALA 
              9.51
              11.33
              14.87
              18.77
              25.54
              33.54
              45.34
              58.48
              80.36
              100.01
              106.61
              96.09
              96.19
              95.22
               #2a5cf4

            
              MADHYA PRADESH
              2.17
              2.63
              3.4
              4.34
              5.84
              9.95
              16.26
              23.79
              35.28
              48.88
              53.81
              53.55
              56.04
              59.81
               #9f1ea4

            
              MAHARASHTRA
              5.14
              6.08
              8
              10.01
              13.1
              18.78
              27.42
              37.9
              50.3
              68.97
              77.19
              73.97
              77.32
              80.09
               #d43039

            
              NORTH-EAST
              2.41
              2.7
              3.05
              4.02
              6.78
              12.44
              19.32
              28.59
              43.22
              56.5
              65.72
              67.78
              69.97
              76.55
               #38c30b

            
              ORISSA 
              1.88
              2.29
              2.95
              3.96
              7.57
              9.51
              15
              23.3
              39.3
              56.37
              65.84
              60.21
              60.9
              65.7
               #38c40a

            
              PUNJAB 
              9.15
              11.76
              17.33
              21.94
              27.61
              37.05
              47.89
              58.25
              75.44
              104.09
              113.13
              103
              107.23
              104.72
               #751679

            
              RAJASTHAN 
              3.02
              3.47
              4.5
              6.12
              9.65
              15.49
              23.74
              37.15
              52.76
              65.35
              72.96
              70.85
              75.39
              77.08
               #e1b301

            
              TAMIL NADU
              6.84
              7.95
              11.68
              15.08
              19.59
              28.8
              43.39
              59.92
              83.73
              106.12
              116.61
              108.17
              111.14
              117.54
               #bf9801

            
              UTTAR PRADESH 
              1.94
              2.25
              3.06
              4.14
              6.89
              10.71
              15.93
              24.28
              37.37
              52.97
              60.93
              56.83
              57.27
              59.92
               #eaa0ee

            
              WEST BENGAL
              1.56
              1.89
              2.23
              3.05
              5.59
              8.68
              14.39
              22.5
              34.78
              53.43
              61.52
              54.18
              55.13
              59.78
               #dd5a62

            
              KOLKATA
              11.77
              13.47
              18.92
              23.79
              33.7
              45.09
              64.22
              89.68
              120.19
              163.76
              172.22
              145.86
              142.67
              148.95
               #eca0a5

            
              DELHI 
              22.11
              27.38
              41.79
              50.94
              65.4
              86.89
              110.05
              140.18
              172.49
              225.26
              238.6
              221.64
              226.85
              236.8
               #fedc5b

            
              MUMBAI 
              20.27
              24.22
              36.08
              44.27
              56.73
              64.99
              83.48
              110.52
              143.71
              180.45
              183.52
              152.44
              151.9
              147.22
               #cf6001

## textmove.css
text#texttitle{
font-family: 'Roboto';
font-size: 36px;
}

.axis {
    font-family: 'Roboto';
    font-size:10px;
}

.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.x.axis path {
    display: none;
}

.y.axis path {
    display: none;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>
Service_Area	year2002	year2003	year2004	year2005	year2006	year2007	year2008	year2009	year2010	year2011	year2012	year2013	year2014	year2015	color
ANDHRA PRADESH	4.93	5.66	7.85	9.48	13.45	19.62	28.25	39.59	57.23	74.35	80.87	77.19	79.52	83.89	#6b8ef7
ASSAM	1.67	1.94	2.13	2.79	5.67	9.74	14.74	20.65	29.99	38.98	46.61	46.51	48.74	52.66	#7b99f8
BIHAR	1.16	1.41	1.75	2.34	4.77	6.37	10.43	17.78	30.07	42.32	48.9	45.72	46.1	50.23	#abbffb
GUJARAT	6.37	7.77	10.14	12.73	16.98	24.14	33.63	45.16	58.46	81.9	91.14	87.23	90.54	94.89	#05b1b5
HARYANA	5.06	6.21	8.38	10.83	14.47	23.11	30.39	43.75	59.7	82.59	89.42	76.44	81.44	81.94	#037173
HIMACHAL PRADESH	7.48	8.5	10.14	13.12	18.78	28.57	41.16	55.5	79.35	111.11	120.67	105.39	105.59	112.76	#07d3d5
JAMMU & KASHMIR	2.15	2.48	3.01	5.09	12.18	16.08	21.84	32.76	49.91	50.9	54.82	58.57	66.8	75.61	#048183
KARNATAKA	5.58	6.67	9.46	12.19	17.06	25.05	34.53	45.21	67.81	87.76	97.22	91.24	92.45	96.92	#e175e6
KERALA	9.51	11.33	14.87	18.77	25.54	33.54	45.34	58.48	80.36	100.01	106.61	96.09	96.19	95.22	#2a5cf4
MADHYA PRADESH	2.17	2.63	3.4	4.34	5.84	9.95	16.26	23.79	35.28	48.88	53.81	53.55	56.04	59.81	#9f1ea4
MAHARASHTRA	5.14	6.08	8	10.01	13.1	18.78	27.42	37.9	50.3	68.97	77.19	73.97	77.32	80.09	#d43039
NORTH-EAST	2.41	2.7	3.05	4.02	6.78	12.44	19.32	28.59	43.22	56.5	65.72	67.78	69.97	76.55	#38c30b
ORISSA	1.88	2.29	2.95	3.96	7.57	9.51	15	23.3	39.3	56.37	65.84	60.21	60.9	65.7	#38c40a
PUNJAB	9.15	11.76	17.33	21.94	27.61	37.05	47.89	58.25	75.44	104.09	113.13	103	107.23	104.72	#751679
RAJASTHAN	3.02	3.47	4.5	6.12	9.65	15.49	23.74	37.15	52.76	65.35	72.96	70.85	75.39	77.08	#e1b301
TAMIL NADU	6.84	7.95	11.68	15.08	19.59	28.8	43.39	59.92	83.73	106.12	116.61	108.17	111.14	117.54	#bf9801
UTTAR PRADESH	1.94	2.25	3.06	4.14	6.89	10.71	15.93	24.28	37.37	52.97	60.93	56.83	57.27	59.92	#eaa0ee
WEST BENGAL	1.56	1.89	2.23	3.05	5.59	8.68	14.39	22.5	34.78	53.43	61.52	54.18	55.13	59.78	#dd5a62
KOLKATA	11.77	13.47	18.92	23.79	33.7	45.09	64.22	89.68	120.19	163.76	172.22	145.86	142.67	148.95	#eca0a5
DELHI	22.11	27.38	41.79	50.94	65.4	86.89	110.05	140.18	172.49	225.26	238.6	221.64	226.85	236.8	#fedc5b
MUMBAI	20.27	24.22	36.08	44.27	56.73	64.99	83.48	110.52	143.71	180.45	183.52	152.44	151.9	147.22	#cf6001
	text#texttitle{
	font-family: 'Roboto';
	font-size: 36px;
	}

	.axis {
	font-family: 'Roboto';
	font-size:10px;
	}

	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.y.axis path {
	display: none;
	}