Workshop: Animating Data

Get a GitHub repository for this workshop in moodle. Homework will be to finish this workshop and publish your code to GitHub Pages, within 5 days.

Animating with open JSON data from the web

Create an HTML file and a linked JavaScript file.

Use the fetch API to get some open data from the web.
Examples of APIs you could use include:
Emojis API
Rick and Morty API
Pokemon API
Open Weather Map
Or look at some open data sources on this page:
Awesome JSON datasets.
Some of the links here might not work, but many will.

Use JSON Beautify to look at the JSON and format/beautify it.

Try putting something onto the canvas using data from the JSON you fetched, then animate it using either setTimeout() or setInterval().

If your JSON data links images animate them on the canvas using requestAnimationFrame().

Or use JSON data to draw and animate shapes on the canvas using requestAnimationFrame()

Or if you have chosen an API which has text or numerical data, draw an animated representation of this data on the canvas element using requestAnimationFrame().

If you have time, add interactivity to your program through an event which manipulates what is drawn to the canvas in some way.