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

[nsimi]

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:

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

Thank you!

[aaron-nimocks]

I'd try this as long as the signal is an array. Documentation.

domain: {
 signal: signal_0
}

[nsimi]

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!

{
  "$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"
          }
        }
      }
    }
  ]
}

[aaron-nimocks]

Check out this example. It changes the color pallet based on input selection which I think is what you are going for.

[nsimi]

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

[aaron-nimocks]

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

[nsimi]

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.

{
  "$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"
          }
        }
      }
    }
  ]
}