Adding color with scales

In this video, we're going to add some color to our charts.

Right now all of our bar charts are black. Let's start simple just by making all the bars blue. We'll come to our code, and open our bar chart component, and down here when setting our attributes, we can add a new attribute for fill, and we'll just paste in this hex color for blue:

.attr('fill', '#2196f3')

Nice. And that's how we can set the fill for our charts.

Now what we want to do is add a bit of variety here, so that taller bars appear darker, since they're more likely interesting points in our charts.

For this we can come back, and we can actually make another scale. The color will be based on the height, so let's come up here and copy our yScale, and we'll call it color. Now, the domain will be the same as our Y scale - because its based off of the count property from our dataset - but the range will change, and instead of going from 0 to 100, it will go from a light blue to a dark blue. So let's come down to line 39, and grab our dark blue, and that will be the maximum value of the range; and then I have another hex value here for the minimum.

let color = scaleLinear()
  .domain([ 0, Math.max(...counts) ])
  .range([ '#bbdefb', '#2196f3']);

And now we have a color scale that we can use to dynamically set attributes. So we'll come down to our fill attribute, and now that it's dynamic we'll make it a function. It takes in data, and then we'll pass in data.count to our color scale.

.attr('fill', data => color(data.count))

Let's save this, come back, and now looking at our bars, we see the tallest ones are darker and the smaller ones are a bit lighter - which just makes the aesthetics a bit nicer and makes it easier to differentiate.

Ok, right now all of our charts are blue, but we want to make each chart its own color, so let's do that next.

Let's come to our code, and we'll make the color a property that you pass into the chart. So let's come up here, define a new color property and we'll set its default value to blue. And then I'll come up here and I'll define a new constant called COLORS to be used for our configuration. And we'll make the first color blue, and I'll just grab our array from line 28, and we'll use that for blue. And then I'll add one for green, and I've got these two green values here, and finally one for red.

const COLORS = {
  blue: [ '#bbdefb', '#2196f3' ],
  green: [ '#c8e6c9', '#4caf50' ],
  red: [ '#ffcdd2', '#f44336' ]
};

And then down for the range of our color scale, we'll access the COLORS constant, and then we'll call this.get('color') to access the correct range.

Ok let's save this and make sure everything's working. Ok, everything looks good, and our charts are still all defaulting to blue. But now we can open our blog post template, we'll leave the first chart blue, but we'll make the second one color green, and we'll make the third one color red.

Save this, come back - and now our charts are looking great! We've got three different color charts, and a super simple API for changing the color.

D3's scales are a great primitive with tons of use cases, and interpolating between hex colors is just another great feature of them.

In the next video we'll add some more interaction to our bar charts.