Creating Art from Facebook Conversations

Khallil
2 min readAug 12, 2015

--

A conversation with Adjani about taking the bus from Montreal to Waterloo.

Last night I wanted to see my Facebook conversations.

I used the internet, javascript, and a sprinkle of code to make the above visualization

Well, the decapitation and desaturation process happened in Photoshop. Neither Facebook, nor D3.js had anything to do with that.

  • Each node represents either myself or my friend Adjani
  • My messages are blue lines, hers are red
  • The amplitude of the wave represents the length of the message (longest is 140 characters)

Here’s another conversation with my friend Romain about a database schema. My messages are in blue, Romain’s in red.

Duplicating the wave made for another funky effect

Next, I’ll try a group conversation between my two roommates. Who could resist more squiggly lines between multiple headless friends in one image?

Note: The code isn’t open sourced because it’s uglier than I was 8 years ago. But if you’re interested, let me know and I’ll make it readable :)

Another Note: Facebook’s most recent Graph API makes it difficult to get messages. Thankfully I had an old app that was still on an older API version.

I’m into making pretty things on the internet. If you are too, then follow me on Twitter and Instagram.

--

--

Khallil

CTO @fiixmechanics. Previous @apple and @facebook. Student @uwaterloo.