Skip to content

Instantly share code, notes, and snippets.

@JenHLab

JenHLab/index.html

Created February 29, 2016 17:49
Show Gist options
  • Save JenHLab/d5c6c91ea5a1b0dd5fb3 to your computer and use it in GitHub Desktop.
Save JenHLab/d5c6c91ea5a1b0dd5fb3 to your computer and use it in GitHub Desktop.
Download ZIP
Transition Plot
Raw
index.html
<!DOCTYPE html>
<!-- Modification of an example by Scott Murray from Knight D3 course -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Magic Kingdom is the most visited park in Orlando</title>
<!--Foundation cdn link -->
<!-- this is the cdn link to bootstrap's css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700italic|Arapey|PT+Serif' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background-color: white;
font-family: 'PT Serif', serif;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 1);
padding: 1.5rem;
margin-top: 3.5rem;
margin-bottom: 3.5rem;
}
h1 {
font-family: 'Droid Serif', serif;
font-size: 30px;
margin: 20px;
}
h3{
margin: 10px;
font-size: 18px;
margin: 20px;
width: inherit;
}
p {
font-size: 16px;
margin: 10px;
text-align: left;
margin: 20px;
}
.selected {
background-color: #b3d0f2;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: #0365d4;
stroke-width: 1px;
}
.line {
fill: none;
stroke: #0365d4;
stroke-width: 1px;
stroke-opacity: 80%;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
line-height: 1em;
}
.map_note {
padding-top: 120px;
padding-left: 30px;
}
.tooltip {
position: absolute;
z-index: 10;
}
.tooltip p {
background-color: white;
border: none;
padding: 2px;
}
/* this is an adjustment to bootstrap's row for my page */
.row {
padding-top: 50px;
}
/* this is an adjustment to bootstrap for my page */
.btn-group {
padding-top: 20px;
}
</style>
</head>
<body>
<h1>Magic Kingdom is the most visited park in Orlando, FL</h1>
<h3>by <span><i>Jennifer Hernandez</i></span></h3>
<p>Magic Kingdom at Walt Disney World Resort continues to be the most visited theme park in Orlando, Florida. The park opened on October 1, 1971 with twenty-three attractions, three unique to the park and twenty replicas of attractions at Disneyland.
<br><br>
The park is divided into six themed lands- Main Street, U.S.A., Adventureland, Frontierland, Fantasyland, and Tomorrowland and Liberty Square. Popular attractions include Cinderella's Castle, Big Thunder Mountain, Space Mountain, The Haunted Mansion and Splash Mountain.
<br><br>
In 2014, over 19.33 million people visited Magic Kingdom, making it the most visited theme park in the world for the sixth consecutive year. </p>
<div class="container">
<div class="row">
<div class="col-md-5">
<h1 style="font-size: 20px;color:#0365d4;">Theme Park Attendance in Orlando, FL</h1>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="Animal">Disney's Animal Kingdom</button>
<button type="button" class="btn btn-default" id="Epcot ">Epcot</button>
<button type="button" class="btn btn-default" id="Hollywood">Disney's Hollywood Studios</button>
<button type="button" class="btn btn-default" id="Magic">Magic Kingdom</button>
<button type="button" class="btn btn-default" id="Universal ">Universal Studios Florida</button>
<button type="button" class="btn btn-default" id="Islands">Islands of Adventure</button>
</div>
<div id="svg"></div>
<p style="font-size: 13px;"><b>Sources:</b>
<br>
<i><a href="https://cdn.thewaltdisneycompany.com/sites/default/files/reports/q4-fy15-earnings.pdf">The Walt Disney Company Reports: Fourth Quater and Full Year Earnings for Fiscal 2015</a></i>. The Walt Disney Company. 2015.
<br>
<br>
<i><a href="http://www.teaconnect.org/images/files/TEA_103_49736_150603.pdf">TEA/AECOM 2014 Theme Index and Museum Index: The Global Attendance Report</a></i>. Themed Entertainment Association (TEA). 2015.
</p>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading" style="background-color: white;">
<h3 style="font-size: 20px;color:#0365d4;">Top 10 Most Visited Parks in 2014</h3>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr style="font-size: 15px;">
<th width="350">Theme Park</th>
<th width="150">Visitors (Million)</th>
</tr>
</thead>
<tbody style="font-size: 13px;">
<tr style="background:#b3d0f2;">
<td>Magic Kingdom at Walt Disney World Resort</td>
<td>19,332,000</td>
</tr>
<tr>
<td>Tokyo Disneyland at Tokyo Disney Resort</td>
<td>17,300,000</td>
</tr>
<tr>
<td>Disneyland at Disneyland Resort</td>
<td>16,769,000</td>
</tr>
<tr>
<td>Tokyo DisneySea at Tokyo Disney Resort</td>
<td>14,100,000</td>
</tr>
<tr>
<td>Universal Studios Japan</td>
<td>11,800,000</td>
</tr>
<tr style="background:#b3d0f2;">
<td>Epcot at Walt Disney World Resort</td>
<td>11,454,000</td>
</tr>
<tr style="background:#b3d0f2;">
<td>Disney's Animal Kingdom at Walt Disney World Resort</td>
<td>10,402,000</td>
</tr>
<tr style="background:#b3d0f2;">
<td>Disney's Hollywood Studios at Walt Disney World Resort</td>
<td>10,312,000</td>
</tr>
<tr>
<td>Disneyland Park at Disneyland Paris</td>
<td>9,940,000</td>
</tr>
<tr>
<td>Disney California Adventure at Disneyland Resort</td>
<td>8,769,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript">
//Dimensions and padding
var fullwidth = 550;
var fullheight = 450;
var margin = {top: 20, right: 40, bottom: 40, left: 57};
var width = fullwidth - margin.left - margin.right;
var height = fullheight - margin.top - margin.bottom;
//Set up date formatting and years
var dateFormat = d3.time.format("Year %Y");
var outputFormat = d3.time.format("%Y");
// My shortcut for the scale is to list the first and last only - will set the extents.
// Also, I set the earlier year to 1999 to get a little spacing on the X axis.
var years = ["Year 2007", "Year 2014"];
//Set up scales - I already know the start and end years, not using data for it.
var xScale = d3.time.scale()
.range([ 0, width ])
.domain(
d3.extent(years, function(d) {
return dateFormat.parse(d);
}));
// don't know the yScale domain yet. Will set it with the data.
var yScale = d3.scale.linear()
.range([ 10, height ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5)
.tickFormat(function(d) {
return outputFormat(d);
})
.innerTickSize([5])
.outerTickSize([0]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.innerTickSize([0])
.outerTickSize([0]);
//Configure line generator
// each line dataset must have an x and y for this to work.
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.Year));
})
.y(function(d) {
return yScale(+d.Attendance);
});
// add a tooltip to the page - not to the svg itself!
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip");
//Create the empty SVG image
var svg = d3.select("#svg")
.append("svg")
.attr("width", fullwidth)
.attr("height", fullheight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Load data
d3.csv("parksA.csv", function(error, data) {
// Notice what happens if you don't sort by year :)
var dataset = d3.nest()
.key(function(d) {
return d.amusementPark;
})
.sortValues(function (a, b) { return dateFormat.parse(a.Year) - dateFormat.parse(b.Year)})
.entries(data);
// doing the max on the unnested data - easier to get the full set of Measles that way!
yScale.domain([
d3.max(data, function(d) {
return +d.Attendance;
}),
2000000
]);
function get_values_for_park(park) {
// Helper function to get the values from the data object that has the country key
// special case for id's with too many words in them, sadly:
if (park === "Magic") {
park = "Magic Kingdom";
}
return dataset.filter(function (d) {
return d.key == park;
})[0].values;
}
// Default on first load is Congo- using a helper function:
var magic = get_values_for_park("Magic Kingdom");
svg.selectAll("path")
.data( [magic] )
.enter()
.append("path")
.attr("class", "line")
.attr("d", line);
// set the button to show the default country selected:
d3.select("button#Magic").classed("selected", true);
//Axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
d3.selectAll("button").on("click", function() {
// Handle the button click to change the data set.
var selectedline = d3.select("path.line");
var thisButton = d3.select(this);
// current attr "id" is returned if you don't set it to anything!
var newdata = get_values_for_park(thisButton.attr("id")); // the id has to match the country name for this to work.
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
selectedline
.transition()
.duration(2000)
.attr("d", line(newdata));
/* to understand the above, this is what I had before I added more cases:
if (thisButton.attr("id") === "angola") {
console.log("angola");
var newdata = angola; // i had saved out the values for angola already.
d3.select("button#congo").classed("selected", false);
}
etc. -- with each button "id" as a separate if statement.
selectedline.transition().attr("d", line(newdata));
*/
});
}); // end of data csv
</script>
<!-- Latest compiled and minified JavaScript -->
</body>
</html>
Raw
parksA.csv
amusementPark Year Attendance
Magic Kingdom Year 2007 16640000
Magic Kingdom Year 2008 17063000
Magic Kingdom Year 2009 17233000
Magic Kingdom Year 2010 16972000
Magic Kingdom Year 2011 17142000
Magic Kingdom Year 2012 17536000
Magic Kingdom Year 2013 18588000
Magic Kingdom Year 2014 19332000
Epcot Year 2007 10460000
Epcot Year 2008 10935000
Epcot Year 2009 10990000
Epcot Year 2010 10825000
Epcot Year 2011 10825000
Epcot Year 2012 11063000
Epcot Year 2013 11229000
Epcot Year 2014 11454000
Animal Year 2007 9100000
Animal Year 2008 9540000
Animal Year 2009 9590000
Animal Year 2010 9686000
Animal Year 2011 9783000
Animal Year 2012 9998000
Animal Year 2013 10198000
Animal Year 2014 10402000
Hollywood Year 2007 8910000
Hollywood Year 2008 9608000
Hollywood Year 2009 9700000
Hollywood Year 2010 9603000
Hollywood Year 2011 9699000
Hollywood Year 2012 9912000
Hollywood Year 2013 10110000
Hollywood Year 2014 10312000
Universal Year 2007 6000000
Universal Year 2008 6231000
Universal Year 2009 5530000
Universal Year 2010 5925000
Universal Year 2011 6044000
Universal Year 2012 6195000
Universal Year 2013 7062000
Universal Year 2014 8263000
Islands Year 2007 5300000
Islands Year 2008 5297000
Islands Year 2009 4627000
Islands Year 2010 5949000
Islands Year 2011 7674000
Islands Year 2012 7981000
Islands Year 2013 8141000
Islands Year 2014 8141000
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment