Vega scatterplot with specific color to each value

Elastic Stack Kibana
1

I have an index in which each document has ‘X Location’ field, ‘Y Location’ field and ‘rgb’ field.
The ‘rgb’ field contains rgb values of string format rgb(x,y,z).
I would like to visualize the data, and I tried to make a scatter plot of ‘Y Location’ vs. ‘X Location’, and then color each value by its corresponding color from 'rgb' field. however it is not working.
I used the code below.
any ideas?

    {
      $schema: https://vega.github.io/schema/vega-lite/v2.json
      mark: {type: "square", filled: true, size: 400}
      data: {
      data: "table"
        url: {
          %context%: true
          index: my*
          body: {
          size: 10000
            _source: ["X Location", "Y Location", "rgb"]
          }
        }
        format: {property: "hits.hits"}
      }
      encoding: {
        x: {
          field: _source.X Location
          type: quantitative
          axis: {title: "X Location"}
        }
        y: {
          field: _source.Y Location
          type: quantitative
          axis: {title: "Y Location"}
        }
        color: {
      field: _source.rgb
      type: nominal
      legend: {title: "rgb"}
      scale: {
        domain: [data: "table", field: "rgb"]
        range: [data: "table", field: "rgb"]
      }
    }

I based it on the following code:

color{
    field: _source.ME
      tipe: nominal
      legend: {title: "ME"}
      scale: {
        domain: ["ME1", "ME2", "ME3", "ME4"]
        range: ["rgb(0,0,255)", "rgb(0,255,0)", "rgb(255,0,0)", "rgb(0,0,0)"]
}
}
2

This might be similar to Color in vega bar charts but I'm not 100% sure (in that case you just have to specify scale: null.

To make it easier to follow, could you export the spec with data inlined by

4

This encoding works for me:

encoding: {
    x: {
      field: "_source.X Location"
      type: quantitative
      axis: {title: "X Location"}
    }
    y: {
      field: "_source.Y Location"
      type: quantitative
      axis: {title: "Y Location"}
    }
    color: {field: "_source.rgb", scale: null}
  }
5

WOW!
It is working perfectly, thank you!
can I add tooltips, so for each point i will be able to present data of another field in the index?
eg:
x location 100
y location 200
group: blue

6

That should be possible, check out the tooltip configuration here: https://vega.github.io/vega-lite/docs/tooltip.html#data

7

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