love notes (we might have written)

In a world where our most personal moments are immortalized as data, Love Notes is an interactive data visualization and art piece exploring the way we reflect on these intimate experiences.

Using Markov chains, I've parsed over 27,000 messages, sent over 16 months, between me and a past significant other to generated random phrases based off of our past conversations, exploring the idea of entropy and deconstruction within the context of reflecting on emotional experiences.

Love Notes presents some of the most interesting, funny, and poignant notes generated by the model in an interactive interface that not only allows the user to explore these results, but also participate in editing and reconstructing the story itself.

background

Markov chains are mathematical models of how one state changes to another, based off of previous observations. When applied, they can do things such as generate "random" text, as long as you feed the model some text it can observe.

This Fall, I took an Information Design class that allowed us to choose any dataset for exploration. While I could have chosen some more pragmatic topic, I chose to take a more conceptual approach by designing a representation for a very personal dataset - i.e., my entire body of online conversations with an ex, conveniently recorded by Facebook. As opposed of finding a way to inform of details of the relationship very transparently, I was interested in using Markov chains to rearrange our conversations into a new narrative.

Partially inspired by the visual interface design in Spike Jones' Her, my initial conceptual sketches envisioned a web interface that would cycle through generated notes, that I'd handwrite, in a gallery format.

creating the notes

Generating notes first starts with data collection - I used a Facebook message downloader extension to download the data and fed each message into Markov models with help from a handy python-based generator.

Each model is created based on its own body of sample text; in the end I decided to group the conversation by different characteristic stages in our relationship and feed each group into its own Markov model. The most interesting, funny, and poignant phrases made it to the final visualization.

Since the generated phrases often combine fragments of two or more unrelated pieces of conversation, I built upon the visual metaphor of handwritten stationary and imagined the phrases as if our online conversations existed as physical letters that were cut and pasted together to make a different story.

The final notes made it into a HTML, CSS, and JavaScript-based carousel image gallery, which guides the audience through the curated story.

interactivity

To explore the idea of deconstructing and reconstructing stories from these notes, I added interactive features that would allow users to drag around, piece together, and decorate the love notes as they saw fit. These features sit in an edit pane that appears after the user begins to explore the different notes.

The note pieces are draggable with help from a jQuery library, and can be mixed and matched with any other pieces. Notes can also be "deleted" - until you refresh the page, that is.

A sheet of drag-and-drop stickers feature some of the most used emojis in our conversation - ripped from their original contexts and now placeable anywhere you see fit.

Finally, a "seen stamper" references Facebook's "Seen" marker at the ends of conversations, inking the user's current time over the featured notes.

putting it together

It was clear that establishing a solid background to the story was important for the audience to understand the interface, so I created an intro sequence that outlined where these notes came from, and hinted at the higher level concept of how they were being generated.

I also worked on refining the interface for mobile screens as well by making the layout responsive. Since the editing features add a lot of clutter, I decided to narrow the interactions down to only the gallery view if a user viewed it on a smaller device.

The mobile view prompts for swipe interactions, allowing the user to explore the different notes, but no longer manipulate them. Finally, I hosted it with help from Neocities and purchased the domain name lovenot.es.

check it out here