Skip to content

Instantly share code, notes, and snippets.

@ruimaranhao

ruimaranhao/index.html

Last active March 25, 2016 12:45
Show Gist options
  • Save ruimaranhao/3155b6bf1f832835cb31 to your computer and use it in GitHub Desktop.
Save ruimaranhao/3155b6bf1f832835cb31 to your computer and use it in GitHub Desktop.
Download ZIP
Udacity P6
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment