# Changing bar colours based on value

**URL:** <https://talk.observablehq.com/t/changing-bar-colours-based-on-value/5275>\
**Category:** Help\
**Created:** [June 30, 2021, 11:38am UTC](https://talk.observablehq.com/t/changing-bar-colours-based-on-value/5275 "2021-06-30T11:38:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rossburton](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rossburton/32/4939_2.png) [@rossburton](https://talk.observablehq.com/u/rossburton)\
**Post date:** [June 30, 2021, 11:38am UTC](https://talk.observablehq.com/t/changing-bar-colours-based-on-value/5275/1 "2021-06-30T11:38:23Z")

</div>

Hi, newbie here.

I’m drawing a chart from some JSON and want to colour the bars depending on a field in the data: green on ‘success’ and red on ‘failed’. This sounds like it should be trivial but for some reason I’m stuggling to make it actually work… Anyone got an example of mapping a set of values to specific colours?

Cheers,  
Ross

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [June 30, 2021, 12:17pm UTC](https://talk.observablehq.com/t/changing-bar-colours-based-on-value/5275/2 "2021-06-30T12:17:04Z")

</div>

The [d3 scale](https://observablehq.com/@d3/introduction-to-d3s-scales) is what you need.

```auto
getColour = d3.scaleOrdinal()
  .domain([‘success’ ,‘failed’])
  .range(["green", "red"])

```

Calling it would look like this if filling a SVG rect

```auto
.attr('fill', d => getColour(d.result))

```

d.result is the json name for the success or fail

---

<div class="post-metadata">

**Author:** ![rossburton](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rossburton/32/4939_2.png) [@rossburton](https://talk.observablehq.com/u/rossburton)\
**Post date:** [June 30, 2021, 12:54pm UTC](https://talk.observablehq.com/t/changing-bar-colours-based-on-value/5275/3 "2021-06-30T12:54:56Z")

</div>

So I was on the right track with the scaleOrdinal at least. I’m using `Plot.barX()`, but `fill: d => colourmap(d.status)` appears to be using the ‘green’ and ‘red’ as opaque strings and keying them into the standard colour map.

---

<div class="post-metadata">

**Author:** ![rossburton](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rossburton/32/4939_2.png) [@rossburton](https://talk.observablehq.com/u/rossburton)\
**Post date:** [June 30, 2021, 2:16pm UTC](https://talk.observablehq.com/t/changing-bar-colours-based-on-value/5275/4 "2021-06-30T14:16:42Z")

</div>

Aha so when using Plot you don’t create anything by hand.

A new scale, for example:

```auto
  color: {
    type: "categorical",
    domain: ["success", "failed"],
    range: ["green", "red"]
  }

```

And then you can use it in the `barX()` method like `fill: "status"`.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [June 30, 2021, 4:33pm UTC](https://talk.observablehq.com/t/changing-bar-colours-based-on-value/5275/5 "2021-06-30T16:33:09Z")

</div>

It’s _possible_ to create colors by hand, if you specify:

```auto
  color: { type: "identity" }

```

(however it’s not the recommended approach).