# Can Plot use two colour scales in the same plot?

**URL:** <https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162>\
**Category:** Help\
**Created:** [August 8, 2023, 2:02pm UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162 "2023-08-08T14:02:28Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [August 8, 2023, 2:02pm UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162/1 "2023-08-08T14:02:28Z")

</div>

I am working with Plot’s raster mark and I would like to show two rasters in the same plot. But I need to use a different colour scheme for each raster. Is there a way of doing this in Plot?

I realise I could use a single custom colour scheme with part of it used for the values in raster 1 and the other part used for raster 2. This would involve transforming the values in raster 2 such that they don’t overlap with those in raster 1. But this feels rather hacky, and I’d hope for a more elegant solution.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 8, 2023, 2:27pm UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162/2 "2023-08-08T14:27:24Z")

</div>

What are the semantics of the two color schemes? As in, what are you trying to convey/represent with them?

Plot doesn’t support multiple color scales in the same plot. (Though there’s an open issue regarding this, mostly in the context of dual-axis charts where you might have two y scales.) But you could achieve this by partitioning the domain, or perhaps by using a diverging color scale. And you can always opt out of scales entirely and supplying literal colors directly, typically by setting the color scale type to _identity_ but you can also turn it off for individual channels manually using a scale override or automatically if a channel’s values are all literal colors.

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [August 8, 2023, 2:47pm UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162/3 "2023-08-08T14:47:20Z")

</div>

OK - thanks for the confirmation. Yes my ‘hacky’ solution involves partitioning the domain and range as you suggest.

The context is that I am trying to generate some cartographic quality output with Plot where I have a number of ‘layers’ that I’d like to encode with colour independently. I may try exploring identity/null scales and colour literals.

More generally, I think being able to specify some per-mark scales opens up some interesting expressive possibilities in addition to this use case (e.g. overlaying bar charts on maps).

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [August 8, 2023, 7:14pm UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162/4 "2023-08-08T19:14:48Z")

</div>

Quite pleased with progress so far. This uses the custom diverging colour scheme approach to store both hypsometric colours and shadows in the same colour scale (elevations as positive numbers, shading as negative). Contours calculated via Plot’s contour mark; lakes and rivers as separate geoJSON layers.

 ![topographicExample](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/2/2a4bacd45e1627e5ccdd12b7fc1ec6382d5c4012.jpeg)

I will add an Observable doc on creating topographic map output with Plot soon…

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 9, 2023, 12:54am UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162/5 "2023-08-09T00:54:03Z")

</div>

Beautiful! Thank you for sharing!

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [August 9, 2023, 6:25pm UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162/6 "2023-08-09T18:25:43Z")

</div>

Document explaining the process now up here:

> **[Topographic Mapping](https://observablehq.com/@jwolondon/topographic-mapping)**
>
> Building a topographic map with Plot. Plot's raster mark provides the facility to render continuous surfaces from a regular grid of values (or interpolated from an irregular set). This makes it an ideal starting point for producing topographic...

---

<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:** [August 9, 2023, 6:54pm UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162/7 "2023-08-09T18:54:03Z")

</div>

Incredible! Thank you for the write-up!

If you wanted to create the grays directly (as literals), you could write:

```auto
      Plot.raster(imhofRelief.values, {
        width: relief.nCols,
        height: relief.nRows,
        fill: d => d3.hcl(0, 0, d * 100).toString(),
        mixBlendMode: "luminosity"
      })

```

I also wonder how you would compute the eduard values in the notebook 🙂

---

<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:** [August 10, 2023, 5:51am UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162/8 "2023-08-10T05:51:08Z")

</div>

Maybe a nicer way of framing this is by saying:

> fill: d3.scaleLinear([0, 1], [“black”, “white”]),

or even simpler (in this simple case):

> fill: d3.interpolate(“black”, “white”),

I think it conveys the intention better.

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [August 10, 2023, 6:35am UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162/9 "2023-08-10T06:35:37Z")

</div>

Yes, I think your suggested approach of fill colour encoding functions would be a better than the one I originally proposed. I’ll update the topographic map page later. Semantically this makes sense in that the shaded relief component can be thought of as an intensity modifier of the coloured elevation raster.

In fact that would appear to answer my original question directly: You can have multiple colour schemes in the same plot by delegating colour encoding to the fill function with a d3 interpolator rather than rely on a Plot-wide colour scheme. Don’t know if there is a performance hit doing it that way, but it certainly gives more flexiblity.

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [August 11, 2023, 7:49am UTC](https://talk.observablehq.com/t/can-plot-use-two-colour-scales-in-the-same-plot/8162/10 "2023-08-11T07:49:32Z")

</div>

Given this approach for defining multiple interpolated colour schemes, I’ve created a separate page for experimenting with blending of different colour schemes:

> **[Hypsometric Tinting](https://observablehq.com/@jwolondon/hypsometric-tinting)**
>
> Following on from this Topographic Mapping page, this supplement allows you to explore different ways of combining coloured elevation with shaded relief rasters and contours for more expressive ways to generate terrain maps. 1. Choose the colour...

It turns out to be quite expressive, allowing subtle (and not so subtle!) shading schemes.

 ![terrainSample1](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/e/e2ff69cae5c85c9a16a6dfc24e422902e604e854.jpeg)

 ![terrainSample2](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/1/19c9c225e6183b7d459d763ae9d4e0eeee51919f.jpeg)