-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.html
84 lines (67 loc) · 5.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The HBO Recycling Program 2.0</title>
<link rel="stylesheet" href="recycle.css" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="paper.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.4/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="data.json" type="text/javascript" charset="utf-8"></script>
<script type="text/paperscript" canvas="canvas" src="recycle.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
if (!!document.createElement('canvas').getContext) {
$('#nocanvas').hide();
}
});
</script>
<script type="text/javascript" src="//use.typekit.net/ran8aft.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26336682-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<a href="http://github.com/zgrossbart/hborecycling" id="forkme"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" alt="Fork me on GitHub" /></a>
<h1>The HBO Recycling Program 2.0</h1>
<p>
Actors who have appeared in three or more episodes of multiple scripted, live-action, original, HBO series since OZ (excluding miniseries). Click the dots to highlight connections. For example, try <a href="#" id="deadwoodjohn">Deadwood and John from Cincinnatti</a>.
</p>
<div id="mainText">
<p id="nocanvas">
This page requires HTML5 canvas and JavaScript.
</p>
<canvas id="canvas" width=1000></canvas>
<p>
This page is an interactive version of the diagram from <a href="http://www.grantland.com/story/_/id/6635619/the-hbo-recycling-program">The HBO Recycling Program</a>. The diagram shows you the actors who've worked in multiple HBO shows and makes it clear how often HBO works with the same actors. The original diagram is pretty and interesting to look at, but it's difficult to read.
</p>
<p>
Try finding the two actors who worked on Oz, The Sopranos, and The Wire. I can't. The idea was awesome, but the implementation needed a little work.
</p>
<p>
This project is all about creating a new interactive version of that image which makes it easier to use. I do that by highlighting the connections and making it easy to see the <a href="http://en.wikipedia.org/wiki/Intersection_(set_theory)">intersections</a> of the different sets. When you select multiple shows it will highlight the actors which were in all of the shows and if you select multiple actors it will show you all the shows they have in common.
</p>
<p>
Finding out <a href="#" class="actorLink">John Doman</a> has been on Oz, The Sopranos, and The Wire or that <a href="#" class="actorLink">Laila Robins</a> was a trendy socialite in New York and Tony Soprano's mother in New Jersey is easy with intersections.
</p>
<p>
This infographic is made with <a href="http://www.paperjs.org">PaperJS</a>, <a href="http://documentcloud.github.com/underscore/">underscore.js</a>, and a little <a href="http://jquery.com/">JQuery</a>.
</p>
<p>
<a href="http://www.fastcodesign.com/">Fast Company Design</a> featured the HBO Recycling Program as the <a href="http://www.fastcodesign.com/1665124/infographic-of-the-day-hbo-recycles-the-same-actors-again-and-again">Infographic of the Day</a>.
</p>
<p>Research: Sam Schube and Danny Savitzky</p>
<p>Based on a visualization by Craig Robinson</p>
<p>First featured in <a href="http://www.grantland.com/story/_/id/6635619/the-hbo-recycling-program">The HBO Recycling Program</a> by <a href="http://www.grantland.com/search/_/query/andy-greenwald">Andy Greenwald</a></p>
<p>Created by <a href="http://www.zackgrossbart.com/blog/more-about-zack/">Zack Grossbart</a></p>
</div>
</body>
</html>