Scatterplot on Map in Vega Visualisation

[SpaceMoose]

I'm trying to get a very simple points-on-a-map visualization working with Kibana 6.6's Vega interface. I harvested some of the code from an example in gitlhub and also from a scatterplot-on-a-map in the Vega-lite Examples Gallery.

My code displays a map correctly--I haven't even yet tried to configure map projection to something that looks better at a regional scale--but my points to not appear

Below is my code:

{
  $schema: https://vega.github.io/schema/vega/v3.0.json
  config: {
    kibana: {
      type: map
      projection: mercator
      latitude: -25
      longitude: 135
      zoom: 4
      mapstyle: true
      minZoom: 2
      maxZoom: 7
      zoomControl: true
      scrollWheelZoom: false
      delayRepaint: true
      }
   }
  data: {
      // List of destination points
      // initially in latitude/longitude,
      // transformed into X,Y coordinates
      values: [
        {id: "Sydney", lon: -151.21, lat: -33.87}
        {id: "Brisbane", lon: 153.02, lat: -27.46}
        {id: "Melbourne", lon: 144.96, lat: -37.81}
        {id: "Canberra", lon: 149.13, lat: -35.31}
        {id: "Adelaide", lon: 138.6, lat: -34.93}
        {id: "Perth", lon: 115.84, lat: -31.96}
        {id: "Hobart", lon: 147.29, lat: -42.85}
        {id: "Darwin", lon: 130.85, lat: -12.43}
      ]
   }
   mark: circle
   encoding: {
     longitude: {
       field: lon
       type: quantitative
     } 
     latitude: {
       field: lat
       type: quantitative
     }
     tooltip: {
       field: id
       type: nominal
     }
   }
   size: {
     value: 12
   }
}

Any ideas as to how I can fix this and 1) see my points; and--with--hope 2) get the tooltip working once my points display.

Thanks!

[SpaceMoose]

OK. I've made some progress--I found a bug in my data, and after having a closer look at the Vega tutorial for plotting US airports and air travel routes, I came up with an improved script that displays the points but in the wrong places:

{
  $schema: https://vega.github.io/schema/vega/v3.0.json
  config: {
    kibana: {
      type: map
      projection: projection
      latitude: -25
      longitude: 135
      zoom: 4
      mapstyle: true
      minZoom: 2
      maxZoom: 7
      zoomControl: true
      scrollWheelZoom: false
      delayRepaint: true
      }
   }
  data: {
      // List of Australian Capital Cities,
      // initially in latitude/longitude,
      // transformed into X,Y coordinates
      name: cities
      values: [
        {id: "Sydney", lon: 151.21, lat: -33.87}
        {id: "Brisbane", lon: 153.02, lat: -27.46}
        {id: "Melbourne", lon: 144.96, lat: -37.81}
        {id: "Canberra", lon: 149.13, lat: -35.31}
        {id: "Adelaide", lon: 138.6, lat: -34.93}
        {id: "Perth", lon: 115.84, lat: -31.96}
        {id: "Hobart", lon: 147.29, lat: -42.85}
        {id: "Darwin", lon: 130.85, lat: -12.43}
      ],
      // Transform lon/lat to x/y for the map.
      transform: [
        {
          type: geopoint
          projection: projection
          fields: ["lon", "lat"]
        }
      ]
   }
   // Set the map projection
   projections: [
     {
       name: "projection"
       type: "mercator"
     }
   ]
   encoding: {
     longitude: {
       field: lon
       type: quantitative
     } 
     latitude: {
       field: lat
       type: quantitative
     }
     tooltip: {
       field: id
       type: nominal
     }
   }
   marks: [
     {
       type: symbol
       from: {data: "cities"}
       encode: {
         enter: {
           size: {value: 100}
           fill: {value: "black"}
           stroke: {value: "orange"}
        }
        update: {
          x: {field: "x"}
          y: {field: "y"}
        }
      }
     }
   ]
}

The map looks like this:

So, arguably the points' relative positions are correct, except for a mis-scaling and displacement.
And, of course, the tooltip I've added isn't working...

Any thoughts on how I can fix these two annoying problems?

Thanks!

[SpaceMoose]

Also, the code I just posted has another odd property: The points shift in location--but not in arrangement--when I zoom in on the map:

and

So, there's something terribly wrong with my map configuration. Please--could someone within Elastic's development team who work on Vega please offer some advice?

[Nathan_Reese]

I am not sure about your vega questions, but 6.7 will include a maps application that will allow for displaying documents from an elasticsearch query. That may be a more robust solution

[SpaceMoose]

Thanks Nathan. Sadly, I'm under the hammer to deliver something now. But, I'll keep an eye out for the new feature--will this replace the Coordinate Map visualisation that currently exists in Kibana, or is it something entirely new?

[SpaceMoose]

OK. At last I have a solution! The working code is pasted below:

// Simple map of Australia's Capital Cities
// With trivial tooltip.
//
{
  $schema: https://vega.github.io/schema/vega/v3.0.json
  config: {
    kibana: {
            type: "map"
            latitude: -25.5
            longitude: 131 
            zoom: 4
            }
    }
  data: [
    {
      // List of Australian Capital Cities
      // initially in latitude/longitude,
      // transformed into X,Y coordinates
      "name": "cities",
	      "values": [
	        {"city": "Sydney", "lon": 151.21, "lat": -33.87, "pop": 4823991},
	        {"city": "Brisbane", "lon": 153.02, "lat": -27.46, "pop": 2270800},
	        {"city": "Melbourne", "lon": 144.96, "lat": -37.81, "pop": 4485211},
	        {"city": "Canberra", "lon": 149.13, "lat": -35.31, "pop": 397397},
	        {"city": "Adelaide", "lon": 138.6, "lat": -34.93, "pop": 1295714},
	        {"city": "Perth", "lon": 115.84, "lat": -31.96, "pop": 1943858},
	        {"city": "Hobart", "lon": 147.29, "lat": -42.85, "pop": 222356},
	        {"city": "Darwin", "lon": 130.85, "lat": -12.43, "pop": 136828}
	      ]
      transform: [
        {
          type: geopoint
          projection: projection
          fields: ["lon", "lat"]
        }
      ]
    }
  ]
  marks: [
    {
       type: symbol
       from: {data: "cities"}
       encode: {
         enter: {
           size: {value: 100}
           fill: {value: "black"}
           stroke: {value: "orange"}
           tooltip: [
            { 
             signal: "{title: datum.city, '2016 POPULATION': + datum.pop}"               
             }
           ]
        }
        update: {
          x: {field: "x"}
          y: {field: "y"}
        }
      }
     }
  ]
}

And here is the resulting map:

The map bounding box is not ideal--far too much ocean! From the code you'll note zoom is set to 4. I could use some help with that. Setting zoom to 5 is too tight and clips off parts of Australia (and a value like 4.2 gets truncated to 4 while 4.5 gets rounded up to 5). What I'd really like to get is something like Lambert Conformal with set standard parallels--just like Australia's Bureau of Meteorology uses on their national maps.