ICM Media Week 6: Visualizing Data Using APIs

For this week's sketch, I decided I wanted to experiment with some of GIPHY's API Endpoints, specifically the Translate Endpoint. I had used GIPHY inside of Slack before, so I was familiar with their "magic" algorithm for gif searching using sentences or phrases. Ultimately, I wanted to see how the algorithm could handle more complex and confusing phrases. My original idea was to use text from a short story and see how GIPHY would visualize it. But I honestly don't read a lot of short stories and didn't know where to start. My partner suggested I use lines of poetry as the search input for GIPHY, which I thought was a great idea!

I found this database that has already organized a large number of poetry by famous poets into a JSON format. Their API was simple and easy/modify, and I spent quite some time perusing their collection They have A TON of Shakespeare on this site and many of his sonnets. I thought it would be fitting to use his sonnets that have themes of winter to reflect the change of the season here in New York. I was able to use the PoetryDB API to filter out his sonnets using the keyword "winter".

What Worked

The sketch came together really nicely, although it took me quite a bit of time to get the syntax worked out for accessing the individual sonnet lines in JSON file. I forgot to use the inspector and finally figured it out after 30 minutes of silliness. It was also difficult to see whether or not the code is functioning as intended. I created a counter to run through the lines in the sonnet, but it was hard to tell if the GIPHY search results were working. In some lines it's obvious that the gif matches the text, but in others it's hard to tell. I suppose this means that the algorithm deciding what images to display has trouble with some of the phrases that I fed it, so maybe the search engine is not as sophisticated as I thought, or it's just not trained to understand Shakespeare. Overall this was an interesting result!

What Didn't Work

I occasionally get this error:

Cannot read property 'original' of undefined (sketch: line 68)

It has something to do with the image source I'm grabbing from the JSON file, but I'm not sure how to resolve it. The code still runs and the image either loads fine, or doesn't load but the error will still come up.

Here's the bit of code that I believe is the culprit:

function getOneImage() {
  myImg = loadImage(giphy.data.images.original.url);
  started = true
}

I'm assuming the error means the code can't locate the "original" format of the gif. I'm not sure if each gif that is pulled from the search query has the "original" format in the JSON file. I'll have to experiment a bit more to see if there's a better format to select that's more reliable. Or there's an issue with how my code is written that's causing the error to show up. In which case, I have no idea how to resolve. it.

What I learned

I've been looking forward to working with APIs. I think it can lead to some really creative ways to visualize all this data that these massive corporations are collecting and storing. It feels like a lot of new possibilities have opened up now that I roughly understand how it all works. I've always been interested in how machines talk to each other and how human language fits in to that equation, so it was fun working on this sketch this week. I'm hoping to continue using what I've learned this semester to make some really cool data-driven web art.