Why the color rendering is so different in Kibana?

Recently, I noticed the diagram generated by the same color schema in Vega editor and Kibana vega is so different?
I put the two screenshots for comparsion, one is in Vega editor and the other is in Kibana.
Anyone can explain why this happened?


It might be related to the used vega version. Kibana is currently running vega 4.3.0 (I think the most recent one vega editor is likely running is 5.13.0).

In the upcoming Kibana version 7.9 vega will be upgraded to the most recent version.

There are other possible causes of this, if you share your spec like described here: https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e we can look deeper into it.

First of all, thank you for your reply.
I attached the spec in the blow, btw, when will the kibana version 7.9 be released? Kind of urgent to try it out.
"{"$schema":"https://vega.github.io/schema/vega/v4.json","description":"A binned scatter plot example showing aggregate counts per binned cell.","width":300,"height":300,"padding":20,"autosize":"pad","data":[{"name":"imageData","url":"https://localhost:1237/statics/version4Pic.json","format":{"type":"json","parse":{"camera":"string","Fimage":"string"}}},{"name":"source","url":"https://localhost:1237/statics/testingData.json","format":{"type":"json","property":"aggregations.camera_heatmap.buckets"},"transform":[{"type":"formula","expr":"datum.key","as":"s1_camera"},{"type":"formula","expr":"datum.doc_count","as":"s1_Tcount"},{"type":"formula","expr":"datum.center_x.buckets","as":"s1_groupX"}]},{"name":"source2Flat","source":"source","transform":[{"type":"formula","expr":"datum.s1_groupX","as":"s2_groupX"},{"type":"flatten","fields":["s2_groupX"]}]},{"name":"source3","source":"source2Flat","transform":[{"type":"formula","expr":"datum.s2_groupX.key","as":"xdata"},{"type":"formula","expr":"datum.s2_groupX.doc_count","as":"s3_Xcount"},{"type":"formula","expr":"datum.s2_groupX.center_y.buckets","as":"s3_groupY"}]},{"name":"source4Flat","source":"source3","transform":[{"type":"formula","expr":"datum.s3_groupY","as":"s4_groupY"},{"type":"flatten","fields":["s4_groupY"]}]},{"name":"source5","source":"source4Flat","transform":[{"type":"formula","expr":"datum.s4_groupY.key","as":"ydata"},{"type":"formula","expr":"datum.s4_groupY.doc_count","as":"color_Count"},{"type":"lookup","from":"imageData","key":"camera","fields":["s1_camera"],"values":["Fimage"],"as":["Fimage"],"default":"https://localhost:1237/statics/pics/group6.jpg"}]}],"signals":[{"name":"Soffset","update":"40"},{"name":"Sheight","update":"height"},{"name":"Swidth","update":"width"},{"name":"rectSize","update":"width/20"},{"name":"opa_rect","on":[{"events":"mousemove","update":"1.0"}]},{"name":"opa_img","on":[{"events":"mousemove","update":"0.2"}]}],"layout":{"bounds":"flush","columns":2,"padding":{"column":{"signal":"Soffset"},"row":{"signal":"2*Soffset"}}},"scales":[{"name":"xscale","type":"linear","domain":{"data":"source5","field":"xdata"},"range":"width"},{"name":"yscale","type":"linear","domain":{"data":"source5","field":"ydata"},"range":"height"},{"name":"color","type":"linear","range":{"scheme":"viridis"},"domain":{"data":"source5","field":"color_Count"},"zero":false,"nice":true}],"marks":[{"name":"group","type":"group","from":{"facet":{"data":"source5","name":"zones","groupby":["s1_camera","Fimage"]}},"encode":{"enter":{"x":{"scale":"xscale","field":"xdata"},"y":{"scale":"yscale","field":"ydata"},"height":{"signal":"Sheight"},"width":{"signal":"Swidth"}},"update":{"x":{"scale":"xscale","field":"xdata"},"y":{"scale":"yscale","field":"ydata"},"height":{"signal":"Sheight"},"width":{"signal":"Swidth"}}},"data":[{"name":"filter_1","source":"zones","transform":[{"type":"filter","expr":"datum.xdata<1 && datum.ydata<1"}]}],"marks":[{"type":"rect","from":{"data":"filter_1"},"encode":{"enter":{"transform":[{"type":"filter","expr":"datum.xdata<0.95"}],"x":{"scale":"xscale","field":"xdata","round":true},"y":{"scale":"yscale","field":"ydata","offset":{"signal":"-rectSize"}},"width":{"signal":"rectSize"},"height":{"signal":"rectSize"},"tooltip":{"signal":"datum.color_Count"},"opacity":{"signal":"opa_rect"}},"update":{"fill":{"scale":"color","field":"color_Count"},"tooltip":{"signal":"datum.color_Count"},"opacity":{"signal":"opa_rect"}}}}]},{"type":"text","from":{"data":"group"},"encode":{"enter":{"fontSize":{"value":15},"text":{"field":"datum.s1_camera"},"x":{"field":"x","offset":{"signal":"4*rectSize"}},"y":{"field":"y","offset":{"signal":"-rectSize"}},"align":{"value":"left"},"baseline":{"value":"bottom"},"fill":{"value":"#000"},"opacity":{"signal":"opa_rect"}},"update":{"x":{"field":"x","offset":{"signal":"4*rectSize"}},"y":{"field":"y","offset":{"signal":"-rectSize"}},"align":{"value":"left"},"fill":{"value":"#000"},"opacity":{"signal":"opa_rect"}}}},{"type":"image","from":{"data":"group"},"encode":{"enter":{"url":{"field":"datum.Fimage"},"width":{"signal":"Swidth"},"height":{"signal":"Sheight"},"x":{"field":"x"},"y":{"field":"y"},"opacity":{"signal":"opa_img"}},"update":{"x":{"field":"x"},"y":{"field":"y"},"opacity":{"signal":"opa_img"}}}}],"config":{"range":{"category":{"scheme":"elastic"}},"arc":{"fill":"#54B399"},"area":{"fill":"#54B399"},"line":{"stroke":"#54B399"},"path":{"stroke":"#54B399"},"rect":{"fill":"#54B399"},"rule":{"stroke":"#54B399"},"shape":{"stroke":"#54B399"},"symbol":{"fill":"#54B399"},"trail":{"fill":"#54B399"}}}"

It seems like your spec is referencing local files I don't have so I can't really try. But if your spec is not loading data from Elasticsearch, it's likely this is caused by the vega version.

Kibana 7.9 is not expected to be released within the next month (and there is no definitive release date yet).

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