Visualize locations on map using Vega Plugin

Elastic Stack Kibana
1

I am trying to understand how to visualize data on a map using Vega Plugin.
I have a index called test with document containing location as a geo_point type which I would like to visualize on a map:

TEST
{
  "mappings": {
    "doc": {
      "properties": {
        "location": {
          "type": "geo_point"
        }
      }
    }
  }
}

So I created the following Vega configuration:

 {
   "$schema": "https://vega.github.io/schema/vega/v3.0.json",
   "config": {
     "kibana": {
       "type": "map",
       "latitude": 40.0,
       "longitude": -74.0,
       "zoom": 8,
       "mapStyle": "default",
       "minZoom": 5,
       "maxZoom": 13,
       "zoomControl": true,
       "delayRepaint": true,
       "controlsDirection": "horizontal"
     }
   },
 
   "data": [
     {
       "name": "myEsDataSource",
       "url": {
         "index": "test",
         "body": {
           "_source": ["location"],
           "query": {
             "match_all": {}
           }
         }
       }
       "format": {"type": "json", "property": "hits.hits"},
       "transform": [
         {
           "type": "formula",
           "as": "lon",
           "expr": "datum._source.location.lon"
         },
         {
           "type": "formula",
           "as": "lat",
           "expr": "datum._source.location.lat"
         },
         {
           "type": "geopoint",
           "projection": "projection",
           "fields": [
             {"expr": "datum._source.location.lon"},
             {"expr": "datum._source.location.lat"}
           ],
           "as": ["x", "y"]
         }
       ]
     },
   
   ],
 }

The map shows but it contains no data.
How to tell Vega to show these location data on a map?

2

@romanc, were you able to resolve this issue? I saw your comment where you said something showed up on the graph. Thanks!

3

Not fully yet. I am still trying to figure out how to create configuration when the popup will show on user action on point.

Some example would be very helpfull. I can learn on that what and how can be used in Vega. Would you be able to demonstrate it on the example of custom map from Vega Github?:

4

@romanc The very simple path is to add "tooltip" field for the "enter" section of the symbol mark (or whichever mark should have a toolip). See docs. The more appropriate (but fairly complex) example is logstash-geosrc-map-with-destinations.hjson - to use it, first generate some dummy data using makelogs (not on production cluster!). That graph creates a "hover" signal when the user mouse is over the countrymark symbol (signal is equal to the data object for that symbol), or becomes null on mouseout. There is also a group mark (line 137) that draws a rectangle with a pie chart for the currently selected item. The drawing is fairly involved because it needs to access sub-aggregation for the current country, take only the first N elements and group the rest, etc, but this is not relevant for this question. You would probably want to modify the signal to become activated on click rather than mouse over. Good luck!

5

@nyuriks Thank you very much, this was very helpful. Tooltips and Hrefs works like expected and Group marks are very good way to show a custom rectangle with specific data and other visualizations :}

I have two questions:

  1. what you mean by

You would probably want to modify the signal to become activated on click rather than mouse over.

it means modifying Vega plugin or to create custom signal configuration inside visualization for click?

  1. Is it possible to somehow create user input text area where user will input comment and it will be indexed in current document in elasticsearch? Is it possible with Vega? I am not aware of such functionality in Kibana itself, but would like to have it.
6

@romanc, I meant you can set your own conditions for your own graph in the vega JSON. See https://github.com/nyurik/kibana-vega-vis/blob/master/examples/logstash/logstash-geosrc-map-with-destinations.hjson#L320 -- the current signal there has two on conditions -- on @countrymark:mouseover the value is set to the "datum" - the data behind the currently drawn object. And on @countrymark:mouseout it is set to null. In your graph you could for example use @countrymark:click to set the value. There are some examples in the vega docs that do that. Also check out Vega examples in the editor.

7

Thank you, @nyuriks, for your help.
My last issue is that I am not able to encode href in mark type symbol with parameter. If you can help, please Vega encode URL with parameter in Mark Symbol href.

8

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