jenkr55.github.io/facebookdata.html at master · jenkr55/jenkr55.github.io · 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
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
<!DOCTYPE html>
<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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Visualizing my Facebook Data - Jennifer Kruse</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/clean-blog.min.css" rel="stylesheet">
    <link href="css/application.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

    </head>

    <body>

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a style="color:white" href="http://jenniferkruse.me">Home</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>

        <!-- Page Header -->
        <!-- Set your background image for this header on the line below. -->
        <header class="intro-header" style="background-image: url('img/fbdata/header.jpg')">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                        <div class="post-heading">
                            <h1 style="color: white">Visualizing my Facebook Data</h1>
                            <h2 class="subheading" style="color: white">I downloaded all of my Facebook data and organized it into various charts
                            </h2><span style="color: white">March 24, 2018</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Post Content -->
        <article>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                        <p>I downloaded a copy of all the data Facebook has on me (or…at least this is all they claim to have on me), and analyzed it a bit. I was mostly curious about the frequency of messages, friend requests, and timeline posts over time, because I wondered if it would match up with various life events.<p>

                        <p> To download your data, go to <a href="https://www.facebook.com/settings" target="_blank">your settings page</a>, and then they will email you the download link when it’s ready. Randomly clicking through the old data is a minefield of embarrassing high school messages, old posts from long lost friends, and photos you forgot you ever uploaded.</p>

                        <p>The data is structured into HTML pages instead of an easy data format, so I wrote some scripts to convert these pages to CSV for easier analyzing. You can view my scripts <a href="https://github.com/jenkr55/FacebookDataMessageParsing" target="_blank">here</a>. Even though there are definitely better tools for the job than Ruby, I love programming in Ruby so I chose Ruby with the Nokogiri gem. To make these charts, I just pasted the CSV files into Google Sheets and then inserted some charts. </p>

                        <p>I don't really post a whole lot on Facebook and I mostly use it as a primary means of messaging my friends, so I was mostly interested in the message data. Once I had my CSV file of the relevant data, I plotted the volume of messages sent and received over time. In high school I mainly used text messaging to communicate with my friends, and as we all got smart phones, we slowly transitioned to Facebook Messenger, and this data reflects that.</p>
                        <img src="img/fbdata/volumeChart.png" style="width: 100%">

                        <p>I noticed a few interesting data points that lined up with life events at the time. August 2012 was when I began college and the volume picks up here as I made new friends. There's a big spike December 2012, which was when my new friends and I went on winter break for 3 weeks. We would stay up until 4 a.m. chatting on Facebook and Skyping until school resumed again. There's a similar spike December 2013, and during the summer of 2014 when I was interning in a different city than my friends and family. When I began working full-time in an office August 2016, my message volume has a huge spike as my other working friends and I kept Messenger open in a tab at work to chat throughout the day!</p>

                        <img src="img/fbdata/pieChart.png" style="width: 100%">
                        <p>Next I was interested in the breakdown between who I messaged most often. This is definitely weighted more towards my college friends than my high school friends.</p>

                        <img src="img/fbdata/friendsChart.png" style="width: 125%">
                        <p>This is a simple graph of number of friend requests sent/received per month. It's pretty steady except for a few spikes. The biggest spike is when I started college August 2012. The next big spike after that, February 2014, was when I met my intern class for the summer and we all added each other on Facebook.</p>

                        <img src="img/fbdata/friendsPie.png" style="width: 100%">
                        <p>This breakdown doesn't show a huge difference from year to year. 2010 and 2011 (the years in high school after I got my driver's license, causing my social circle to expand), 2012 (the year I started college), and 2017 (a bunch of coworkers added me) have the most. </p>

                        <p>The timeline page from Facebook is not organized into different categories. Events, posts, photos, and statuses all have the same CSS classes and there's not an easy way to differentiate them, so the next data just captures everything lumped into one group. </p>

                        <img src="img/fbdata/timeline.png" style="width: 125%">
                        <p>This is the frequency per month/year. During high school I would post so many photos, and that's reflected here with the big spikes in 2009-2012. You can also see a lot of activity during the summer of 2016, when I was in Taiwan and would post updates and photos more often. Lately as I've used Facebook less and less, it tapers off.</p>

                        <p class="contactText"> Questions? Comments? Don't hesitate to <a href="http://jenniferkruse.me/about">contact me</a>!</p>
<!--                         <div id="disqus_thread"></div>
                        <script type="text/javascript">
                            /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'jenniferkruse'; // required: replace example with your forum shortname
        var disqus_identifier = 'fbdata';
        var disqus_url = 'http://jenniferkruse.me/facebookdata.html';

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
 -->

</div>
</div>
</div>
</article>


<hr>

<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>

</body>

</html>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-59909033-1', 'auto');
  ga('send', 'pageview');

</script>