Excited to dive into data integration through my sketches this week! I was especially keen on working with large and dynamic datasets using APIs (application programming interfaces). I'm always fascinated by the underlying story of how information is organized in any given database because it's never arbitrary. And what happens when you arbitrarily relate otherwise disparate databases together? This week presents the perfect opportunity to mash some systems together and perhaps learn something through their juxtaposition--either about their respective structures or about the requested data itself. I set my goal to query two different databases with the same input and display the results side-by-side. I was curious to compare dictionary definitions with images tagged with the same word. For this I chose Wordnik, an online dictionary, and Pixabay, a platform for sharing copyright free images. Both sites provide easy to access to their APIs with clear documentation for newbies like me.
To simplify the process, I broke my process into three parts:
1) Figure out how to query word definitions from Wordnik in P5.js
2) Figure out how to query images from Pixabay in a separate sketch
3) Combine the sketches together
As I started Part 1, I again realized multiple steps were necessary. First, find the data: I used Wordnik's developer tools to customize a request URL to deliver ten definitions for any given word. A best practice at this stage is to paste your URL into a browser tab to see if you actually see any data. (I installed the Chrome extension JSON formatter to make the information easy to read.) With the data return verified, I wrote a sketch that printed the definitions for the word, red, to the P5 console using a for loop and the word object's property, text. I also broke up the API call into separate parts to prepare for submitting word queries dynamically down the line. Next, I figured out how to display the definitions on the screen as a paragraph DOM element. I'm not sure if this is the best choice considering my ultimate goal for this project, but I needed a starting place. Finally, I followed the tutorial in Video 10.6 to include a user input field and submit button to query the Wordnik API with any word of my choice. Querying multiple words in succession displays the definitions in kind on the page. Currently, I must restart the sketch to clear the data on the screen. I'm sure there is a way to do this with code.
With the Wordnik API out of the way, I set my sights on learning how to use Pixabay's. So step 1: determine my request URL, break up the API call, and print the data to the console. Then, step 2: program the requested images to display on the screen. And finally step 3, added a user input field.
With just some slight tweaking of variable names, I combined the two queries into one sketch here. I left off any page styling to focus on the mechanics of making this work and but also kept it bare of any context for what you see on the page. What meaning is gained, lost, or confused without this background information? It is irresponsible? Is it fake?
I think it is certainly fun experiment, but do you what is even more so? Combining the definition query with the giphy example from the homework wiki. Click through to have a go at it yourself!