# How do I change the field of a scale based on a signal?

**URL:** <https://discuss.elastic.co/t/how-do-i-change-the-field-of-a-scale-based-on-a-signal/287029>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [October 18, 2021, 8:47pm UTC](https://discuss.elastic.co/t/how-do-i-change-the-field-of-a-scale-based-on-a-signal/287029 "2021-10-18T20:47:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nsimi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nsimi/32/39013_2.png) [@nsimi](https://discuss.elastic.co/u/nsimi)\
**Post date:** [October 18, 2021, 8:47pm UTC](https://discuss.elastic.co/t/how-do-i-change-the-field-of-a-scale-based-on-a-signal/287029/1 "2021-10-18T20:47:16Z")

</div>

Hello All,

I have a visualization with a select signal, and I want to change what field my scale looks at to colorize things based on the value of the select signal. I assume this can be done I tried the following, but it doesn't seem to be working:

```auto
  scale: [ 
 {
      name: color
      type: ordinal
      domain: {
        data: combined
        field: signal: signal_0
      }
      range: {
        scheme: category20c
      }
    }
]

```

Thank you!

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [October 19, 2021, 11:31am UTC](https://discuss.elastic.co/t/how-do-i-change-the-field-of-a-scale-based-on-a-signal/287029/2 "2021-10-19T11:31:59Z")

</div>

I'd try this as long as the signal is an array. [Documentation](https://vega.github.io/vega/docs/scales/#domain).

```auto
domain: {
 signal: signal_0
}

```

---

<div class="post-metadata">

**Author:** ![nsimi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nsimi/32/39013_2.png) [@nsimi](https://discuss.elastic.co/u/nsimi)\
**Post date:** [October 19, 2021, 2:04pm UTC](https://discuss.elastic.co/t/how-do-i-change-the-field-of-a-scale-based-on-a-signal/287029/3 "2021-10-19T14:04:01Z")

</div>

Good Morning @aaron-nimocks

I tried what you. were suggesting and it didn't work (assuming I did it wrong), I am including a simple example below to illustrate what I am trying to do, basically I want to symbols in the example below to be colored by the field chosen in the signal, so if "foo" is chosen they should be different colors if "bar" is chosen they should be the same color. Please advise, thank you!

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
    "width": 200,
  "height": 200,
  "padding": 5,
  "signals": [
    {
      "name": "color_picker",
      "value": "foo",
      "bind": {
        "input": "select",
        "options": [
          "foo",
          "bar"
        ],
        "labels": [
          "foo",
          "bar"
        ]
      }
    }
  ],
  "scales": [
    {
      "name": "color_by",
      "type": "ordinal",
      "domain":{
        "data": "sample_data",
        "field": {
          "signal": "color_picker"
        }
      },
      "range":{
        "scheme": "category20c"
      }
    }
  ],
  "data": [
    {
      "name": "sample_data",
      "values": [
         {
           "foo": "VALUE_FOO",
           "bar": "VALUE_BAR",
           "xc" : 50,
           "yc" : 50
         },
         {
           "foo" : "VALUE_2",
           "bar" : "VALUE_BAR",
           "xc" : 100,
           "yc" : 100
         }
      ]
    }
  ],
  "legends": [
    
  ],
  "marks": [
    {
      "name": "test",
      "type": "symbol",
      "from": {
        "data": "sample_data"
      },
      "encode": {
        "enter": {
          "fill": {
            "scale": "color_by",
            "field": {
              "signal": "color_picker"
            }
          }
        },        
        "update":{
          "shape":{
            "value":"circle"
          },
          "size":{
            "value":500
          },
          "xc": {
            "field": "xc"
          },
          "yc": {
            "field": "yc"
          }
        }
      }
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [October 19, 2021, 2:52pm UTC](https://discuss.elastic.co/t/how-do-i-change-the-field-of-a-scale-based-on-a-signal/287029/4 "2021-10-19T14:52:54Z")

</div>

Check out this [example](https://vega.github.io/vega/examples/heatmap/). It changes the color pallet based on input selection which I think is what you are going for.

---

<div class="post-metadata">

**Author:** ![nsimi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nsimi/32/39013_2.png) [@nsimi](https://discuss.elastic.co/u/nsimi)\
**Post date:** [October 19, 2021, 3:05pm UTC](https://discuss.elastic.co/t/how-do-i-change-the-field-of-a-scale-based-on-a-signal/287029/5 "2021-10-19T15:05:58Z")

</div>

Thank you @aaron-nimocks, I will take a look but for clarity I should say that I am not looking to change the color palate by input, what I am looking for is to change which field the scale is determined on instead, so my marks would be colored by "foo" categories or by "bar" categories depending on which is selected, I will review this example though and see if it sets me straight

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [October 19, 2021, 3:11pm UTC](https://discuss.elastic.co/t/how-do-i-change-the-field-of-a-scale-based-on-a-signal/287029/6 "2021-10-19T15:11:44Z")

</div>

Ahh I understand now. I am not sure the answer but will give it some thought.

---

<div class="post-metadata">

**Author:** ![nsimi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nsimi/32/39013_2.png) [@nsimi](https://discuss.elastic.co/u/nsimi)\
**Post date:** [October 19, 2021, 4:44pm UTC](https://discuss.elastic.co/t/how-do-i-change-the-field-of-a-scale-based-on-a-signal/287029/7 "2021-10-19T16:44:59Z")

</div>

Ah HA! I got it:

Thank you to @aaron-nimocks for your assist.

Below will do what I was looking for, got insight in how to do it from [this stackoverflow post.](https://stackoverflow.com/questions/59586545/brushing-linking-in-vega-not-vega-lite)

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
    "width": 200,
  "height": 200,
  "padding": 5,
  "signals": [
    {
      "name": "color_picker",
      "value": "foo",
      "bind": {
        "input": "select",
        "options": [
          "foo",
          "bar"
        ],
        "labels": [
          "foo",
          "bar"
        ]
      }
    }
  ],
  "scales": [
    {
      "name": "color_by",
      "type": "ordinal",
      "domain":{
        "data": "sample_data",
        "field": {
          "signal": "color_picker"
        }
      },
      "range":{
        "scheme": "category20c"
      }
    }   
  ],
  "data": [
    {
      "name": "sample_data",
      "values": [
         {
           "foo": "VALUE_FOO",
           "bar": "VALUE_BAR",
           "xc" : 50,
           "yc" : 50
         },
         {
           "foo" : "VALUE_2",
           "bar" : "VALUE_BAR",
           "xc" : 100,
           "yc" : 100
         }
      ]
    }
  ],
  "legends": [
    {
      "fill": "color_by"
    }
  ],
  "marks": [
    {
      "name": "test",
      "type": "symbol",
      "from": {
        "data": "sample_data"
      },      
      "encode": {
        "enter": {
          "fill": {
              "scale": "color_by",
              "field": "foo"
          }
        },        
        "update":{
          "fill":[
            {
              "test": " color_picker == 'foo' ",
              "scale":"color_by",
              "field":"foo"              
            },
            {
              "scale":"color_by",
              "field":"bar"
            }
          ],
          "shape":{
            "value":"circle"
          },
          "size":{
            "value":500
          },
          "xc": {
            "field": "xc"
          },
          "yc": {
            "field": "yc"
          }
        }
      }
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 16, 2021, 4:45pm UTC](https://discuss.elastic.co/t/how-do-i-change-the-field-of-a-scale-based-on-a-signal/287029/8 "2021-11-16T16:45:56Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.