# Getting swatches from a 'scales' color theme

**URL:** <https://talk.observablehq.com/t/getting-swatches-from-a-scales-color-theme/5680>\
**Category:** Help\
**Created:** [October 13, 2021, 12:58am UTC](https://talk.observablehq.com/t/getting-swatches-from-a-scales-color-theme/5680 "2021-10-13T00:58:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kalmdown](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kalmdown/32/4971_2.png) [@kalmdown](https://talk.observablehq.com/u/kalmdown)\
**Post date:** [October 13, 2021, 12:58am UTC](https://talk.observablehq.com/t/getting-swatches-from-a-scales-color-theme/5680/1 "2021-10-13T00:58:40Z")

</div>

One of the biggest difficulties I have with Observable (due to Javascript) is understanding how to pass values through nested functions… Here is an example:

I would like users to pick a color them and see the swatches that will be used for the amount of data they have.

Observable with this set up: [Scales to Swatch Generator / kalmdown / Observable](https://observablehq.com/@kalmdown/scales-to-swatch-generator)

The cell to pick a color from:

```auto
viewof intScale = Inputs.select(Object.keys(scales), {value: 'viridis', label: 'Internal locations color scheme'})

```

The interpolator using the scale:

```auto
intColor = d3.scaleOrdinal()
    .domain(internalLocations.map(d => d.id))
    .range(d3.quantize(t => {
      const {l, c, h} = d3.lch(scales[intScale](t))
      return d3.lch(80, 30, h)
    }, internalLocations.length + 1))

```

Trying to use the scale directly. Expect 4 swatches.

```auto
swatches(scales[intScale],internalLocations)

```

Trying to use the scale through the interpolator. Expect same 4 swatches.

```auto
swatches(scales[intScale](internalLocations.map((d,i) => i)))

```

My imports:

```auto
import { scales } from '@makio135/give-me-colors'
import { select } from '@jashkenas/inputs'
import { ramp, swatches } from '@mbostock/working-with-color'

```

For a cells description it would be helpful if Observable could provide better info on the function it thinks it is returning, instead of just “ƒ(i)”  
 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/3/3103d1eb960f094f754c3ef9a559f2042263f86a.png)  
In this case, is it returning d3.interpolateViridis…no way to know.

---

<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:** [October 13, 2021, 2:18am UTC](https://talk.observablehq.com/t/getting-swatches-from-a-scales-color-theme/5680/2 "2021-10-13T02:18:59Z")

</div>

> [@kalmdown](#):
>
> Trying to use the scale through the interpolator. Expect same 4 swatches.

So, if `scales['viridis']` is d3.interpolateViridis, you need to pass it a number in [0, 1] to compute a color. Currently you are passing it `internalLocations.map((d, i) => i` which means you are calling it once, passing in [0, 1, 2, 3], returning a single color.

Something like this?

```js
swatches(d3.quantize(scales[intScale], internalLocations.length))

```

Which is like saying

```js
swatches([0/3, 1/3, 2/3, 3/3].map(t => scales[intScale](t)))

```

Or equivalently

```js
swatches([scales[intScale](0/3), scales[intScale](1/3), scales[intScale](2/3), scales[intScale](3/3)])

```

> [@kalmdown](#):
>
> For a cells description it would be helpful if Observable could provide better info on the function it thinks it is returning, instead of just “ƒ(i)”

Unfortunately JavaScript doesn’t provide much additional information to show here. You can view the source of a function by saying:

```js
d3.interpolateViridis + ""

```

But in this case you’ll get something equally inscrutable:

```js
"function (e){return t[Math.max(0,Math.min(n-1,Math.floor(e*n)))]}"

```

---

<div class="post-metadata">

**Author:** ![kalmdown](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kalmdown/32/4971_2.png) [@kalmdown](https://talk.observablehq.com/u/kalmdown)\
**Post date:** [October 13, 2021, 4:07pm UTC](https://talk.observablehq.com/t/getting-swatches-from-a-scales-color-theme/5680/3 "2021-10-13T16:07:40Z")

</div>

Thank you! And thank you for unpacking it.

As to the function part. If Observable was built into an IDE (vs in browser) would the IDE be able to maintain state enough to make the function accessible?

---

<div class="post-metadata">

**Author:** ![kalmdown](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kalmdown/32/4971_2.png) [@kalmdown](https://talk.observablehq.com/u/kalmdown)\
**Post date:** [October 13, 2021, 4:35pm UTC](https://talk.observablehq.com/t/getting-swatches-from-a-scales-color-theme/5680/4 "2021-10-13T16:35:33Z")

</div>

Hmmm…running it through the interpolator returns the swatches in reverse order…  
swatches(d3.quantize(intColor, internalLocations.length))

Can see in Observable…