S

• Before start talking about scale, there are several things need to be clearified.
  Assume that we have a svg element which has
  height = 300
  and
  width = 400
  , what if we now encounter a large value in our dataset which is over 300? Or an small value dataset like
  [1, 2, 3, 4]
  which is very hard to tell the difference between each of them in a 300*300 canvas.
• That's why we use scale. How does it work? Now we want to visualize this array
  [1, 2, 3, 4]
  on a canvas(width: 400, height:400). We first get the partition in dataset(1 => 1/4), and we convert it on the view side(1/4 * 400 = 100). (Using height or width depends on what you need)
• domain()
  is for data
• range()
  is for view
• Know above is enough to use scale, it's very powerful and simple.
• Check the graph beside. Orange one is non-scaled, the blue one is applied to height scale.
• Note: Scale can also apply to color.

Back to menu