Data Story: How Couples Meet and Stay Together
Time: 2019 Fall
Team Size: 1
Role: front-end developer, data analyst
Tools: d3.js, excel, R, HTML, CSS
Front-end Engineering
Context:
This project is about the love life of Americans, based on a survey that Standford University carried out in 2010. How Couples Meet and Stay Together (HCMST) is a study of how Americans meet their spouses and romantic partners. It was fielded in 2010 and following up surveys were completed during the past decade.
What did I do?
-
Data Mining & analysis: collected this dataset from Standford's official website. Used R to complete the data mining process to analyze and find patterns
-
Constructed the website: designed the website using HTML, CSS, and JavaScript
-
Interactivity: added interactivity using the JavaScript library d3.js, such as moving dots, scoller box, and clickability
Inspiration
Dataset: How Couples Meet and Stay Together
I discovered the field survey carried out in 2009 by Standford researchers about how Americans meet their spouses and romantic partners from a news report. 4,002 adults responded to the survey which examines how traditional and nontraditional couples meet and whether meeting ways impact the stability of the couple. The original dataset was in csv format (See right).
I found it atypical to study people's emotional romantic lives with quantitative data and decided to present the data in an intriguing way to provoke questions and bring new insights. Even though this survey was carried out a decade ago, it still reflects the social atmosphere during that time. I want to ask three questions by this visualization:
1. Do traditional couples and nontraditional couples meet in the same way?
2. What kinds of couples are more likely to have met online?
3. Does meeting online lead to greater or less couple stability?
Process
Prototype, data mining, filtering and stimulation in d3.js, scroller box and clickable dot.
Prototype: one the paper, feedback, data mining using d3.js
I first viewed the dataset in Excel and tried to find out what aspects from the survey made sense to visualize. There were more than a dozen aspects from each case and I planned to take out "relationship durations, couple race, how they meet and education degree" to discuss. Paper prototype see left.
When I shared this prototype with peers and professors, they pointed out race and education may not be appropriate to discuss as an undergraduate since the project will be shown to a large group of audience, even though I did not intend to have subjective tones.
I adopted their suggestions and made a simple graph using d3.js. I used the filter function to sort the incoming data into different groups and created different datagroups for them. I placed them randomly on the page, each in a tiny box/dot (See down).
In this graph, the x-axis is the relationship duration and color and shape represent how they meet (online: red, dot; offline: blue, box). And when you hover on the dot, it magnifies and shows the exact duration.
This attempt already exhibited the average length of relationships for couples met online is shorter than those met offline. Several explanations such as the emergence of the Internet came quite recently and couples met online are not as responsible.
Based on the prototype, I want to utilize the y-axis and present more detailed information about each case.
Filtering and Stimulation: data filtering and labelling, d3.js animation with forces
After importing the dataset using d3, it creates an instance for every case. I used one dot to represent one case and planned to change the position and color of the dot when the user interact with it. I divided the meeting methods into more detailed ten categories, five of them being online (see left 1).
I excluded the cases where they met through various ways because one dot can not be at multiple positions on the page at the same time (see left 2).
Then I created the stimulation for each data group. d3 stimulation moves the data points around according to the force it receives, as things fall down due to gravity in real life. Every datapoint started at the top left corner and move to the position according to the force on x direction into a cluster (see right).
The stimulation forces change as the user interact with the page, thus producing animations in between the graphs to make it more interactive.
Scroller Box: supplementary information and interactions happen
To make the visualization more engaging and meaningful, I added a floating scrollable text box (see left up 1) on the side to provide some background information and make interactions happen: as users scrolled down to read more, the graph changes to reflect another aspect of the dataset. The scroller box is created by calculating the positions of each box and the pointer (see left down).
When users scroll down, the box id changes, and the stimulation, x-axis and cluster change according to the position of the scroller. I also refilled the color of each dot to represent different aspects such as online vs offline (see left up 2). No matter how the datapoints move, I applied the forces which always have them to form a cluster, attracted to the center point.
Clickable Dot: more information for whoever's interested
There are a lot of aspects that are either not easy to quantify or visualize or too controversial to include. Hence I decided to put more information about each case in the project. I achieved this by creating a floating box (see right) to present the individual information after users click the dot. Since it was narrated on the sidebar that each dot represents one case and the overall dot quantity did not change, I thought it would be an interesting way to interact with the graph.
The information includes Case ID, Relationship Duration, Relationship Status, Age Difference, Gender Attraction, How They Met, Education Level Comparison, Religion Comparision. Relationship duration is influenced by masses of factors in their lives. Hence I do not want to simply draw the correlation that meeting offline leads to longer relationship durations. By presenting more information and having a background story on the side, it allows the users to better comprehend the project.
I do not want to use this visualization to prove certain points; this project only serves as a representation and reflection of how people's love lives are in America. I hope it provokes users to think about the social changes behind the numbers.
Feedback & Implementation
After showcasing the project to my class and at the Interactive Media Show, I received feedback being:
[Positive]
1. The concept is interesting and the visualization is pleasant to see;
2. It is an interactive data visualization that reveals a lot of aspects about American's love lives;
3. It poses interesting questions for people to think about by presenting the data this way.
[Negative]
1. With only three graphs, it seems to be too short as there is more information available;
2. "What is your intention behind this visualization? It is not very clear. Are you trying to draw correlations or showcase individualities?"
Hence I decided to implement the project using a newer version of the dataset which is concluded from the survey in 2017, which reflects more detailed aspects about subjects' use of phone apps like Tinder and Grindr for dating and meeting partners. I would love to isolate the meeting online/offline factor and provoke more questions around that. And try to draw some correlation between different factors by presenting them in a more convincing way.
This newer implementation is still in progress; I will update this page once it's done.
Oct. 10, 2021