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

// I picked some specific colors, but you could just
// use .category() and use the defaults
var colorScale = d3.scale.category10()
	.range(['#66c2a5', '#fc8d62', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f']);
svg.selectAll(".dot")
	// ..blah blah more code..
	.style("fill", function(d) { return colorScale(d.Continent); });

Set an even change of color

// With inputs of 0 through 100
// 0 will be beige, 100 will be red
// and in-between numbers will be in-between colors
var colorScale = d3.scale.linear().domain([0,100]).range(['beige', 'red']);
// d.frequency, which is between 0-100, is used to 
// get the color out
svg.selectAll(".bar")
	// ..blah blah more code..
	.style("fill", function(d) { return colorScale(d.frequency); });

Have several different buckets of specific colors (numeric)

// You can also try .quantile() instead of .quantize()
// it's equal count instead of equal range
var colorScale = d3.scale.quantize().domain([0,100]).range(['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']);
// d.frequency, which is between 0-100, is used to 
// get the color out
svg.selectAll(".bar")
	// ..blah blah more code..
	.style("fill", function(d) { return colorScale(d.frequency); });

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!

// Creating it
var x_width = d3.scale.linear().domain([0,100]).range([0, width]);
// Using it
svg.selectAll(".bar")
	// ..blah blah more code..
	.attr("width", function(d) { return x_width(d.frequency); });

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.

// Creating it
var y_offset = d3.scale.linear().domain([0,100]).range([height, 0]);

For a y bar you need to set both the y as well as the height using the scale.

// Using it
svg.selectAll(".bar")
	// ..blah blah more code..
	.attr("y", function(d) { return y_offset(d.frequency); })
	.attr("height", function(d) { return height - y_offset(d.frequency); });

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).

// Creating your scale
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .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.

// Once you have the data, set the domain
x.domain(data.map(function(d) { return d.letter; }));

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)

svg.selectAll(".bar")
	// ..blah blah more code..
  	.attr("x", function(d) { return x(d.letter); })
  	.attr("width", x.rangeBand())

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]).

// Create my scale, 0 will be on the far left, 100 will be on the far right
var x = d3.scale.linear()
	.domain([0, 100])
    .range([0, width]);
# Using my scale to position via cx
svg.selectAll(".dot")
	// ...lah blah more code...
  	.attr("cx", function(d) { return x(d.sepalWidth); })

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.

// Create my scale, make it range from the far left to the far right - `0` to `width`.
var x = d3.scale.linear()
    .range([0, width]);

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.

// Get the largest sepal width
var max = d3.max(data, function(d) { return d.sepalWidth });
// Set the domain of my x scale
x.domain([0, max]);
// Using my scale to position via cx
svg.selectAll(".dot")
	// ...lah blah more code...
  	.attr("cx", function(d) { return x(d.sepalWidth); })

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.

// Create my scale, make it range from the far left to the far right - `0` to `width`.
var x = d3.scale.linear()
    .range([0, width]);

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.

// Get the range of sepal widths
var xRange = d3.extent(data, function(d) { return d.sepalWidth });
// Set the domain of my x scale
x.domain(xRange);
// Using my scale to position via cx
svg.selectAll(".dot")
	// ...lah blah more code...
  	.attr("cx", function(d) { return x(d.sepalWidth); })

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.

var radiusScale = d3.scale.sqrt()
    .domain([0, 100])
    .range([0, 300]);

And then later on we use it

// Using my scale to set the radius
svg.selectAll(".dot")
	// ...lah blah more code...
  	.attr("r", function(d) { return radiusScale(d.frequency); })

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.

var radiusScale = d3.scale.sqrt()
    .range([0, 300]);
// After I've read in my data I can get the maximum
var max = d3.max(data, function(d) { return d.frequency });
// Now it will know the inputs are between 0 and the max value
radiusScale.domain([0, max]);

And then eventually we use our scale

// Using my scale to set the radius
svg.selectAll(".dot")
	// ...lah blah more code...
  	.attr("r", function(d) { return radiusScale(d.frequency); })