Chord Gradients - Final example - Avenger Movie Collaborations

Movie collaborations between Avengers in the MCU - will get used in tutorial

forked from nbremer's block: Chord Gradients - Final example - Avenger Movie Collaborations

forked from jonpage's block: Chord Gradients - Final example - Avenger Movie Collaborations

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>Collaborations between MCU Avengers</title>
	
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
		
		
		<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
		
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	
		
		<script src="bootstrap.tooltip.js"></script>
		<script src="bootstrap.popover.js"></script>
		
		<script src="d3.layout.chord.sort.js"></script>
		
		<style>
			body {
			  font-size: 14px;
			  font-family: 'Lato', sans-serif;
			  text-align: left;
			  color: #757575;
			  cursor: default;
			}
			
			.title {
				margin-top: 20px;
				margin-bottom: 10px;
				margin-left: 20px;
				font-size:32px;
				font-family: 'Oswald', sans-serif;
				color: #2B2B2B;
			}
			
			.texts {
				margin-left: 20px;
				margin-right: 20px;
				line-height: 140%;
			}
			
			.credit {
				color: #9E9E9E;
				font-size: 10px;
				margin-bottom: 0.5em;
			}
			
			.notes {
				color: #9E9E9E;
				font-size: 10px;
			}
			
			.popover {
				pointer-events: none;
			}
			
			#chart{
			  font-size: 16px;
			  font-family: 'Bangers', sans-serif;
			  text-align: center;
			  fill: #2B2B2B;
			}
			
			@media (min-width: 600px) {
				#chart{
					font-size: 20px;
				}
			}
		</style>
	</head>
	<body>
	
		<div class = "title">Movie collaborations between Avengers in the MCU</div>
		<div class = "explanation texts">
			<p style="margin-bottom: 0em;">The visualization below shows how often the original Avengers have appeared in MCU movies together since Iron Man 
			in 2008 and counting up to Thor: Ragnarok scheduled in 2017. The thicker a line, the more movies in which both characters appeared.</p>
			<p style="margin-top: 0.5em;">Because all six have appeared in both Avengers movies, the minimum number of co-appearances is 2. 
			Iron Man and Black Widow are the Avengers who have appeared most often together, with 5 movies.</p></div>
		<div id = "chart"></div>
		<div class="credit texts">Created by Nadieh Bremer | <a href="https://www.visualcinnamon.com/">VisualCinnamon.com</a></div>
		<div class = "notes texts">
			The 12 MCU movies taken into account are: Iron Man, Iron Man 2, Iron Man 3, Captain America: The First Avenger, Captain America: The Winter Soldier, 
			Captain America: Civil War, Thor, Thor: The Dark World, Thor: Ragnarok, The Incredible Hulk, The Avengers & Avengers: Age of Ultron</div>
 
		<script src="script.js"></script>

</body>
</html>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js