Help

Re: GeoJSON and Vega-Lite App

2040 2
cancel
Showing results for 
Search instead for 
Did you mean: 
Bob_Clarke
6 - Interface Innovator
6 - Interface Innovator

I am having difficulties getting GeoJSON data from a table to generate a Vega-Lite graphic. My table has one formula field called MapGeo which generates the GeoJSON “Feature” (ie the shape), one Feature per record. The “data” property is set as follows. Vega Lite plots the title, nothing else, just blank. No errors shown.

"data":{"values":{"field":"MapGeo","type":"json"}}

I performed a test to see if the data from the table is valid. I copy-pasted the features from each record and set to static data (not from the table). That worked! Below is the static configuration that works, showing two rectangles.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": "Test GeoJSON",
  "width": "container",
  "height": "container",
  "data":{"values":[

    { "type": "Feature",
       "geometry": {
         "type": "LineString",
         "coordinates": [[2,3],[4,3],[4,5],[2,5],[2,3]]
 
       }
    },

    { "type": "Feature",
       "geometry": {
         "type": "LineString",
         "coordinates": [[0,0],[5,0],[5,2],[0,2],[0,0]]
       }
    }

  ]},

  "mark": {
    "type": "geoshape",
    "fill": "#4cc09d",
    "stroke": "#757575",
    "strokeWidth": 2.5
  }

}

However, I need to pull the data from the table, cannot be static. What am I missing?

My suspicion is that the “data” property is not setup correctly and/or that the data coming from the table is wrapped up in additional JSON; which I cannot see in Vega-Lite. Probably need to reference some additional properties to map the data to the feature.

Any suggestion would be appreciated.

Example of the output…
image

14 Replies 14

No worries - I made a duplicate of your base and have full access. Yea! for poor security in Airtable!

I kind of figured you would be able to copy it. Thanks for looking at this.

Update - I was able to create a number of examples where features can be stored as JSON and processed in Vega-Lite. I had to refresh my memory on this and to achieve it I used a custom app like this.

Doing it in the Vega-Lite Airtable app is not so easy, but it is possible using transformations and a data source that describes the data source format as json (specifically geoJSON). But doing so requires a very different data model than you’ve shared with me. Example…

image

I believe data as geoJSON features is only possible if each record contains a feature, so you probably have to rethink your data model to get where you want to go. Also, you will need to transform the data as it is absorbed into the Vega-engine. This, as an example, will not work.

But this approach will… as you can see in this snippet from the mapping example shown here, I’m updating the Vega data object with the feature objects stored in Airtable fields.

image

@Bill_French Thank you kindly for the feedback. I have to agree that plotting the geoshape marks with AirTable data is not simple; even though it works perfectly well as static inline data. I will continue to poke at it some more.

Which is the same as saying it doesn’t work at all with Airtable data. :winking_face:

The challenge is that Airtable’s custom app made openly available in GitHub assumes the data is an array of records and fields, and as such, I think you you have four possible outs:

  1. Create a custom version of the custom app modified to support a collection of JSON features from records, or a blob of JSON features from one record.
  2. Create a Vega-Lite object that transforms the blob of JSON features into an array.
  3. Create a Vega-Lite object that reads the JSON data source in the specified format.
  4. Abandon JSON as the data source and use the native mechanisms that Airtable designed into the Vega-Lite custom app.