How to work with Query Results in Vega

Hello all,

I am directly querying elasticseach from my vega visualization, and I am looking for some education on how to access the results of my query. Can anyone provide an example or point me at something that shows/explains how to access the results of my query?

Thank you!

Here's where to find it if you are on a newer version.

I am on 7.12.1, and it doesn't appear to have that, any other place to look in lieu of that?

I'm on a newer version so I can't show you exactly since it works a little different.

  1. Open browser Developer Tools (F12) or right click and Inspect
  2. Click on Network Tab
  3. Clear the Network Tab with the circle with line through it on Chrome (didn't mark that in picture). This is so you can see new data as it comes in.
  4. Make a small change in your spec (usually I just add a space somewhere) and click Update
  5. You will see new data in the Network tab
  6. I don't know the name of the event since it's changed but you click on that
  7. Then click on response and you will see the response

@aaron-nimocks thanks for the help, I don't think I am making myself clear, I have been using vega debug in the browser and the developer tools to see the raw data, what I am trying to figure out is how to get that data into something that is more traditionally like what I see in vega, e.g. I found some examples of people using

      format: {
        property:{
          hits.hits
        }
      }

And then accessing individual results as "datum.x" but when I try to do this vega doesn't like what I am doing so I was hoping for an example that would help me understand how to properly get it into a format like that.

Thank you!

Ahh ok. Well this depends on what your query and data looks like. Can you post your spec using GIST? The Vega code.

In Developer Tools - Console. Run JSON.stringify(VEGA_DEBUG.vegalite_spec) for Vega lite and JSON.stringify(VEGA_DEBUG.vega_spec) for Vega.

This will include your data so if it contains something you don't want to share it should be masked.

I will work on getting that right now it throws an exception trying to do that because of the data anyway I appreciate the help and will post when I can get it to work

The documentation has a great write up for this. But depending on your query is how you will access it. If it's a query then you most likely would use hits.hits but if its an aggregation it will be different like format: {property: "aggregations.categories.buckets" }.

OKay Got it I had some dummy data in there to make a graph while I mess with the query stuff to see how it works and it was breaking the print out:

{
   "$schema":"https://vega.github.io/schema/vega/v5.json",
   "data":[
      {
         "name":"node-data",
         "values":[
            
         ]
      },
      {
         "name":"link-data",
         "values":[
            
         ]
      },
      {
         "name":"query-data",
         "url":{
            "index":"idx*",
            "body":{
               "size":1,
               "query":{
                  "bool":{
                     "must":[
                        {
                           "term":{
                              "event_type.keyword":{
                                 "value":"connection"
                              }
                           }
                        }
                     ]
                  }
               }
            }
         },
         "values":{
            "took":887,
            "timed_out":false,
            "_shards":{
               "total":64,
               "successful":64,
               "skipped":0,
               "failed":0
            },
            "hits":{
               "total":627,
               "max_score":10.452393,
               "hits":[
                  {
                     "_index":"bb8_2_2021",
                     "_type":"_doc",
                     "_id":"aeb652d9-9ba2-442c-9131-d218871570ea",
                     "_score":10.452393,
                     "_source":{
                        "user":"test",
                        "user_function":null,
                        "user_function_normalized":null,
                        "user_email":null,
                        "user_org_type":null,
                        "user_org_type_normalized":null,
                        "device":{
                           "os":"temple",
                           "version":"1.0.0",
                           "device_id":null,
                           "resolution":{
                              "res_x":1920,
                              "res_y":1080
                           }
                        },
                        "location":{
                           "lat":33.8121,
                           "lon":117.919
                        },
                        "location_update":320457600000,
                        "geolocated_location":false,
                        "app_version":"1.1.3-test",
                        "connection":{
                           "state":"connected",
                           "to":"F8EB76B0-DE65-42A3-89B9-25F07CC6A4D7",
                           "with":{
                              "id":"F8EB76B0-DE65-42A3-89B9-25F07CC6A4D7",
                              "email":null,
                              "email_domain":null
                           }
                        },
                        "county":"Xuzhou",
                        "state":"Jiangsu",
                        "country":"China",
                        "migrated":true
                     }
                  }
               ]
            }
         }
      }
   ],
   "signals":[
      {
         "name":"cx",
         "update":"width / 2"
      },
      {
         "name":"cy",
         "update":"height / 2"
      },
      {
         "name":"nodeRadius",
         "value":8,
         "bind":{
            "input":"range",
            "min":1,
            "max":50,
            "step":1
         }
      },
      {
         "name":"nodeCharge",
         "value":-30,
         "bind":{
            "input":"range",
            "min":-100,
            "max":10,
            "step":1
         }
      },
      {
         "name":"linkDistance",
         "value":30,
         "bind":{
            "input":"range",
            "min":5,
            "max":100,
            "step":1
         }
      },
      {
         "name":"static",
         "value":true,
         "bind":{
            "input":"checkbox"
         }
      },
      {
         "description":"State variable for active node fix status.",
         "name":"fix",
         "value":false,
         "on":[
            {
               "events":"symbol:mouseout[!event.buttons], window:mouseup",
               "update":"false"
            },
            {
               "events":"symbol:mouseover",
               "update":"fix || true"
            },
            {
               "events":"[symbol:mousedown, window:mouseup] > window:mousemove!",
               "update":"xy()",
               "force":true
            }
         ]
      },
      {
         "description":"Graph node most recently interacted with.",
         "name":"node",
         "value":null,
         "on":[
            {
               "events":"symbol:mouseover",
               "update":"fix === true ? item() : node"
            }
         ]
      },
      {
         "description":"Flag to restart Force simulation upon data changes.",
         "name":"restart",
         "value":false,
         "on":[
            {
               "events":{
                  "signal":"fix"
               },
               "update":"fix && fix.length"
            }
         ]
      }
   ],
   "scales":[
      {
         "name":"color",
         "type":"ordinal",
         "domain":{
            "data":"node-data",
            "field":"group"
         },
         "range":{
            "scheme":"category20c"
         }
      }
   ],
   "marks":[
      {
         "name":"nodes",
         "type":"symbol",
         "zindex":1,
         "from":{
            "data":"node-data"
         },
         "on":[
            {
               "trigger":"fix",
               "modify":"node",
               "values":"fix === true ? {fx: node.x, fy: node.y} : {fx: fix[0], fy: fix[1]}"
            },
            {
               "trigger":"!fix",
               "modify":"node",
               "values":"{fx: null, fy: null}"
            }
         ],
         "encode":{
            "enter":{
               "fill":{
                  "scale":"color",
                  "field":"group"
               },
               "stroke":{
                  "value":"white"
               }
            },
            "update":{
               "size":{
                  "signal":"2 * nodeRadius * nodeRadius"
               },
               "cursor":{
                  "value":"pointer"
               }
            }
         },
         "transform":[
            {
               "type":"force",
               "iterations":300,
               "restart":{
                  "signal":"restart"
               },
               "static":{
                  "signal":"static"
               },
               "signal":"force",
               "forces":[
                  {
                     "force":"center",
                     "x":{
                        "signal":"cx"
                     },
                     "y":{
                        "signal":"cy"
                     }
                  },
                  {
                     "force":"collide",
                     "radius":{
                        "signal":"nodeRadius"
                     }
                  },
                  {
                     "force":"nbody",
                     "strength":{
                        "signal":"nodeCharge"
                     }
                  },
                  {
                     "force":"link",
                     "links":"link-data",
                     "distance":{
                        "signal":"linkDistance"
                     }
                  }
               ]
            }
         ]
      },
      {
         "type":"path",
         "from":{
            "data":"link-data"
         },
         "interactive":false,
         "encode":{
            "update":{
               "stroke":{
                  "value":"#ccc"
               },
               "strokeWidth":{
                  "value":0.5
               }
            }
         },
         "transform":[
            {
               "type":"linkpath",
               "require":{
                  "signal":"force"
               },
               "shape":"line",
               "sourceX":"datum.source.x",
               "sourceY":"datum.source.y",
               "targetX":"datum.target.x",
               "targetY":"datum.target.y"
            }
         ]
      }
   ],
   "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"
      },
      "title":{
         "color":"#d4dae5"
      },
      "style":{
         "guide-label":{
            "fill":"#98a2b3"
         },
         "guide-title":{
            "fill":"#d4dae5"
         },
         "group-title":{
            "fill":"#d4dae5"
         },
         "group-subtitle":{
            "fill":"#d4dae5"
         }
      },
      "axis":{
         "tickColor":"#343741",
         "domainColor":"#343741",
         "gridColor":"#343741"
      },
      "background":"transparent"
   },
   "width":"container",
   "height":"container",
   "autosize":{
      "type":"fit",
      "contains":"padding"
   }
}


I moved that over to the Vega Editor so you can see and learn. Also add a text mark so you can how to use the data.

You can view the values of the data and signals in the UI like below. You get this functionality in a later version of Kibana but right now this might be the best place to learn how to use it.