Finding the data
I knew I wanted to do something lighthearted, particularly on the topic of pop culture (I'm kind of obsessed with pop culture).
After watching Shiffman's video on NYT API, I went to NYTimes API page, and did some browsing on what data I could get and make sense of. They have lots of data to work on, but I decided to use "Article Search" API and measure "word count" to (subjectively) measure the "mention-worthiness" of some pop queens over the course of the decade. Basically, find out how many times the names of these celebrities have been mentioned.
I used Shiffman's source file as a base for my code, and did some modifications from there.
Code worked, I was happy, time to move on.
NYTimes API has a call limit, so I used random data as substitutes first.
The most important part of the data is the word count, so I translated and mapped the word count into "height" in the chart.
I also wrote a function that detects which data set is closes to mouseX, so that user could highlight the data using the mouse cursor.
Integrating data & visual
This was the part that almost made me cry from frustration.
First challenge was how to have 2 API calls because I have two input selector boxes. Initially, I had a submit button, so that the API call only happens when I click it. But having 2 API calls at the same time , even with setTimeOut does not work.
So, okay, I made it so that the program calls the API every time user selects a name from selector box. This way, the API calls for the two names are not simultaneous and chronologically linked to each other.
But unfortunately, extracting data of 04 names over 10 years (04 x 10 = 40 API calls) guarantees to give you errors one way or another. The code I got from Shiffman's sample stopped working even though the JSON URLs were correct.
At this point, I decided to just manually download the JSON files and store it in the web editor's folder.
I had to manually copy and paste 40 over times.
Finally the code worked with local files! The source can be accessed here.
Some more problems
Apparently the web editor has issues with loading "locally" stored JSON files and I could not do fullscreen share. Sad.