Name: Color Scales
Uploaded: 2014-01-08T08:04:44-06:00
Description: In this addition to Ben's series of lessons on D3, you'll explore the use of color scales in your D3 charts.

Get Started With D3

Basics of SVG

Scaling Basics

d3.max

rangeBands

Color Scales

Quantitative Scales

Margins

Scatter Plot

Debugging with Dev Tools

Basic D3 chart interactivity

Basic Transitions with D3

Creating Axes with D3

Cleaner D3 code with selection.call()

Line and Area Charts with D3

Responsive D3 charts with the viewBox attribute

Use D3 (v3) to Build Interactive Charts with JavaScript

In this addition to Ben's series of lessons on D3, you'll explore the use of color scales in your D3 charts. 

Ben: Just to show the true power of D3 scales and how integral they are to making yourself proficient with D3, we're going to do one more thing here that shows how they can really just interpolate any values that are possible to be interpolated.

We've removed the color of our bar in the style sheet, put our number of bars down to a more reasonable 75 here. What we're going to do next is we're actually going to copy our Y scale and we're going to change it into a color scale. We just change the name there. We're still using D3 scale linear.

Instead of the domain being zero and the actual number, we're actually going to just have it be the max itself and zero. Then our range, instead of using the height of our chart as the range, we're actually just going to give it the names of a couple of colors. We're going to say orange and purple there, because I'm a horrible designer. We're going to get rid of that, we don't need that anymore.

Here, we're actually going to do something, a nice little trick that I actually just learned myself recently, which is that if you're just going to do something like this where you just define a function, pass in the datum, and then return that datum past to a scale. There's actually a shorthand for that, which is just to pass in the scale itself.

Now you can see that our bars are colored according to their value. Where their value falls between zero and the maximum number in the dataset, their fill is going to be set as an interpolated value between orange and purple. You can see that the very smallest values here are orange and the very tallest values are purple.

You can, obviously, change that. You want it to go from yellow to purple. It looks like we've lost our debugging here for some reason. There we go. Yellow to purple there, and you want to change it, make it yellow to green. You can see there, the possibilities are pretty simple.

Just to show that this shorthand is the same functionality as this, I'm just going to copy this, replace it there, and then throw it back in our color scale. You can see it's the same output if you're doing color scale, the datum pass end. You can just pass end the scale without even writing this function, which is pretty nice.

Just to show another option here, if you were to pass in the index and you get the...the problem here, why everything's yellow. We need to change our domain. We're actually not worried about the domain of the data itself this time. In this case, we're actually just interested in the length of the dataset.

Since we're using its position within there, if we change the domain to be from zero to the number at all events, then the position within that dataset is going to determine which of those colors that we get assigned.

Now you can see a nice progression from yellow to green, just based on position.

Color Scales

Share this video with your friends

Course

Use D3 (v3) to Build Interactive Charts with JavaScript