ruimaranhao/index.html

## index.html
<html>
<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}
</style>

<h2>
Flight Cancellations: Likely, weather and Carriers are the ones to blame.
</h2>
<p>
Severe flight cancellations are usually because of extreme weather conditions
and/or the carriers themselves. National Airspace System Delays are also prevalent,
but in many cases these delays are also related to (non-extreme) weather conditions.
(it also incude: airport operations, heavy traffic volume, air traffic control).
</p>
<p>
For details on delay categories, refer to
<a href="http://aspmhelp.faa.gov/index.php/Types_of_Delay">FAA's Type of Delays</a>
website.
</p>
<div id="chartContainer">
  <script src="http://dimplejs.org/lib/d3.v3.4.8.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
  <script type="text/javascript">

      var svg = dimple.newSvg("#chartContainer", 900, 580);

      d3.csv("http://raw.githubusercontent.com/ruimaranhao/DataAnalystNanodegree/master/P6/data/2008cancelled.csv", function (data) {

          // Filter for 1 year
          data = dimple.filterData(data, "Month", [
              "Jan-08", "Feb-08", "Mar-08", "Apr-08", "May-08", "Jun-08",
              "Jul-08", "Aug-08", "Sep-08", "Oct-08", "Nov-08", "Dec-08"
          ]);

          // Create the indicator chart on the right of the main chart
          var indicator = new dimple.chart(svg, data);

          // Pick blue as the default and orange for the selected month
          var defaultColor = indicator.defaultColors[0];
          var indicatorColor = indicator.defaultColors[2];
          // Pick purple as the select color for month
          var selectedColor = indicator.defaultColors[9];

          // The frame duration for the animation in milliseconds
          var frame = 3000;
          var firstTick = true;

          // Place the indicator bar chart to the right
          indicator.setBounds(750, 115, 153, 311);

          // Add dates along the y axis
          var y = indicator.addCategoryAxis("y", "Month");
          y.addOrderRule("Month", "Desc");

          // Use sales for bar size and hide the axis
          var x = indicator.addMeasureAxis("x", "Percentage Cancelled");
          x.hidden = true;

          // Add the bars to the indicator and add event handlers
          var s = indicator.addSeries(null, dimple.plot.bar);
          s.addEventHandler("click", onClick);
          // Draw the side chart
          indicator.draw();

          // Remove the title from the y axis
          y.titleShape.remove();

          // Remove the lines from the y axis
          y.shapes.selectAll("line,path").remove();

          // Move the y axis text inside the plot area
          y.shapes.selectAll("text")
                  .style("text-anchor", "start")
                  .style("font-size", "11px")
                  .attr("transform", "translate(18, 0.5)");

          // This block simply adds the legend title. I put it into a d3 data
          // object to split it onto 2 lines.  This technique works with any
          // number of lines, it isn't dimple specific.
          svg.selectAll("title_text")
                  .data(["Click bar to select",
                      "and pause. Click again",
                      "to resume animation"])
                  .enter()
                  .append("text")
                  .attr("x", 750)
                  .attr("y", function (d, i) { return 85 + i * 12; })
                  .style("font-family", "sans-serif")
                  .style("font-size", "10px")
                  .style("color", "Black")
                  .text(function (d) { return d; });

          // Manually set the bar colors
          s.shapes
                  .attr("rx", 10)
                  .attr("ry", 10)
                  .style("fill", function (d) {
                    return (d.y === 'Jan-08' ?
                        indicatorColor.fill : defaultColor.fill) })
                  .style("stroke", function (d) {
                    return (d.y === 'Jan-08' ?
                        indicatorColor.stroke : defaultColor.stroke) })
                  .style("opacity", 0.4);

          // Draw the main chart
          var bubbles = new dimple.chart(svg, data);

          bubbles.setBounds(60, 50, 680, 410)
          x.showGridlines = false;

          //make x-axis log scale
          //bubbles.addLogAxis("x", "Total Flights");
          var xx = bubbles.addMeasureAxis("x", "Total Flights");
          //fix x-axis range [0,11000]
          xx.overrideMin=0
          xx.overrideMax=110000


          var yy = bubbles.addMeasureAxis("y", "Percentage Cancelled");
          //fix x-axis range [0,0.07]
          yy.overrideMin=0
          yy.overrideMax=0.07


          bubbles.addSeries(["Cancelled", "Total Flights", "Distance",
                             "UniqueCarrier", "CancellationCode"],
                                dimple.plot.bubble)
          bubbles.addLegend(60, 10, 410, 60);

          // Add a storyboard to the main chart and set the tick event
          var story = bubbles.setStoryboard("Month", onTick);
          // Change the frame duration
          story.frameDuration = frame;
          // Order the storyboard by date
          story.addOrderRule("Date");

          // Draw the bubble chart
          bubbles.draw();

          // Orphan the legends as they are consistent but by default they
          // will refresh on tick
          bubbles.legends = [];
          // Remove the storyboard label because the chart will indicate the
          // current month instead of the label
          story.storyLabel.remove();

          // On click of the side chart
          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();
              }
              onTickSelect(story.getFrameValue());
          }

          // On tick of the main charts storyboard
          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;
          }

          // On tick of the main charts storyboard -- when selected
          function onTickSelect(e) {
            s.shapes
                    .transition()
                    .duration(frame / 2)
                    .style("fill", function (d) {
                        return (d.y === e ?
                          selectedColor.fill : defaultColor.fill) })
                    .style("stroke", function (d) {
                        return (d.y === e ?
                          indicatorColor.stroke : defaultColor.stroke) });
          }
      });
  </script>
</div>
</html>
	<html>
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	}
	</style>

	<h2>
	Flight Cancellations: Likely, weather and Carriers are the ones to blame.
	</h2>
	<p>
	Severe flight cancellations are usually because of extreme weather conditions
	and/or the carriers themselves. National Airspace System Delays are also prevalent,
	but in many cases these delays are also related to (non-extreme) weather conditions.
	(it also incude: airport operations, heavy traffic volume, air traffic control).
	</p>
	<p>
	For details on delay categories, refer to
	<a href="http://aspmhelp.faa.gov/index.php/Types_of_Delay">FAA's Type of Delays</a>
	website.
	</p>
	<div id="chartContainer">
	<script src="http://dimplejs.org/lib/d3.v3.4.8.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
	<script type="text/javascript">

	var svg = dimple.newSvg("#chartContainer", 900, 580);

	d3.csv("http://raw.githubusercontent.com/ruimaranhao/DataAnalystNanodegree/master/P6/data/2008cancelled.csv", function (data) {

	// Filter for 1 year
	data = dimple.filterData(data, "Month", [
	"Jan-08", "Feb-08", "Mar-08", "Apr-08", "May-08", "Jun-08",
	"Jul-08", "Aug-08", "Sep-08", "Oct-08", "Nov-08", "Dec-08"
	]);

	// Create the indicator chart on the right of the main chart
	var indicator = new dimple.chart(svg, data);

	// Pick blue as the default and orange for the selected month
	var defaultColor = indicator.defaultColors[0];
	var indicatorColor = indicator.defaultColors[2];
	// Pick purple as the select color for month
	var selectedColor = indicator.defaultColors[9];

	// The frame duration for the animation in milliseconds
	var frame = 3000;
	var firstTick = true;

	// Place the indicator bar chart to the right
	indicator.setBounds(750, 115, 153, 311);

	// Add dates along the y axis
	var y = indicator.addCategoryAxis("y", "Month");
	y.addOrderRule("Month", "Desc");

	// Use sales for bar size and hide the axis
	var x = indicator.addMeasureAxis("x", "Percentage Cancelled");
	x.hidden = true;

	// Add the bars to the indicator and add event handlers
	var s = indicator.addSeries(null, dimple.plot.bar);
	s.addEventHandler("click", onClick);
	// Draw the side chart
	indicator.draw();

	// Remove the title from the y axis
	y.titleShape.remove();

	// Remove the lines from the y axis
	y.shapes.selectAll("line,path").remove();

	// Move the y axis text inside the plot area
	y.shapes.selectAll("text")
	.style("text-anchor", "start")
	.style("font-size", "11px")
	.attr("transform", "translate(18, 0.5)");

	// This block simply adds the legend title. I put it into a d3 data
	// object to split it onto 2 lines. This technique works with any
	// number of lines, it isn't dimple specific.
	svg.selectAll("title_text")
	.data(["Click bar to select",
	"and pause. Click again",
	"to resume animation"])
	.enter()
	.append("text")
	.attr("x", 750)
	.attr("y", function (d, i) { return 85 + i * 12; })
	.style("font-family", "sans-serif")
	.style("font-size", "10px")
	.style("color", "Black")
	.text(function (d) { return d; });

	// Manually set the bar colors
	s.shapes
	.attr("rx", 10)
	.attr("ry", 10)
	.style("fill", function (d) {
	return (d.y === 'Jan-08' ?
	indicatorColor.fill : defaultColor.fill) })
	.style("stroke", function (d) {
	return (d.y === 'Jan-08' ?
	indicatorColor.stroke : defaultColor.stroke) })
	.style("opacity", 0.4);

	// Draw the main chart
	var bubbles = new dimple.chart(svg, data);

	bubbles.setBounds(60, 50, 680, 410)
	x.showGridlines = false;

	//make x-axis log scale
	//bubbles.addLogAxis("x", "Total Flights");
	var xx = bubbles.addMeasureAxis("x", "Total Flights");
	//fix x-axis range [0,11000]
	xx.overrideMin=0
	xx.overrideMax=110000


	var yy = bubbles.addMeasureAxis("y", "Percentage Cancelled");
	//fix x-axis range [0,0.07]
	yy.overrideMin=0
	yy.overrideMax=0.07


	bubbles.addSeries(["Cancelled", "Total Flights", "Distance",
	"UniqueCarrier", "CancellationCode"],
	dimple.plot.bubble)
	bubbles.addLegend(60, 10, 410, 60);

	// Add a storyboard to the main chart and set the tick event
	var story = bubbles.setStoryboard("Month", onTick);
	// Change the frame duration
	story.frameDuration = frame;
	// Order the storyboard by date
	story.addOrderRule("Date");

	// Draw the bubble chart
	bubbles.draw();

	// Orphan the legends as they are consistent but by default they
	// will refresh on tick
	bubbles.legends = [];
	// Remove the storyboard label because the chart will indicate the
	// current month instead of the label
	story.storyLabel.remove();

	// On click of the side chart
	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();
	}
	onTickSelect(story.getFrameValue());
	}

	// On tick of the main charts storyboard
	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;
	}

	// On tick of the main charts storyboard -- when selected
	function onTickSelect(e) {
	s.shapes
	.transition()
	.duration(frame / 2)
	.style("fill", function (d) {
	return (d.y === e ?
	selectedColor.fill : defaultColor.fill) })
	.style("stroke", function (d) {
	return (d.y === e ?
	indicatorColor.stroke : defaultColor.stroke) });
	}
	});
	</script>
	</div>
	</html>