This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Create Labels from Non-numeric Data with Ordinal Scales in D3 v4

1:40 D3 lesson by

When your data contains discrete, non-numeric property values that you need to format or convert before displaying, d3.scaleOrdinal() is the API you need. Maybe you need to convert a “pass”/”fail” field to “green”/”red” for coloring your bubble chart? This lesson shows you exactly what to do.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

When your data contains discrete, non-numeric property values that you need to format or convert before displaying, d3.scaleOrdinal() is the API you need. Maybe you need to convert a “pass”/”fail” field to “green”/”red” for coloring your bubble chart? This lesson shows you exactly what to do.

While a quantized scale will map a continuous domain to a discrete range, sometimes you also have a specific set of values in your domain that you know you want to map to specific values in the output range.

For that, we're going to change from a quantized scale to an ordinal scale. Now we change this to scale.ordinal, update our variable name. Now we'll keep our output range of red, white, and green, but we wouldn't be using this if our input domain was numbers between 0 and 100. We would use this if we had discrete values.

Maybe we have a rating for performance on a test. We may say poor, good, and great. Some dimension of our input data here is going to have properties that hold the values poor, good, and great. When we see those, we want to map them directly to red, white, and green.

If we update this, instead of passing in 22, we'll pass in good. You'll see that we then get white as the output. We can do a couple more here. We'll do them in a different order, just so we can see that this is based on the data.

There, you see good is mapped to white, great is mapped to green, and poor is mapped to red. It's really just done by index, or position in these arrays. You can imagine this as something where you've got a non-numeric value that you need to map to a specific output value.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?