Skip to main content

Week 2: Visualise data from an API

Recap

1. From server (node.js) to client (browser) using a WebSocket

server-to-client-websocket.png


#### 2. Request API data and output in command line interface (CLI)

node-to-API.png


3. Request API data and output in command line interface (CLI)

node-api-to-browser.png

Task

Today we would like you to focus on visualising some data from an API in the browser.

The API data will be coming from a server hosted in the LCC Prototyping Lab. The data itself is being generated from sensors scattered around the room. Look at the following URLs to for examples:

http://lab.arts.local:2020/api/imac01/distance
http://lab.arts.local:2020/api/imac02/light
http://lab.arts.local:2020/api/imac03/pot
http://lab.arts.local:2020/api/imac04/btn

In groups of 2 start by creating an empty project directory and some empty files with the following structure (changing 'project-name' to something relevant to you):

├── visualising-api-data/
    ├── client/
    │   ├── index.html
    └── server/
        └── app.js

  1. Before you start using API data in your code it is important to understand how it is structured. You can do this using using the Advanced REST Client (ARC) or with simple API data you can just open the URL in a browser window.

  2. Now you understand the structure you can start by requesting the API data using a Node.js script and output it to the CLI/Terminal.
    You can use the server code from Exercise 2 from Week 1 as a starting point

  3. Because we are now working with dynamic/changing data we want to check the API regularly for changes. To do this you will need to use a setInterval function to repeatedly run the same code.
    For an example of using setInterval see Exercise 1 (Server code) from Week 1 or this simplified example of using setInterval on Codepen.

  4. Once we are successfully requesting API data at a regular interval you need to send the data to the browser using a WebSocket
    See Exercise 3 from Week 1 of this Workshop

  5. Now the dynamic/changing data from the API is within your client/browser JavaScript use p5.js to visualise that in an interesting way.
    See the random-ball.html file for an example of using p5.js

Back to top