Working with Api’s – Tag Cloud



In this experiment, we had to explore connecting APi’ and make use of the data we received from it. I explored various api other than the one we worked on in class, called Wolfram. The data we were working with was mainly text and the challenge was to take the text data received from different queries and make it into something visual on the screen. I used p5.js for this experiment but we were not limited to just using this framework. I had several ideas of using other data sets and frameworks and tried a few but they were not realtime, I could not query and get back an interactive response, like I could with the setup of PubNub and Wolfram, setting up the others needed hosting your own servers and I did not have time to explore that. I settled on using the Data from Wolfram and creating a Tag Cloud with displays in different colours.


Git Hub Link:

I explored using node.js, the desktop version of processing and plain html 5. My main idea was to download stock data and convert it to a chart. This idea was possible in processing after I downloaded a CSV file from., they gave me an Api key and the stock data. This I could accomplish but the data would not be real time and there was no interactive loop to call the data with a query from the browser.

I use the code samples from to explore using the data set and visualizing them in processing.

The skillshare class was also very good to explore how to visualize data I have in the form of Json or Csv files.

The API:

I settled on using the API we setup in class and that had an interactive component and it was sending back text data from different Queries we sent it through PUBNub.

One of the ideas was to convert the Colour text string received into its corresponding RGB value and show it on the screen as a palette. I thought this would be a relatively straight forward process but like with anything, simple does not mean easy. For one the text I was getting back was a string with many words and I would have to evaluate for each letter in the string by making it an array, then there was the problem that sometimes what I got back were things like “Light Blue” which needed my code to understand that pair as a colour and convert it based on that. I was able to make the code into an array and check for words but I got dumped in using a dictionary to map the words to rub codes and then put that back on the screen, the fact that RGB is in brackets and are integers seemed to be the biggest problem. I scrapped that idea for this assignment as I need to brush up my coding to get past that coding challenge.

In the process I did find that I could display visual data based on the input I received, I understood how an array can be broken down and how PUBnub sends back a data string.

I used this to inform my next experiment, I made a new sketch and started from Scratch, I made use of the text I was reciting and tried to break it up into single words, for this I went down the rabbit hole of working with text in P5.js, I explored a .js add-on for P5 called:

This is a javascript library is compatible with P5.js and also allows for sophisticated functions for working with text. I would like to say this was needed but it was not, its a good resource I now have for future projects but I could not use it for this project.

It was with a very few lines of code that I was able to create a Tag cloud with the text I received, this proved to be very satisfying and also very effective as the communication was real-time and it always created a new visual pattern based on the query. I would like the add a bit more of finesse to the final file but for now, I have a working prototype which uses the data received and Dows something interesting with it.

This was the Result:


References: ( Finance Api) ( Processing Code for Data Viz) ( Javascript library for working with text)

Code from Nick

Leave a Reply