Assignment 6: Visualizing Data from an API

Due: Tuesday, 11/3/26, before class.

Goal

For this assignment, you'll get data from an API and then do something interesting with it using a front-end library. What "interesting" means is up to you: a chart that compares things in a way that tells you something, a p5.js sketch where the data becomes the characters, sizes, and colors of a drawing, an animation, even a small game.

The main thing I'm looking for is that the library is working with the data you fetched, so that the data is what decides what shows up on the page. For example, a chart built from numbers you typed in yourself, or a p5.js sketch that sits next to some text from an API without using it, would miss the point of the assignment.

Data Sources

You can pick any one of these. They're all free and don't need an API key or sign-up, and each name links to that API's documentation. Before you start writing code, it helps to open the URL in a browser tab and look at the JSON it sends back.

• PokéAPI: one Pokémon at a time, by name or number.
  https://pokeapi.co/api/v2/pokemon/pikachu
  Numbers: data.height, data.weight, and data.stats, an array of six stats (hp, attack, defense, ...). Each one looks like { base_stat: 35, stat: { name: "hp" } }. Image: data.sprites.front_default.
  Idea: a bar chart of one Pokémon's stats, or two Pokémon side by side.
• Studio Ghibli API: all 22 Studio Ghibli films in one array.
  https://ghibliapi.vercel.app/films
  Numbers: release_date, running_time, rt_score (Rotten Tomatoes score). Also title, director, and image.
  Idea: every film's score as a bar chart, in release order.
• Star Wars API: characters, 10 per page.
  https://swapi.dev/api/people/ (all, in data.results) or https://swapi.dev/api/people/1/ (just one)
  Numbers: height (cm), mass (kg). Also name, eye_color, hair_color.
  Idea: draw the characters side by side, to scale.
• Dog API: dog breeds, 30 per page.
  https://dogapi.dog/api/v2/breeds
  Each breed is in data.data, with everything inside attributes: attributes.name, attributes.life.max, attributes.male_weight.max, and 1–5 scores like attributes.traits.energy and attributes.traits.barking.
  Idea: which breeds are the most energetic? Or draw each breed as a circle sized by weight.
• Harry Potter API: 400+ characters in one array.
  https://hp-api.onrender.com/api/characters
  Data: name, house, yearOfBirth, image. Not many numbers, so you'll count things yourself.
  Idea: a pie chart of how many characters are in each house.

If you'd like to use a different API, check with me first. It needs to work without a key, and some APIs block requests from web pages, so it's worth making sure it'll work before you build on it.

Libraries

p5.js and Chart.js are the recommended ones, and they're what we use in class.

• p5.js: drawing, animation, and interaction on a canvas.
  Start with Get Started, then use the Reference to look up any function (each one has a small example you can run).
• Chart.js: bar, line, pie, scatter, and radar charts.
  Start with Getting Started, then browse the Samples for a working example of every chart type.
• Something else? You're welcome to use a different library, as long as it loads from a CDN with a <script> tag and it's the part that makes your use of the data interesting (for example, Leaflet for maps or Tone.js for sound). A library that only adds decoration wouldn't be enough on its own.

Requirements

1. Use a front-end library, loaded from a CDN
   p5.js or Chart.js (or something else that does real work with the data). Load it with a <script> tag, before your own script.js. For p5.js and Chart.js, use these exact versions so your code matches the docs and the class demos:

   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.min.js"></script>

2. Fetch data from one of the data sources
   Use fetch with async/await to get data from one of the APIs in Data Sources above.
3. The data drives the visualization
   Pull specific values out of the JSON and use them as inputs to the library: the bars or points on a chart, or the sizes, colors, and positions of things in a p5.js sketch. Your visualization should use at least two different values from the data (for example, a Pokémon's attack and defense, or a film's score and its year).
4. Code comments
   Add your own HAND-WRITTEN code comments explaining what is happening in your code.
5. BONUS: A way to change what's shown
   Controls (a <select>, buttons, a text box) that makes a new request and updates the visualization without reloading the page. For example: a different Pokémon, a different character, the next page of dog breeds.

Things That Will Trip You Up

• Looking at the JSON first. Opening your URL in a browser tab, or using console.log(data) and expanding it in DevTools, saves a lot of time. Most bugs here come from a wrong guess at the path to a value (data.name when it's really data.data[0].attributes.name).
• Numbers that are really strings. The Star Wars and Ghibli APIs send numbers in quotes: "height": "172". You'll need Number() before doing math with them.
• await only works inside an async function. Outside one, you'll get "SyntaxError: await is only valid in async functions" and none of your script will run.
• p5.js versions. Lots of p5.js tutorials online were written for version 1 and use preload(), which doesn't exist in version 2. In p5.js 2, you can make setup an async function and await your data inside it instead. p5 waits for setup to finish before it starts calling draw.
• Fetching inside draw(). draw() runs about 60 times a second, so a fetch in there sends 60 requests a second. Fetching in setup, or when a control is used, avoids that.
• Chart.js doesn't notice when your data changes. The usual approach is to make the chart once with new Chart(...), and then when new data arrives, change chart.data and call chart.update().

File and Folder Setup

Same rules as before: folder and file names must match exactly. Your files go in a new 06-api-visualization folder:

csc336-fall2026/
└── assignments/
    └── 06-api-visualization/
        ├── index.html
        ├── style.css
        └── script.js

Once pushed, your assignment will be visible at:
https://<your-username>.github.io/csc336-fall2026/assignments/06-api-visualization/

A Note on Generative AI

Do not use ChatGPT, Copilot, Claude, or any other generative AI tool to write any part of this assignment. Whatever you do, remember that your goal should be to understand 100% of the code that you turn in.

What to Submit

Nothing to submit directly. Your assignment should be publicly available at the address in File and Folder Setup above once you've committed and pushed.