My proposal of the project is here. Code on GitHub.

This is my final sketch about Twitter’s Data visualization:

My processes are as follows:

1. Prepare for talking to twitter: “npm init” and “npm install“

Tutorial:

For windows, use Windows PowerShell instead of Terminal in Mac.

 

2. Set up a Twitter app  and Twitter API Basics

Tutorial:

 

3. Use Express with Node – Use”npm install express –save” to install express.

Tutorial:

 

4.Tryout: Twitter API Client for node

This is how the connection works between localhost and Twitter’s API:

 

I tried the codes of this example: A2Z-F16/week4-twitter/01_twitter_api_oauth/

I got these data pulling from Twitter:

Or changed the query on the web address, by searching “tweets/apple”, I got this Jason data:

Now, everything is prepared. I can draw the sketch based on these live data.

5. Coding in P5.js

I use subLime Text 3 to organize my codes. In

In P5 sketch, I created some dom elements, like the circles of users profile images and the popup layers. And edit their style by CSS.

There are several challenges for me:

1.Get two search inputs in one sketch, which give me two similar arrays by the same function “gotTweets“. I have to add a variable called “candidate” to work as an index to differ the data in each array. The codes work like this:

popularList[candidate][i] = currentRetweet

2.The interaction part: in order to show the text of each tweet, I have to find a way to get their exact index. Firstly, find out it belongs to which array. Second, create an ID for each tweet. Because there are two arrays of data in the same function, the computer doesn’t know which array matches the mouseover’s target.

This is the structure of codes for this function:

if(candidate ==”clinton”){
user_at.id( candidate + i );
user_at.mouseOver(function(){
var popContent = tweets[parseInt((this.elt.id).replace(candidate,””))].text;
var popName = tweets[parseInt((this.elt.id).replace(candidate,””))].user.name;
popuplayer1(popContent);
popuplayer1_name(popName);
});

}else if(candidate ==”trump”){

user_at.id( candidate + i );
user_at.mouseOver(function(){
var popContent = tweets[parseInt((this.elt.id).replace(candidate,””))].text;
var popName = tweets[parseInt((this.elt.id).replace(candidate,””))].user.name;
popuplayer2(popContent);
popuplayer2_name(popName);
});
}

This is the most difficult part for me!!! It cost me almost 6 hours… And great thanks to our residents Rubin, who helped me a lot to finger out this solution.

6. Finally, run the server to see the sketch in the web browser.

Firstly, type the codes below to run the server by Windows PowerShell:

PS C:\Users\ran> cd Documents
PS C:\Users\ran\Documents> cd node2
PS C:\Users\ran\Documents\node2> node server

When it shows this:Example app listening at http://:::3000, which means the server is ready.

Secondly, open a web browser to see the website at this address:

http://localhost:3000/

I have two queries here:

var searchInput=’@HillaryClinton’;
var searchInput2=’@realDonaldTrump’;

So, this website shows the most recent 100 tweets who have “@HillaryClinton” and the 100 tweets who have “@realDonaldTrump” in their tweets.

The line in the middle is a timeline. The users’ profile images are different in size according to their tweets’ retweet counts. And the lines between the objects they “@” are also different in transparency depending on their retweet counts. So you can find out the tweets who have more influence to the public.

If hover the mouse on one user image, there will be a popup layer showing the tweet’s text.

If I change this line of code:  T.get(‘search/tweets’, { q: query, count: 100 }, gotData);

to this: T.get(‘search/tweets’, { q: query, count: 100,result_type:‘popular‘ }, gotData);

And type “Ctrl+C” to quit and run the server again, Twitter will give me the most popular tweets among these 100 tweets: