Creating a Facebook Messenger Data analyzer
And how you can do it easily too.
tldr; It’s sick; check it out: https://luc-olsthoorn.github.io/FacebookMessengerViz/
Preface
I use facebook messenger a lot. It’s been my go to messaging platform for years, as traditional SMS (android messaging) sucks.
The idea for building out this analysis came from when my previous analysis could never get released because the library I used for the data broke right before I was going to release it and still hasn’t been fixed. I also thought I might have Covid, so I self quarantined and decided to just bang out some code instead of scrolling on reddit all day. And thus like a phoenix out of the ashes of failed projects and life choices, FacebookMessengerViz was born.
Building
First I acquired the data. Thanks to GDPR, it is very easy to download high-quality data quickly. It also reminds you that everything is being watched by our supreme tech overlords.
The data coming from Facebook came in the form of many separate JSON’s, with all of the messages I have ever sent, received, their respective content, and the timestamp that it happened. It was properly formatted and clean. This was looking good.
I only really know how to code well in Javascript, and React is the framework I work with for a living. I am also not a madlad who decides to build out an entire webapp in R
Actually building it out was fairly easy. I wrote the CSS/JS from scratch because it was such a small app. I used https://coolors.co/ to get my color palette, I highly recommend this for building unique apps!
I used https://www.npmjs.com/package/react-infinite-scroller to make sure that the rendering of DOM elements on change didn’t cause too much DOM rewrite (major lag). This helped with things such as the search, and features such as the most common emojis/words.
I used http://recharts.org/en-US/ for making my singular graph. I used d3 on the Youtube analyzer I built, and I found it although extremely powerful, incredibly difficult to use as the documentation is confusing, and the syntax is not Javascript-esque, which makes the developer experience jarring. Recharts had great documentation, looked great, ran well, and was super easy to use. You can’t (or I should say shouldn’t) do anything crazy, but half the time I find the advanced data visualizations way to confusing anyway.
To deploy I used Github pages, and followed this guide https://create-react-app.dev/docs/deployment/ it took me 5 minutes and was the easiest deployment I have ever done. Plus now I don’t have to worry about it going down, as my server is serviced by Github!
The most incredible part to me is the sheer strength of the browser as a computation engine. There are nearly 2gb’s of JSON’s being uploaded and running computations on and the lag is negligible to me. I of course didn’t do anything dumb such as super deep nested loops, but I also didn’t run into any performance problems after building, which I was anticipated the entire time I was building it out.
Running it yourself
Go to: https://luc-olsthoorn.github.io/FacebookMessengerViz/ and follow the easy instructions!
