Skip to content

Instantly share code, notes, and snippets.

@anirudhr95

anirudhr95/index_1.html

Created January 2, 2017 16:43
Show Gist options
  • Save anirudhr95/9328ea67ef95e4b1966a4e92e60fe3d6 to your computer and use it in GitHub Desktop.
Save anirudhr95/9328ea67ef95e4b1966a4e92e60fe3d6 to your computer and use it in GitHub Desktop.
Download ZIP
Storyboard visualisation
Raw
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,
width = 1820 - margin,
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)";
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();
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment