A webpage project in TypeScript that displays information on a week's worth of Tweets tagged with #Runkeeper.
Languages and Skills used: HTML, JavaScript, TypeScript, Vega-Lite, Regular Expressions, jQuery
Tools: Visual Studio 2019
Fall 2022
A Week of #Runkeeper Tweets
Overview
In this project for my User Interface Software class at UCI (ICS 133), I used JavaScript and TypeScript to create a webpage report that could help a potential researcher understand a week’s worth of Tweets from the popular running app RunKeeper. The three tasks to complete for this assignment were as follows:
-
To summarize tweets on the About page
-
To identify the most popular activities on the Activities page..
-
To add a text search interface to the Description page.
Note: The basic HTML structure of these webpages were provided for me; my assignment was to complete the webpages by filling in the missing information
Summarizing Tweets
The first task was to give a bit of summary information to a researcher interested in the Tweet data by identifying the dates of the earliest and latest Tweets in the set, how many of each category (Completed event, Live event, Achievement, or Miscellaneous) exist, and how many of the completed tweets contain user-written text.
Identifying dates
The provided Tweet TypeScript class had a member attribute named time that contained the date of each Tweet as a JavaScript Date object. I used this attribute to find the earliest and latest Tweets and their respective dates, and displayed them to the About page by modifying the respective jQuery objects.
Tweet categories
There were four categories that the Tweets could be divided into:
Completed events, where the user is Tweeting about an activity that they recently finished.
-
Live events, where the user is Tweeting that they are currently doing an activity.
-
Achievement, where the person is indicating an achievement they have reached or a goal they have set.
-
Miscellaneous, for all RunKeeper-related discussion which did not involve posting about an activity.
In order to figure out how to categorize these Tweets, I looked through the Tweets in the dataset. I found that they followed a similar structure depending on the category they fell under, and created rules using Regular Expressions based on what I found that would sort each Tweet into these categories.
User-written tweets
Some of the Tweets also contain text beyond what was automatically generated by the RunKeeper app; these are user-written Tweets, and after inspecting the Tweets in the database, also followed a similar structure. I devised rules that would figure out how to determine whether a Tweet was written by a human user. In order to also extract the portion of user-written text from these Tweets, I used Regular Expressions. This code was written within the Tweet TypeScript class.
Fig 1: About page
Identifying Most Popular Activities
This task was to identify the types of activities and distances in the completed tweets and create visualizations that would show how distance varies by activity type and day of the week. I used JavaScript DOM methods to programmatically edit the spans for each question and Vega-Lite to create the graphs.
Determining activity type and distance
I used regular expressions to extract the activity type and distance from each Tweet. I also converted all distance values to miles, as some were in kilometers. I used regular expressions to also determine whether a distance was written in miles and kilometers.
I found that the three most popular activity types were running, walking, and biking.
I edited the jQuery objects to show my findings for this task, which included the three most popular activities, the longest and shortest activity types, and whether the longest activities tend to be on weekdays or weekends.
Graphing activities by distance
From my findings, I used VegaLite to create three data visualizations:
-
A plot of how many of each type of activity exists in the dataset.
-
A plot of the distances by day of the week for all of the three most tweeted-about activities (which should be stratified by color).
-
A plot of the distances by day of the week for all of the three most tweeted-about activities, aggregating the activities by the mean.
The latter two plots alternatively appear when the button with the “aggregate” id is pressed.
Fig 2: Top of Activities page, containing a plot that shows the number of activities in dataset
Fig 3: Bottom of Activities page, which shows toggling between aggregate vs. means plots
Text Search Interface
For this task, I implemented a search interface that would allow a researcher to look up tweets that contain a specified text input.
Implementing the search box and search results
As a user types into the search box, the table updates with each keypress and contains the Tweet number, Tweet text, and activity type. I used event handlers and filters in order to display the tweets that matched the search input.
I also used regular expressions to ensure that the links in the Tweet text were clickable, so that a link to the original Tweet opens up when the link is clicked.
Fig 3: Text search interface that displays search results in a table
Source Code
My school prohibits sharing the source code publicly, but if you are an employer interested in viewing the private GitHub repo, please contact me either via email or LinkedIn!