friends_analysis/play_friends.html at master · terragord7/friends_analysis · GitHub

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
<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

body {
  font-family: 'Permanent Marker', cursive;
  background-color: #ffffff;
}

.button-special {
  font-family: 'Permanent Marker';
}

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

.fa-play {
    color:green;
}

.fa-play.highlight {
    color:grey;
}

.fa-stop {
    color:grey;
}

.fa-stop.highlight {
    color:red;
}


</style>
<body>
  <div class="row">
    <center>
      <img src="img/friends_logo.png" height=100>
    </center>
  </div>
  <div class="row">
    <center>
      <h2>Character Network</h2>
    </center>
  </div>
  <div class="row">
    <center>
        <h4>
          <div id = "instr">Press play to cycle through the seasons.  Press stop to explore.</div>
        </h4>
    </center>
</div>
  <div class="row">
    <center>
        <button id="play"><i class="fa fa-play" style="font-size:24px;"></i></button>
        <button id="stop"><i class="fa fa-stop" style="font-size:24px;"></i></button>
    </center>
  </div>
  <div class="row">
      <center>
          <h3>
            <div id = "season">Seasons 1</div>
          </h3>
      </center>
  </div>
<div class="row">
  <center>
    <svg width="1400" height="600"></svg>
  </center>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="js/play_friends.js"></script>
</div>
<div class="row">
    <center>
        <h6>
          <div>Explore individual seasons <a href="https://keithmcnulty.github.io/friends_analysis/index.html">here</a>.</div>
        </h6>
    </center>
</div>
<div class="row">
  <center>
    <p style='font-size:75%'>Connections between the six main characters were removed to better analyze each character's community.  Colors represent distinct communities identified by the Louvain algorithm.  Data was obtained by scraping scripts of Friends found <a href="https://fangj.github.io/friends/">here</a>.  Created by <a href="https://twitter.com/dr_keithmcnulty">@dr_keithmcnulty</a>.</p>
  </center>
</div>


</body>