forked from paulovn/movie-network
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
198 lines (161 loc) · 9.04 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PopCha! Movie Network</title>
<link rel="stylesheet" href="movie-network.css"/>
<link rel="shortcut icon" href="img/popcha.ico" type="image/x-icon">
<script>
// Sniff MSIE version
// http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
var ie = ( function() {
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML='<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',all[0]
);
return v > 4 ? v : undef;
}() );
function takeAction() {
if( ie && ie < 9 ) {
D3notok();
} else {
// Load D3.js, and once loaded do our stuff
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "d3.min.js";
script.addEventListener('load', D3ok, false);
script.onload = "D3ok();";
head.appendChild(script);
}
}
</script>
</head>
<body onload="takeAction();">
<div id="nocontent">
<h1>Sadly your browser is not compatible with this site</h1>
<div>You can use <a href="http://www.google.com/chrome/">Google
Chrome</a>, <a href="http://www.mozilla.org/firefox">Mozilla Firefox</a>
or <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Microsoft
Internet Explorer (v9 or above)</a> to access the PopCha Movie
Network</div>
</div>
<div id="movieNetwork"></div>
<div id="sidepanel">
<div id="title">
<img src="img/popcha-100.png"/><br/>Movie Network<br/>
<!-- <a href="javascript:void(0);"
onClick="zoomCall(0.5);" style="pointer-events: all;">+</a>
<a href="javascript:void(0);"
onClick="zoomCall(-0.5);" style="pointer-events: all;">-</a> -->
<img id="helpIcon"
src="img/help-question-48.png" title="Click for help"
onClick="toggleDiv('help');"/>
</div>
<div id="help" class="panel_off">
<img src="img/close.png" style="float: right;"
onClick="toggleDiv('help');"/>
This is a subset of the movie network produced from data in the
mobile <a href="https://www.popcha.tv">PopCha!</a> app. Movies
relate to each other <em>as they get picked by PopCha! users</em>
(note that movie details are <strong>not</strong> used to build the
graph).
<ul>
<li>Hover over a node to see the movie title, and to highlight
the movies related to it.</li>
<li>Click on a node to show movie details. It will open up a
side panel.</li>
<li>On the movie details panel, you can click on the <em>target</em>
icon to center the graph on that movie. And clicking on the link to
a related movie will move to that movie (in the graph and in the
panel)</li>
<li>You can use you usual browser controls to zoom and pan
over the graph. If you zoom in when centred on a movie, the
graph will expand around it.</li>
<li>Above a certain zoom level, movie titles are automatically
displayed for all the nodes.</li>
</ul>
For additional information, check the <strong><a href="" onClick="return toggleDiv('faq');">FAQ</a></strong>.
</div>
<div id="movieInfo" class="panel_off"></div>
</div>
<div id="faq" class="panel_off">
<div id="close_faq">
<img src="img/close.png" onClick="toggleDiv('faq');"/>
</div>
<dl>
<dt>Where does this come from?</dt>
<dd>The <a href="https://www.popcha.tv">PopCha!</a> mobile app
lets users search for movies, view their details, rate them, add
them to bags to build personalized movie lists and receive
notifications when they are available in theaters, TV or Video
on Demand platforms. Its recommendation engine allows proposing
users movies they might be interested in. PopCha! users have so
far currently rated, added to bags or otherwise showed interest
for more than 11,000 movies</dd>
<dt>And how was this concrete "movie network" made?</dt>
<dd>This is how we did it:
<ol style="margin: 0px;">
<li> We selected the movies with the top ratings (the most
highly valued movies for PopCha! users). Those were our
initial seed, and are the nodes with a red border in the
graph. As you can see, they are mostly the "usual suspects",
but with also a few non-conventional movies added in.</li>
<li>Then we used our recommendation engine to find the
movies most similar to them. Not by looking at their genre,
director or cast, but by checking how users interact with
them. That is, two movies are considered similar just by
checking if users rate them equally, or usually appear
together in their bags. Those movies make up the second
level in our network, marked with a grey border.</li>
<li>Finally, we rounded up the graph by adding a third
level, computed as the movies most similar to the ones in
the second level</li>
</ol>
</dd>
<dt>Ok, but <em>how</em> was the graph actually computed?</dt>
<dd>For those of you technically oriented, the links between
movies were extracted as item-item similarity scores computed in
our Collaborative Filtering engine, using all events produced by
users of the PopCha! Android/iOS apps. Those links were then fed
to a <a
href="https://github.com/mbostock/d3/wiki/Force-Layout">force-directed
graph layout</a> in <strong>D3.js</strong>.
<br>No movie metadata (title, director, cast, whatever) was used or harmed in any way during the production of this graph.</dd>
<dt>What do the graph elements mean?</dt>
<dd>Each circle is a movie; it is linked to the set of movies
most similar to it according to our engine (and therefore to
PopCha! users). The size of the circle represents how it is
valued by PopCha! users; the set of 25 most valued movies is
highlighted with a red border. <br/>
When a movie is selected (hovering or clicking) it is shown as purple
in the network. The set of movies linked to it (the ones more similar
to it) are also highlighted, this time in blue.<br/>
The width of the link between two movies reflect how similar they are
(in terms of user response to them); this similarity translates to the
force attracting the nodes (so that two very similar movies will tend
to stay close, within the constraints imposed by the rest of the
forces from the other nodes).<br/>
The force-directed layout is an iterative algorithm; each time the
page is loaded the rendering starts anew, and converges towards a
final stable state. There is some randomness in it, so that no two
final states are equal (but relative positioning of movies, and the
formed clusters, should be similar).
<dt>What is the resulting structure?</dt>
<dd>The graph is heavily connected: there are connections between many of the movies in the network (note that this is only a partial view of the overall network: in the full graph there are many more connections, and also to the movies that here appear to be at the edges).<br/>
There is a strong central cluster containing some of the most important movies (it is so dense that it cannot be clearly seen unless you zoom in). Some of them are deeply connected, check for instance <em><a href="javascript:void(0);" onclick="clearAndSelect(56);">Seven</a></em> or <em><a href="javascript:void(0);" onclick="clearAndSelect(65);">Forrest Gump</a></em>. Within that central cluster we can also identify thematic subclusters, such as the <a href="javascript:void(0);" onclick="clearAndSelect(52);">Tolkien saga</a>.<br/>
Outside the graph core we can also find other areas with semantic meaning (e.g. the set of <em><a href="javascript:void(0);" onclick="clearAndSelect(165);">Star Wars</a></em> movies, or a group of classic <a href="javascript:void(0);" onclick="clearAndSelect(61);">Hitchcock thrillers</a>). There is also a small <a href="javascript:void(0);" onclick="clearAndSelect(20);">Western</a> cluster (mostly Clint Eastwood movies) and a <a href="javascript:void(0);" onclick="clearAndSelect(119);">Tarantino</a> group.<br/> As a curiosity, there seems to be an exaggerated importance given to movies that are seemingly minor, but that share title with more significant ones (i.e. there is a second <em>Godfather</em> or a second <em>Gladiator</em> in the graph, try to spot them!). These might stem from user confusion when selecting the movie they actually wanted.</dd>
</dl>
<dt>Credits</dt>
<dd><em>
Movie statistics by the <a href="https://www.popcha.tv">PopCha! team</a><br/>
Graph computation & visualization by Paulo Villegas<br/>
Movie details from <a href="http://www.themoviedb.org/">The Movie Database</a>
</em></dd>
</div>
<script src="movie-network.js"></script>
</body>
</html>