Creative Coding · Session c15

Data & Charts

Turn a list of numbers into a picture you can read at a glance.

Your game in c14 used arrays to hold fireflies. Arrays can hold something else too: data. Monthly rainfall, feed bills, scores. A list of numbers is hard to read, but a bar chart shows the story instantly. Today your code will draw one, and the key tool is a function that converts a data value into a number of pixels.

Picture the conversion: map()

map(60, 0, 120, 0, 160) asks: 60 is halfway along 0 to 120, so what is halfway along 0 to 160? The answer is 80. You met this idea in maths as a linear rule: same fraction of the way along both scales.

Live sketch: rainfall in three cities

Choose a city. Tap a bar to read its exact value. Notice how the bars rescale so the tallest one always fits the canvas.

let labels = ['J', 'F', 'M', 'A', 'M', 'J'];
let values = [40, 35, 45, 60, 85, 110];  // mm of rain

function setup() {
  createCanvas(420, 280);
}

function draw() {
  background('#ffffff');
  let biggest = max(values);
  let slot = (width - 60) / values.length;

  for (let i = 0; i < values.length; i++) {
    let h = map(values[i], 0, biggest, 0, 190);
    let x = 40 + i * slot;
    fill('#06b6d4');
    rect(x, 240 - h, slot - 10, h);   // y grows downward, so start higher
    fill(20);
    text(labels[i], x + 8, 258);
  }
}

Why `240 - h`?

On a canvas, y = 0 is the top and y grows downward (c01). The chart's floor sits at y = 240. A bar that is h pixels tall must start h pixels above the floor, so its top-left corner is at 240 - h. Forget the subtraction and every bar hangs from the floor line like a bat.

A chart can mislead. The sketch scales bars to the tallest value, so two cities with very different rainfall can look similar. Always read the scale, as you do for graphs in maths and geography (g02).

Quick check: predict the bar height

With biggest = 110 and the pixel range 0 to 190, what height does map(55, 0, 110, 0, 190) give, and what is the bar's top y-coordinate on a floor at 240?

Answer: 55 is exactly half of 110, so the height is 95. The bar's top is at 240 - 95 = 145.

Challenges: make the chart yours

Change the data: replace values with six numbers you invent, such as your horse's weight in kg each month. Does the chart still fit the canvas? Why, even with a very large number?
Predict: if values is [10, 20, 40] and the pixel range is 0 to 160, write the three bar heights on paper before running anything. Then check by running.
Bug hunt: change 240 - h to just 240 and run it. Describe exactly what you see, then explain it using "y grows downward".
Add a label: draw each value as text just above its bar. You need a position of 240 - h - 6. Why minus again?
Make it honest: change the lowest end of the map() range so the bars start from a non-zero value, such as 30. Which bars look dramatically different now, and why can that fool a reader?
Create: chart something real from your week: minutes of riding, practice, or reading per day. Give it a title with text() and units on the vertical side.

Next session → c16: Objects & Classes
Your chart keeps labels and values in two separate arrays, and you must keep them lined up by hand. Next you will learn to bundle related facts into one object, so each bar knows its own name and number.

Data & Charts

Live sketch: rainfall in three cities

Why 240 - h?

Ask your tutor

Why `240 - h`?