Displaying a Chart
Here’s the weather for the coming week, here in Pittsburgh. Let’s create a simple visualization of the daily high and low temperatures.
If something is worth doing, it’s worth doing well, and if you’re visualizing data, it’s always a good idea to add axes, labels, and a scale, so that the values can be read easily. Here’s the same data as above, but plotted to enhance the legibility of the data (for example, by stretching the vertical display range). Note how we use the handy
map() function in order to stretch the data to the range we want, and how the entire graphic is able to scale dynamically with the canvas.
It’s also possible to automatically scale your data to the visible display area. First one finds the maximum and minimum values of your data; then you use these as the input-range arguments to
(In the examples to follow, for the sake of having brief code and in order to focus on other issues, we’ll skip the labels. Still, we just wanted you to see what’s involved in drawing a proper chart.)
Searching through an Array
In the next example, we exclusively focus on the daily high temperatures. We wish to find out which day has the coolest (lowest) high temperature. To do this, we have to search through all of the data in the array. This is a really important pattern.
In the next example, we search for the day of the week, which has the least difference between its high and low temperatures. Note how we use functional abstraction in this example.
Sometimes one’s data spans several orders of magnitude. Consider the following table of data, representing typical weights (in grams) for different species of animals:
Chick 50 Hamster 60 Rabbit 1000 Chicken 1500 Cat 2000 Small dog 2000 Medium dog 5000 Monkey 5000 Large dogs 8000 Human 90000 Pig 150000 Cow 800000 Giraffe 900000 Horse 1200000 Elephant 5000000 Large whale 120000000
The whale, at 120 million grams, is more than 2 million times more massive than the chick. In order to display such values on the same screen, we take the
log() of each value before displaying it. You can see this when you click in the sketch below.
Shallow, Reference and Deep Copies
There are three kinds of copies: shallow (top level, by value), reference (shared) and deep (complete, by value).
A reference copy, on the other hand, acts like a nickname or alias for the original. Suppose you have a nebbish friend named Walter. Now suppose there’s a school bully, and you hear him bragging that he gave “Wally” a painful wedgie. Should you be concerned for for your friend Walter? Yes, yes, you should.
In the example below, a shallow copy and a reference copy are made from an array of numbers. When the user presses ‘A’, it reverses the shallow copy. When the user presses ‘B’, it reverses the reference copy. Observe how the original is affected (or not).
A deep copy comes into play when an array contains another array or objects. Consider an array of arrays: [[1, 2], [3, 4]]. A shallow copy would copy the elements [1, 2] and [3, 4] by reference, so these would be shared between the original and the copy. To make the original and copy completely independent, you need a deep copy, which will make new independent copies of the arrays [1, 2] and [3, 4].
Push, Pop, Shift, Unshift
“Stacks” and “Queues” represent two different ways of using arrays. Consider the following two examples:
// Stacks: Last In, First Out (LIFO) var stack = ; stack.push(2); // stack is now  stack.push(5); // stack is now [2, 5] var i = stack.pop(); // stack is now  print(i); // displays 5 // Queues : First In First Out (FIFO) var queue = ; queue.push(2); // queue is now  queue.push(5); // queue is now [2, 5] var i = queue.shift(); // queue is now  print(i); // displays 2
Here’s a demonstration program.
Other functions we should look at: