Data Visualization and External APIs

The goal of week seven’s assignment was for students to use an external data source and build a sketch implementing the data.

I began thinking about possibilities for this assignment and my thoughts went directly to comparing novels by two of my favorite authors, Ernest Hemingway and Jack Kerouac. After spending some time trying to find the right API I realized that the task might be too large. So I decided to use the NYT API and see what I could find out about one of the authors then work from there. There were many more articles written by and aboutHemingway than Kerouac so I decided to create a visualization based on his writings with the NYT.

Screen Shot 2018-10-23 at 9.39.14 AM.png

Overall I found the NYT API easy to navigate and use. That along with the help of Dan Schiffman’s series 10 videos I was able to import the data I wanted and begin to analyze.

Where I ran into issues was when I realized that I couldn’t actually access the whole article in the NYT API just the main headlines. This along with the limit of 10 articles began to limit my options.

Finally, I decided to visualize the most used words in his article’s headlines as a sort of proof of concept for my larger idea. I was able to get all of the words into a dictionary and then perform the manipulations on the words to cut out unnecessary characters. Where I ran into trouble was when I tried to visualize the words I could’t figure out a way to access the dictionary to pull the most used words from. Below is the final visualization I was able to create with the words.

Screen Shot 2018-10-23 at 9.46.18 AM.png

I am planning on continuing to work on this project but due to time constraints at the moment I had to call it at creating this basic animation using words that I had to input myself.

See the Program here.


let urlOne = '';
let apiKey = '8be8b3ad946d476aafdcc023aec18d47';

let webURLOne = urlOne + '&api-key=' + apiKey;
let wordHolder;

//global array for Hemingway data
let hem = [];
//let headlines = [];
let hemWordCounts = {};

function setup() {
  createCanvas(400, 400);

  title = createElement('h1', 'Ernest Hemingway and His Most Used Words in His Written Articles').style('text-align', 'center');

  //load json files
  loadJSON(webURLOne, gotData);


function draw() {

  let mod = 0;

  // loop through the array and create the shapes based on the
  //use of words in hemingways titles.
  for (let i = 0; i < hem.length; i++) {
    for (let j = 0; j < hem[i].length; j++) {

      if (hem[i][j] === "Madrid") {
        ellipse(random(hemWordCounts.hemingway) + 250, random(hemWordCounts.hemingway) + 100, 10 * mod, 10 * mod);
      } else if (hem[i][j] === "Writer") {

        fill(random(hemWordCounts.ernest), 40, hemWordCounts.war);
        rect(random(hemWordCounts.ernest) + 100, random(hemWordCounts.ernest) + 200, 10 * mod, 10 * mod);
      } else if (hem[i][j] === "Spain") {
        fill(random(hemWordCounts.spain), hemWordCounts.spain, 100);
        ellipse(random(hemWordCounts.spain) + 30, random(hemWordCounts.spain) + 300, 10 * mod, 10 * mod);
      } else if (hem[i][j] === "War") {
        fill(random(hemWordCounts.war), hemWordCounts.war * 40, random(hemWordCounts.war));
        ellipse(random(hemWordCounts.war) + 350, random(hemWordCounts.war) + 350, 10 * mod, 10 * mod);



This function goes through each value in the hem array and checks for 
the frequency of each word, assigning that word a value in the hemWordCounts object

function stringCompare() {


  for (i = 0; i < hem.length; i++) {
    for (j = 0; j < hem[i].length; j++) {

      wordHolder = hem[i][j].toLowerCase().trim(' ');
      // console.log(wordHolder);

      // if this word is not already a property of the wordCounts object, create it with the value of 1
      if (!hemWordCounts[wordHolder]) {
        hemWordCounts[wordHolder] = 1;
        // console.log("Added : " + wordHolder);
      } else {
        // if this word IS already a property of wordCounts, then increase its count value

  //iterates over all the values in the dictionary
  let value;
  // console.log(hemWordCounts)
  Object.keys(hemWordCounts).forEach(function(key) {
    value = hemWordCounts[key];
    //console.log(key + " : " + value);


function gotData(data) {
  let articleInfo =;

  //loop thrrugh the articles and assign them to array
  for (i = 0; i < articleInfo.length; i++) {

    //let headline = articleInfo[i].headline;
    let hemArray = articleInfo[i].headline.main.split(' ');