Unit 4 Task 7: Scales

Basic Knowledge about Scales:

  1. Why using scales? From Day 11

Scales are functions that map from an input domain to an output range.

Why do we need scale. Imagine we have this dataset: [ 1, 2, 4, 10, 100, 1000, 50000, 10000000000000]. Now, I ask you to draw a bar chart of this dataset, with the height of each bar corresponding to each data value. The first method we can think of is that the first bar will be 1 pixel tall, the second 2 px tall, the third 4 px tall. But the last data value will be 10000000000000 tall! Can you imagine how big a display we need to accommodate this value?

Instead, we might better set the height of the last bar to be 1000, which is reasonable for most displays people are using today. Then, what will be the height of the third bar that corresponds to the value of 4? That’s what scales do!

  1. Understanding Array From Day 13

What is an array? According to Scott’s book, an array is “a sequence of values, conveniently stored in a single variable.”

  1. How to find the largest number in a dataset

If the dataset is a one-dimensional array, then it’s very simple. Just use the d3.max()function is okay.

For example:

var dataset_01 = [4, 5, 9, 10, 24, 56]

d3.max(dataset_01) //56

However, things get a little bit more complicated when the dataset is two dimensional: an array of arrays. Simply put the dataset into d3.max() won’t give us the largest number.

var dataset_02 = [
  [0, 4], [5, 9], [8, 90], [47, 33], [55,99]
  ]

d3.max(dataset_02) //[8, 90]

Okay, what should we do then? If we want to identify the largest number among all the first number in each array within dataset_02, we can do it this way:

d3.max(dataset_02, function(d){
  return d[0];})

Here, function(d){return d[0]} is called an accessor function, as it helps us access the first number in each array.

How to understand the above code? I would understand it this way. d3.max() need to first have all the numbers we ask it to evaluate, in the example above, all the first numbers in each array. To get the first numbers, we need to use the accessor function. Then, there is a problem, what does the d mean? d3.max() doesn’t know, so we have to specify that. We tell d3.max() that each d comes from dataset_02, then the stupid d3.max() will know where to find each d.