# Examples of using scales

You use scales for a lot of things! Instead of calling them “quantize scales” and expecting you to know what they do, here are some use cases.

# Bar/circle/path colors

## Have colors stand for different categories

## Set an even change of color

## Have several different buckets of specific colors (numeric)

# Bar width/heights

## Set the width of a bar on a bar graph

The smallest bar of `0`

is going to have a `0`

width, and the longest bar of `100`

is going to be as wide as the page. Not too complicated!

## Set the height of a bar on a bar graph

Because of how positioning SVG recangles works, the direct measurement for horizontal bars isn’t how long they are, but *where they end*. A bar length of `0`

gets a `y`

offset of `height`

- a.k.a. all the way at the bottom of the page.

For a y bar you need to set both the `y`

as well as the `height`

using the scale.

# Bar positioning

## Position a bar on the x-axis on a bar graph

It’s the same for the y-axis, although the

`rangeRoundBands`

go from`height`

to`0`

instead of`0`

to`height`

.

This scale is for when you have a **categorical variable** - a company or a letter or a name that gets evenly spaced out on a bar graph.

Positioning like this x-axis might not seem like it would use a scale, but it does! The example below aims to evenly space bars across the page (from `0`

to `width`

) and give them a spacing of 10% (`0.1`

).

The only problem is it doesn’t know how many bars you’re going to have! Once you have your data, you’ll need to set the domain of the scale, **giving it the x axis**.

Then you can finally use it to both position your bars and set their `width`

(or `height`

, if you’re going down the y axis)

# Circle positioning

## Circle positioning if you know your range

**We position on the x axis below**, but it’s the same for the y axis, although you use `.range([height, 0])`

instead of `.range([0, height])`

.

## Circle positioning with 0-max range

This is a two-step scale - first you set up the scale without the domain, then you add it in once you see your data.

Now you need to read in your data, and use that data to set the domain. We’ll use `d3.max`

to get the maximum value of the domain.

## Circle positioning with min-max range

This is also a two-step scale - first you set up the scale without the domain, then you add it in once you see your data.

Now you need to read in your data, and use that data to set the domain. We’ll use `d3.max`

to get the maximum value of the domain.

# Circle sizing

Circles use the `d3.scale.sqrt()`

scale type, because it’s how you grow area instead of simply radius.

## Circle sizing if you know your range

I have values between 0 and 100 and want to have a circle with a radius between 0 and 300 pixels.

And then later on we use it

## Circle sizing from 0 to max

I don’t know what my values are until I read them in, so if I want to set my maximum data point to be 300 pixels, I need to have a two-step process to set up my scale.

And then eventually we use our scale