• Black Vimeo Icon

©2020 BY JENNY LIN

Dating Data Visualization

To visualize data, I wanted to use a data set that people would be interested in. Since I worked in online dating industry before coming to ITP, I thought maybe I could visualize one of the dating data set that surprises people. I looked through a lot of dating apps' APIs, but they seem unavailable or hard to utilize as usually dating apps are very sensitive with keeping their user's information confidential (and I should have known that). Eventually, I chose a piece of information that I personally found interesting (maybe not for other people, it might be interesting just for people in the online dating industry in a single-ethnicity country) and made it into a JSON file, which seemed much faster and easier than finding a proper API to me.


Yet, I was originally thinking about visualizing the data set on a world map about how many people using online dating app in certain countries to show the difference between Asia and Western countries. As I could not find that information, I had to think of a new way of visualizing the data with the data set I chose. And here it goes!

Click me to check out the code!

It took me some time to alter the color scheme and the location of the texts. But I made them worked! Hope you find it interesting!




Codes

let distance = 200;

let cx;

let cy;

let cr;

let magnifier = 3;

let locationAlt = 75;


function preload() {

loadJSON("dating.json", gotData);

}


function setup() {

noCanvas();

title = createElement('h1', datingInfo.title).style('text-align', 'center');

ans = datingInfo.response;

div = createDiv();

createCanvas(800, 800);

angleMode(DEGREES);

cx = width / 2;

cy = height / 2;

cr = width * 0.25;

}


function draw() {

background(50);

fill(255, 200);

ellipse(30, 30, 10);

textAlign(LEFT, BOTTOM);

text('White', 45, 38);

fill(153, 102, 51, 200);

ellipse(30, 60, 10);

text('Hispanic', 45, 68);

fill(0, 200);

ellipse(30, 90, 10);

text('Black', 45, 98);

fill(153, 51, 255, 200);

ellipse(30, 120, 10);

text('Other', 45, 128);


for (let i = 0; i < ans.length; i++) {

let x = cx + cos(i * 360 / ans.length) * cr;

let y = cy + sin(i * 360 / ans.length) * cr;

noStroke();

fill(255, 230, 238, 50);

ellipse(x, y, 150);


fill(255, 200);

ellipse(x, y - locationAlt, ans[i].White * magnifier);

fill(255);

// textSize(12);

// textStyle(NORMAL);

// text(ans[i].White, x, y - locationAlt * 1.4);


fill(153, 102, 51, 200);

ellipse(x + locationAlt, y, ans[i].Hispanic * magnifier);

fill(102, 51, 0);

// textSize(12);

// textStyle(NORMAL);

// text(ans[i].Hispanic, x + locationAlt * 1.4, y);


fill(0, 200);

ellipse(x, y + locationAlt, ans[i].AfricanAmerican * magnifier);

fill(0);

// textSize(12);

// textStyle(NORMAL);

// text(ans[i].AfricanAmerican, x, y + locationAlt * 1.5);


fill(153, 51, 255, 200);

ellipse(x - locationAlt, y, ans[i].Other * magnifier);

fill(102, 0, 180);

// textSize(12);

// textStyle(NORMAL);

// text(ans[i].Other, x - locationAlt * 1.5, y);


fill(150);

textSize(14);

textStyle(BOLD);

text(ans[i].answer, x - locationAlt / 1.3, y - locationAlt /2, 120, 80);

textAlign(CENTER, CENTER);

}

}


function gotData(data) {

datingInfo = data;

}


JSON file

{

"resource" : "https://www.statista.com/statistics/809434/us-spending-willingness-for-adult-dating-website-or-app-membership/",

"title" : "Users willingness to pay for premium fees for dating apps or services in the United States as of January 2018, by ethnicity",

"response" : [

{

"answer" : " I currently do ",

"White" : 10,

"Hispanic" : 32,

"AfricanAmerican" : 20,

"Other" : 15

},

{

"answer" : "I don't currently, but I would in the future",

"White" : 9,

"Hispanic" : 12,

"AfricanAmerican" : 16,

"Other" : 10

},

{

"answer" : "I don't currently, but I have in the past",

"White" : 20,

"Hispanic" : 15,

"AfricanAmerican" : 16,

"Other" : 13

},

{

"answer" : "I would not",

"White" : 53,

"Hispanic" : 36,

"AfricanAmerican" : 37,

"Other" : 55

},

{

"answer" : "Don't know",

"White" : 8,

"Hispanic" : 5,

"AfricanAmerican" : 11,

"Other" : 7

}

]

}


#ITP #ICM #dataVisualization #onlineDating #ethnicity #premium #subscription