Vega array coloring (scatterplot)

Elastic Stack Kibana
1

I have created a scatter-plot using Vega. My index has a few fields that contain an array of values rather than a single value. for the purpose of simplification, let's assume my index is something like this:

A = {
f1 = 1,
f2 = 10,
f3 = {1,2,3,4,5,6},
f4 = {10,11,12,13,14,15}
}

in which f1, to f4 are field names and the values are as shown above. I have managed to create a scatter-plot using Vega, by assuming f3 as X and f4 as Y and by applying the flatten transform on f3 and f4.
I can color the scatter-plot points based on their f3 or f4 values by creating a scale as:

"scales":[
    {
      "name": "x",
      "domain": {"data": "mydata", "field": "f3"},
      "range": "width"
    },

    {
      "name": "y",
      "domain": {"data": "mydate", "field": "f4"},
      "range": "height"
    }, 
    {
      "name": "color",
      "type": "linear",
      "domain": {"data": "mydata", "field": "f3"},
      "range": ["#000000",  "#FF0000"]
    }
]

and then using it in encoding as :

  "marks": [
    {
      "type": "symbol",
      "from": {"data":"mydata"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "f3"},
          "y": {"scale": "yscale", "field": "f4"},
           "fill": {"scale": "color", "field": "f3"}
        }

      }
    }
    
  ]

which works fine, however, I need a method that colors points just based on their array index, e.g. point (f3=1,f4=10) gets the first color, (f3=2,f4=11) the second, ..., and (f3=6,f4=15) gets the last color.

I have tried many many things including creating a signal like this:

"signal":{"name":"order", "value":[1,2,3,4,5,6] }

and then using it in fill like this:

"fill": {"scale": "color", "value": "order"}

or like this:

"fill": {"scale": "color", "value": {"signal":"order"}}
or
"fill": {"scale": "color", "value": {"signal":"order.value"}}
or
"fill": {"signal":"order"}

But none of these worked.

I appreciate if anyone can help.

2

@nyuriks can u please help

Thanks
Rashmi

1 Like
3

@rashmi, is there any other place that I can look for the answer?

(do you think, for instance, stack over flow is a good alternative to ask this question?)

Is this normal in this forum to wait for the answer more than one week?

Cheers,
Siamak

4

Hi @layeghy,

It seems like the flatten transform has a function to also include the index of the flattened value as a separate field in the result data structure: https://vega.github.io/vega/docs/transforms/flatten/#adding-an-index-field

If you add this option to your flatten call ("index": "idx"), then you should be able to use the idx value as the color dimension.

5

Hi Joe (@flash1293),

Thanks a lot for the help. I tried the solution, it is exactly the way that it should be. unfortunately, the ("index" : "idx") is available from Vega v5 which is not currently supported in Kibana 7.4 (currently v4.3 is supported). However, as mentioned, I tried this solution in Vega Editor and it works perfectly.

6

Ah, right. There is already an issue in the Kibana Github repository tracking this: https://github.com/elastic/kibana/issues/31413

Currently there are some build problems preventing the upgrade. I will try to push the topic to get it in soon.

7

Thanks. It would be great.

Cheers,
Siamak

8

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