Visualizing Matcha Data
Matcha Data is a public quantified-self-experiment I’ve started in February for my Quant Humanist class. I wanted to measure my activities and track them publicly.
Emojis dictating time and topic
I’ve decided to go for minimalism for the visualization, where emojis will take center stage, and fill the whole screen to add to a user’s curiosity. The idea is for them to hover on the emojis to display the tweets.
This is where I’ve learned REGEX or Regular Expressions – this is no joke, a whole ‘nother battlefield you have to know as a developer. Nevertheless, because Emoji’s are made of unicode, the unique identifier would be grabbing specific regex strings!
This line of code was grabbed from our friends at Stack Overflow!
https://stackoverflow.com/questions/18862256/how-to-detect-emoji-using-javascript
Hashtag becomes Category aka the navigation part of the site.
“For the class “hashtag”, display related tweets!”
What I’ve learned:
API calls using AJAX/JQUERY – $.ajax – what powerful line of code this is!
Because this was my account, I easily plugged in my own information to gain access to the feed. This makes the content update in real time. (IRL!)
Twitter Rest API from Node.JS – https://www.npmjs.com/package/twitter-node-client
As soon as I’ve understood the data I was getting from twitter were actually a bunch of JSON strings, I as if I found the holy grail of object-oriented programming, and understanding the twitter parameter GET USER TIMELINE and added it to the server js file.
app.get(‘/twitter’, function(req,res) {
let data = twitter.getUserTimeline({ screen_name: ‘matchadata’, count: ‘100’}, error, function(data){
res.send(data);
});
GIT CONFLICTS! – The hard part was publishing this on the server using git! I realize that I can’t be using both desktop app and command line.
Head on over to this account to check the first iteration!
LIVE SITE: http://data.krizafern.xyz
CODE: https://github.com/kriziaf/DWD/tree/master/FINAL
Happy Path Journeys 