CountrySize

Ubiquitous Computing Process Journal 4

By Jingpo Li

screen-shot-2019-03-02-at-4-43-50-pm

(CountrySize web application screenshot)


Concept:

CountrySize is a web application that uses Javascript and Wolf Ram Alpha API to visually compare the size of any country you ask. Wolf Ram Alpha API is open to all questions being asked, but we were asked to narrow down the questions in this assignment. Then the user is able to view the responses or answers in an interesting way. The image above is a small demonstration of how this web works.

Objective

I was always curious about how does Google Home,Siri, Alexa work through readily available APIs online. In another class, I had explored the API when building a website: I used Weather online API data to find the real time temperature data online. After I did research, I found there are two APIs, Data API and Question API. This time I had an opportunity to work with question API and I had a hard time find the concept and decide what to do. Because we need to narrow down the questions we ask and visually give the answers to that questions.

Ideation

I am sure you know the biggest country in the world. I think you also know the top 5 biggest counties but I doubt if you know top 15 largest counties. Which country is bigger or how much bigger? When a question is asked, Wolfram Alpha’s response is displayed. People are bored of numbers and sentences. Instead of representing numbers, represent through aesthetic visuals. Instead of designing for affect-as-information, design for affect-as-interaction.

I got inspiration from an existing website called, MapFight. It is a website that compares the size of any two geographical areas.

screen-shot-2019-03-01-at-11-46-12-am

Our assignment is to explore a new way to ask questions and get the results by using specific type of data, so I change a way to ask the question. Instead of asking or typing the whole questions (What is the size of Canada?), just type the country name. MapFight can only compare the sizes of two countries. What I attempt to do is to visually compare the sizes between countries as many as you want.

screen-shot-2019-02-05-at-12-01-46-am

Instead of giving you the answer (The total area of Canada is about 3.86 million square miles), I wanted to use different size of circle to represent the size of the country.

screen-shot-2019-02-05-at-12-11-47-am

Tools & Software

– Text-Bracket
– Wolf Ram Alpha API
– PubNub connecting the Wolf Ram Alpha API

Process book:

Data has gradually become a very important aspect tool in the world today. Data is driving the world, and at this stage when the world is being held to ransom by data and the web, it only makes sense to read information into the lots of data being generated out there. A language like JavaScript is very important in the manner in which a web page gets to be displayed.

The very first step is to have the question bar.

screen-shot-2019-03-02-at-5-20-39-pm

screen-shot-2019-03-02-at-5-21-22-pm

Since I need to get the number after “about” in the answer, I split the sentence.

screen-shot-2019-03-02-at-5-23-58-pm

screen-shot-2019-02-05-at-12-55-23-am

After I got my Wolf Ram Alpha API developer key in class and set up PubNub Account for connecting the web page to the Wolf Ram Alpha API. I started working on the p5 example code. Above is my first successful attempt at accessing split Wolfram Alpha’s response on a p5 canvas.  Split an array so that in every loop, those value are entered separately side by side.

In order to get some visualization, I need to extract the number out of the answer(text). I found out these answers have the same format as “The total area of (country name) is about (certain number) square miles.” That is to say I need to have the number right after “about”.

I used for each statement to find out “about” in an array. The forEach() method executes a provided function once for each array element.

screen-shot-2019-02-05-at-1-00-10-am

screen-shot-2019-03-02-at-5-25-34-pm

When I got my circles working, I decided to design the web page a little bit. I placed a world map on canvas and used random colour for circles.

screen-shot-2019-03-02-at-4-43-50-pm

Challenge:

I still cannot find a way to solve the problem. What I did for the code is to extract the number after “about” and to make a circle based on that number. The thing is the answers have different units and the range of those number is too big.

For example:

“The total area of Canada is about 3.86 million square miles.”

“The total area of Thailand is about 513,120 square miles.”

So if I just used the number after about, Thailand would be larger than Canada and cannot fit in canvas.

I also tried to ask the question in a different way, such as”The size of Canada in million square miles” They don’t have an answer for that question.

 

Leave a Reply