anirudhr95/index_1.html

## index_1.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>

 <style>
 svg
{
  display : block;
  /*margin : 0 auto;*/
}

/*Add colours to June-July months - Summer vacaction*/

.dimple-fri-jun-01-1900-00-00-00-gmt-0530--india-standard-time-
{
  fill : rgb(244, 66, 131) !important;
	r : 7;
}
.dimple-sun-jul-01-1900-00-00-00-gmt-0530--india-standard-time-
{
  fill : rgb(244, 66, 131) !important;
	r : 7;
}
/*Add colour to christmas and new-year*/
.dimple-sat-dec-01-1900-00-00-00-gmt-0530--india-standard-time-
{
  fill : rgb(95, 244, 66) !important;
	r : 8;
}
.dimple-mon-jan-01-1900-00-00-00-gmt-0530--india-standard-time-
{
  fill : rgb(95, 244, 66) !important;
  r : 8;
}
text.dimple-axis.dimple-title
{
  font-size: 18px !important;
}
h1
{
  text-align : center;
}

</style>

<!-- Importing D3 and dimple -->
<script src='http://d3js.org/d3.v3.min.js'></script>
<script src='http://dimplejs.org/dist/dimple.v2.2.0.min.js'></script>

 <!-- Importing bootstrap -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous'>

<script type = 'text/javascript'>
function plotDataAndAnimate(data) {
  'use strict';

  /*
  Code walkthrough :
  Step 1 : Filter the data by years neccessary

  Step 2 : Create an Indicator box to show which year is being show in the data! --> Use barplot vs time and hide x-axis to show only y-axis years!

  Step 3: Add listeners to indicator box plots - to resume/pause

  Step 4: Add legend.

  Step 5: Main plot of delays by years.
  */


  //Step 1 : Filter the data by years neccessary---------------------------------------------------
  data = dimple.filterData(data, 'year', [
    '2004', '2005', '2006', '2007', '2008',
    '2009', '2010', '2011', '2012' , '2013' ,  '2014', '2015']);   //Use data only from the years

  //end of step 1 -----------------------------------------------------


  //Step 3: Add listeners to indicator box plots - to resume/pause ------------------------------------------------------------
  function onClick(e) {
  // Pause the animation
  story.pauseAnimation();
  // If it is already selected resume the animation
  // otherwise pause and move to the selected month
  if (e.yValue === story.getFrameValue()) {
  	story.startAnimation();
  } else {
    story.goToFrame(e.yValue);
    story.pauseAnimation();
  }
  }

function onTick(e) {
  if (!firstTick) {
// Color all shapes the same
     s.shapes
    .transition()
    .duration(frame / 2)
    .style('fill', function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
    .style('stroke', function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
    }
  firstTick = false;
  }
    //end of step 3 ---------------------------------------------------------------------------------------------------------------

  var margin = 75;
  var width = 1820 - margin;
  var height = 900 - margin;

  var frame = 1000;
  var firstTick = true;

  var svg = dimple.newSvg('body' , 1200 , 800);

    //Step 2 : Create an Indicator box to show which year is being show in the data! --> Use barplot vs time and hide x-axis to show only y-axis years
  var indicator = new dimple.chart(svg, data);    //Indicator is the container for the years boxes!

  var defaultColor =  indicator.defaultColors[0];
  var indicatorColor = indicator.defaultColors[2];
  indicator.setBounds(780, 320, 140, 220);


  var indicator_y = indicator.addCategoryAxis('y', 'year');
  indicator_y.addOrderRule('year', 'Desc');
  var indicator_x = indicator.addMeasureAxis('x', 'delay_weather');
  indicator_x.hidden = true;     //Hidden x-axis , since I only need 'years' boxes.

  var s = indicator.addSeries(null, dimple.plot.bar);
  s.addEventHandler('click', onClick); //Add listener ^
  indicator.draw();
  indicator_y.titleShape.remove();

  indicator_y.shapes.selectAll('text')           //Formatting for text inside the boxes
    .style('text-anchor', 'start')
    .style('font-size', '12px')
    .attr('transform', 'translate(18, 0.5)');

  indicator_y.shapes.selectAll('line,path').remove();

  svg.selectAll('title_text')                    //Add text instructions
    .data(['Click bar to select',
           'and pause. Click again',
           'to resume animation'])
    .enter()
    .append('text')
    .attr('x', 780)
    .attr('y', function (d, i) { return 270 + i * 12; }) //15 + i * 12
    .style('font-family', 'sans-serif')
    .style('font-size', '11px')
    .style('color', 'Black')
    .style('line-height' , '30px')
    .text(function (d) { return d; });

    //end of step 3 -----------------------------------------------------------------------------------------------------------------

    //Step 4: Add legend ------------------------------------------------------------------------------------------------------------
  var christmas_circles = [20,30];

  var circles = svg.selectAll('legend_circles_christmas')  //Using data,enter for adding legend
    .data(christmas_circles)
    .enter()
    .append('circle');

  var circle_draw = circles                               //Adding circles in the legend to svg
    .attr('cx' , function(d) {return 1370;})
    .attr('cy' , function(d) { return (620 + (3.2*d)) ;})
    .attr('r' , function(d) {
    var return_radius;
    if(d === 20) {return_radius = 8;}
    else if(d === 30) {return_radius = 7;}
    return return_radius;
    })
   .style('fill' , function(d){
    if(d === 20) { return 'rgb(95, 244, 66)';}
    else if(d ===30 ) { return 'rgb(244, 66, 131)';}
    })
  .attr('stroke' , '#6b94b0')
  .attr('stroke-width' , 1)
  .attr('opacity' , 0.8);

  var rectangle = svg.append('rect')                //Adding a box around legend
    .attr('x', 1350)
    .attr('y', 650)
    .attr('width', 280)
    .attr('height', 90)
    .attr('fill-opacity' , 0.0)
    .attr('stroke' , '#0e0e0f')
    .attr('stroke-width' , 0.4);

  svg.selectAll('title_text_legend')        //Adding the title 'legend'
    .data(['Legend'])
    .enter()
    .append('text')
    .attr('x', 1450)
    .attr('y', 640) //15 + i * 12
    .style('font-family', 'sans-serif')
    .style('font-size', '14px')
    .style('color', 'Black')
    .text(function (d) { return d; });

  svg.selectAll('title_text_legend_christmas')  //Adding text inside legend
    .data([' - Christmas and New Year vacations'])
    .enter()
    .append('text')
    .attr('x', 1385)
    .attr('y', 687) //15 + i * 12
    .style('font-family', 'sans-serif')
    .style('font-size', '14px')
    .style('color', 'Black')
    .text(function (d)  { return d; });

  svg.selectAll('title_text_legend_christmas') //Adding text inside legend #2
    .data([' - Summer Vacations'])
    .enter()
    .append('text')
    .attr('x', 1385)
    .attr('y', 720) //15 + i * 12
    .style('font-family', 'sans-serif')
    .style('font-size', '14px')
    .style('color', 'Black')
    .text(function (d) { return d; });

  s.shapes                              //Setting Default color and color on highlight!
    .attr('rx', 10)
    .attr('ry', 10)
    .style('fill', function (d) { return (d.y === '2003' ? indicatorColor.fill : defaultColor.fill) })
    .style('stroke', function (d) { return (d.y === '2003' ? indicatorColor.stroke : defaultColor.stroke) })
    .style('opacity', 0.4);

    //end of step 4 ----------------------------------------------------------------------------------------------------------------

    //Step 5 : main plot------------------------------------------------------------------------------------------------------------

  var myChart = new dimple.chart(svg, data);      //The main plot
  myChart.setBounds(70,50,700,500);
  var y = myChart.addMeasureAxis('y', 'delay_carrier');
  var x  = myChart.addTimeAxis('x', 'month','%m' , '%b');
  x.title =  'Months';
  y.title = 'Delay in Minutes(Millions)';
  y.tickFormat = ",.0f";
  var series = myChart.addSeries(null, dimple.plot.line);
  myChart.addSeries(null , dimple.plot.scatter);


  var story = myChart.setStoryboard('year' , onTick);
  story.addOrderRule('year');
  story.frameDuration = 3000; 		//Frame transition,  increase delay


  myChart.draw();

  myChart.axes[0].shapes.attr('transform', 'translate(60,0)');

  story.storyLabel.remove(); //Remove label that appears on iterating through the data , since I have a seperate indicater box
                             //end.

  }

 </script>


<body>
<div class = 'container-fluid'>
<div class='page-header' id = 'page-header'>
  <h1 id = 'big-text'>Delay in Airports<small> Through months of the year</small></h1>
</div>
<script type='text/javascript'>
  d3.csv('/data/airline_monthly_delay.csv' , plotDataAndAnimate );
</script>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>

	<style>
	svg
	{
	display : block;
	/margin : 0 auto;/
	}

	/Add colours to June-July months - Summer vacaction/

	.dimple-fri-jun-01-1900-00-00-00-gmt-0530--india-standard-time-
	{
	fill : rgb(244, 66, 131) !important;
	r : 7;
	}
	.dimple-sun-jul-01-1900-00-00-00-gmt-0530--india-standard-time-
	{
	fill : rgb(244, 66, 131) !important;
	r : 7;
	}
	/Add colour to christmas and new-year/
	.dimple-sat-dec-01-1900-00-00-00-gmt-0530--india-standard-time-
	{
	fill : rgb(95, 244, 66) !important;
	r : 8;
	}
	.dimple-mon-jan-01-1900-00-00-00-gmt-0530--india-standard-time-
	{
	fill : rgb(95, 244, 66) !important;
	r : 8;
	}
	text.dimple-axis.dimple-title
	{
	font-size: 18px !important;
	}
	h1
	{
	text-align : center;
	}

	</style>

	<!-- Importing D3 and dimple -->
	<script src='http://d3js.org/d3.v3.min.js'></script>
	<script src='http://dimplejs.org/dist/dimple.v2.2.0.min.js'></script>

	<!-- Importing bootstrap -->
	<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous'>

	<script type = 'text/javascript'>
	function plotDataAndAnimate(data) {
	'use strict';

	/*
	Code walkthrough :
	Step 1 : Filter the data by years neccessary

	Step 2 : Create an Indicator box to show which year is being show in the data! --> Use barplot vs time and hide x-axis to show only y-axis years!

	Step 3: Add listeners to indicator box plots - to resume/pause

	Step 4: Add legend.

	Step 5: Main plot of delays by years.
	*/


	//Step 1 : Filter the data by years neccessary---------------------------------------------------
	data = dimple.filterData(data, 'year', [
	'2004', '2005', '2006', '2007', '2008',
	'2009', '2010', '2011', '2012' , '2013' , '2014', '2015']); //Use data only from the years

	//end of step 1 -----------------------------------------------------


	//Step 3: Add listeners to indicator box plots - to resume/pause ------------------------------------------------------------
	function onClick(e) {
	// Pause the animation
	story.pauseAnimation();
	// If it is already selected resume the animation
	// otherwise pause and move to the selected month
	if (e.yValue === story.getFrameValue()) {
	story.startAnimation();
	} else {
	story.goToFrame(e.yValue);
	story.pauseAnimation();
	}
	}

	function onTick(e) {
	if (!firstTick) {
	// Color all shapes the same
	s.shapes
	.transition()
	.duration(frame / 2)
	.style('fill', function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
	.style('stroke', function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
	}
	firstTick = false;
	}
	//end of step 3 ---------------------------------------------------------------------------------------------------------------

	var margin = 75;
	var width = 1820 - margin;
	var height = 900 - margin;

	var frame = 1000;
	var firstTick = true;

	var svg = dimple.newSvg('body' , 1200 , 800);

	//Step 2 : Create an Indicator box to show which year is being show in the data! --> Use barplot vs time and hide x-axis to show only y-axis years
	var indicator = new dimple.chart(svg, data); //Indicator is the container for the years boxes!

	var defaultColor = indicator.defaultColors[0];
	var indicatorColor = indicator.defaultColors[2];
	indicator.setBounds(780, 320, 140, 220);


	var indicator_y = indicator.addCategoryAxis('y', 'year');
	indicator_y.addOrderRule('year', 'Desc');
	var indicator_x = indicator.addMeasureAxis('x', 'delay_weather');
	indicator_x.hidden = true; //Hidden x-axis , since I only need 'years' boxes.

	var s = indicator.addSeries(null, dimple.plot.bar);
	s.addEventHandler('click', onClick); //Add listener ^
	indicator.draw();
	indicator_y.titleShape.remove();

	indicator_y.shapes.selectAll('text') //Formatting for text inside the boxes
	.style('text-anchor', 'start')
	.style('font-size', '12px')
	.attr('transform', 'translate(18, 0.5)');

	indicator_y.shapes.selectAll('line,path').remove();

	svg.selectAll('title_text') //Add text instructions
	.data(['Click bar to select',
	'and pause. Click again',
	'to resume animation'])
	.enter()
	.append('text')
	.attr('x', 780)
	.attr('y', function (d, i) { return 270 + i * 12; }) //15 + i * 12
	.style('font-family', 'sans-serif')
	.style('font-size', '11px')
	.style('color', 'Black')
	.style('line-height' , '30px')
	.text(function (d) { return d; });

	//end of step 3 -----------------------------------------------------------------------------------------------------------------

	//Step 4: Add legend ------------------------------------------------------------------------------------------------------------
	var christmas_circles = [20,30];

	var circles = svg.selectAll('legend_circles_christmas') //Using data,enter for adding legend
	.data(christmas_circles)
	.enter()
	.append('circle');

	var circle_draw = circles //Adding circles in the legend to svg
	.attr('cx' , function(d) {return 1370;})
	.attr('cy' , function(d) { return (620 + (3.2*d)) ;})
	.attr('r' , function(d) {
	var return_radius;
	if(d === 20) {return_radius = 8;}
	else if(d === 30) {return_radius = 7;}
	return return_radius;
	})
	.style('fill' , function(d){
	if(d === 20) { return 'rgb(95, 244, 66)';}
	else if(d ===30 ) { return 'rgb(244, 66, 131)';}
	})
	.attr('stroke' , '#6b94b0')
	.attr('stroke-width' , 1)
	.attr('opacity' , 0.8);

	var rectangle = svg.append('rect') //Adding a box around legend
	.attr('x', 1350)
	.attr('y', 650)
	.attr('width', 280)
	.attr('height', 90)
	.attr('fill-opacity' , 0.0)
	.attr('stroke' , '#0e0e0f')
	.attr('stroke-width' , 0.4);

	svg.selectAll('title_text_legend') //Adding the title 'legend'
	.data(['Legend'])
	.enter()
	.append('text')
	.attr('x', 1450)
	.attr('y', 640) //15 + i * 12
	.style('font-family', 'sans-serif')
	.style('font-size', '14px')
	.style('color', 'Black')
	.text(function (d) { return d; });

	svg.selectAll('title_text_legend_christmas') //Adding text inside legend
	.data([' - Christmas and New Year vacations'])
	.enter()
	.append('text')
	.attr('x', 1385)
	.attr('y', 687) //15 + i * 12
	.style('font-family', 'sans-serif')
	.style('font-size', '14px')
	.style('color', 'Black')
	.text(function (d) { return d; });

	svg.selectAll('title_text_legend_christmas') //Adding text inside legend #2
	.data([' - Summer Vacations'])
	.enter()
	.append('text')
	.attr('x', 1385)
	.attr('y', 720) //15 + i * 12
	.style('font-family', 'sans-serif')
	.style('font-size', '14px')
	.style('color', 'Black')
	.text(function (d) { return d; });

	s.shapes //Setting Default color and color on highlight!
	.attr('rx', 10)
	.attr('ry', 10)
	.style('fill', function (d) { return (d.y === '2003' ? indicatorColor.fill : defaultColor.fill) })
	.style('stroke', function (d) { return (d.y === '2003' ? indicatorColor.stroke : defaultColor.stroke) })
	.style('opacity', 0.4);

	//end of step 4 ----------------------------------------------------------------------------------------------------------------

	//Step 5 : main plot------------------------------------------------------------------------------------------------------------

	var myChart = new dimple.chart(svg, data); //The main plot
	myChart.setBounds(70,50,700,500);
	var y = myChart.addMeasureAxis('y', 'delay_carrier');
	var x = myChart.addTimeAxis('x', 'month','%m' , '%b');
	x.title = 'Months';
	y.title = 'Delay in Minutes(Millions)';
	y.tickFormat = ",.0f";
	var series = myChart.addSeries(null, dimple.plot.line);
	myChart.addSeries(null , dimple.plot.scatter);


	var story = myChart.setStoryboard('year' , onTick);
	story.addOrderRule('year');
	story.frameDuration = 3000; //Frame transition, increase delay



	myChart.draw();

	myChart.axes[0].shapes.attr('transform', 'translate(60,0)');

	story.storyLabel.remove(); //Remove label that appears on iterating through the data , since I have a seperate indicater box
	//end.

	}

	</script>


	<body>
	<div class = 'container-fluid'>
	<div class='page-header' id = 'page-header'>
	<h1 id = 'big-text'>Delay in Airports<small> Through months of the year</small></h1>
	</div>
	<script type='text/javascript'>
	d3.csv('/data/airline_monthly_delay.csv' , plotDataAndAnimate );
	</script>
	</div>
	</body>
	</html>