# Vega array coloring (scatterplot) **URL:** \ **Category:** Kibana\ **Created:** [November 11, 2019, 1:45am UTC](https://discuss.elastic.co/t/vega-array-coloring-scatterplot/207261 "2019-11-11T01:45:11Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![layeghy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/layeghy/32/18902_2.png) [@layeghy](https://discuss.elastic.co/u/layeghy)\ **Post date:** [November 11, 2019, 1:45am UTC](https://discuss.elastic.co/t/vega-array-coloring-scatterplot/207261/1 "2019-11-11T01:45:11Z")
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: ```auto 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: ```auto "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 : ```auto "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: ```auto "signal":{"name":"order", "value":[1,2,3,4,5,6] } ``` and then using it in fill like this: ```auto "fill": {"scale": "color", "value": "order"} ``` or like this: ```auto "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. ---
**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\ **Post date:** [November 11, 2019, 5:52am UTC](https://discuss.elastic.co/t/vega-array-coloring-scatterplot/207261/2 "2019-11-11T05:52:28Z")
@nyuriks can u please help Thanks Rashmi ---
**Author:** ![layeghy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/layeghy/32/18902_2.png) [@layeghy](https://discuss.elastic.co/u/layeghy)\ **Post date:** [November 18, 2019, 12:24am UTC](https://discuss.elastic.co/t/vega-array-coloring-scatterplot/207261/3 "2019-11-18T00:24:55Z")
@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 ---
**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\ **Post date:** [November 19, 2019, 8:43am UTC](https://discuss.elastic.co/t/vega-array-coloring-scatterplot/207261/4 "2019-11-19T08:43:09Z")
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](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. ---
**Author:** ![layeghy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/layeghy/32/18902_2.png) [@layeghy](https://discuss.elastic.co/u/layeghy)\ **Post date:** [November 19, 2019, 11:35am UTC](https://discuss.elastic.co/t/vega-array-coloring-scatterplot/207261/5 "2019-11-19T11:35:09Z")
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. ---
**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\ **Post date:** [November 19, 2019, 11:46am UTC](https://discuss.elastic.co/t/vega-array-coloring-scatterplot/207261/6 "2019-11-19T11:46:53Z")
Ah, right. There is already an issue in the Kibana Github repository tracking this: [https://github.com/elastic/kibana/issues/31413](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. ---
**Author:** ![layeghy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/layeghy/32/18902_2.png) [@layeghy](https://discuss.elastic.co/u/layeghy)\ **Post date:** [November 20, 2019, 12:09am UTC](https://discuss.elastic.co/t/vega-array-coloring-scatterplot/207261/7 "2019-11-20T00:09:05Z")
Thanks. It would be great. Cheers, Siamak ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [December 18, 2019, 12:09am UTC](https://discuss.elastic.co/t/vega-array-coloring-scatterplot/207261/8 "2019-12-18T00:09:07Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.