Facebook Messenger history visualization (D3.js, SVG, HTML/CSS)

Using Facebook API and D3.js (javascript visualization library) I've created an interactive infograph of my FB Messenger usage patterns in 2016. Circle consists of 365 lines representing days, starting with 00:00 on the inside, and ending with 23:59 on the outside. Every received and sent message was plotted as a tiny transparent dash at the appropriate time, resulting in a detailed heatmap.

Total dataset stats

Since 20/7/2009 (that's 3380.04 days ago), I've chatted with 312 people on Facebook. Together, we've sent each other 158397 messages. This means that on average, with every person we've exchanged 507.68 messages or 46.86 messages daily.

I created an API endpoint, gubins.lv/fbdata?year=YEAR which queries SQLite database and compresses all the messages into 365 days, as well as returns some basic statistics shown in the previous paragraphs. Each packed day is an array of 24 * 12 elements (5 minute time resolution). A little bit of trigonometry, a sprinkle of D3.js and a lot of googling, and your browser renders the received data to what can be seen below.

Inspired by Rob Moore's reddit post, built with D3.js and HTML5 canvas and is based on my personal messages dataset that was last updated on 12/4/2018.

Loading...