GeoJSON and Vega-Lite App

Ask the community Extensions
#1

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
image638×508 3.09 KB

#2

I am starting to get the sense that perhaps the formula field is delivering text instead of JSON; Vega-Lite unable to parse or just ignores the data since it’s not an object. Very difficult to diagnose when the Vega-Lite graphics is blank and no errors are present.

#3

Correct. If you’re using concatenation in a formula to build an output string that looks like JSON, it’s still just a string when passed to an app. I’ve not used the Vega-Lite app myself, so I can’t offer more specific guidance on how to get it to work. Perhaps @Bill.French can offer some assistance?

#4

Close.

I think it may be Vega itself that is undertaking the [assumed] task of serializing the formula-generated data into an object that it can plot. Since the field is always recalculated, this could be causing the issues.

Perhaps the parser is smart enough to see a fully-baked serialized string (i.e., static JSON) but barfs on any string that uses formula functions in a late-binding process.

Idea - try copying the dynamically-generated features column into another text column and testing it again. If this works, you simply need a script block that copies the features column by value into a static data column that Vega is delighted to render.

And if the the script block actually works, it will demonstrate how you can abandon the formula approach altogether.

This demonstrates a long-held disenchantment I’ve had with formula fields; they really aren’t fields. Instead, they’re computational conditionals that are rendered at the last minute unlike spreadsheet fields which are like binary objects; they can have a static value based on a dynamic formula. I hate this aspect of Airtable’s architecture because it rules out the ability for a field to contain a value and optionally update based on a formula.

1 Like
#5

Thanks for the tips @Bill_French and @Justin_Barrett, much appreciated.

I performed some additional testing by manually copying the dynamic generated data into a long text field as suggested. Also tried a single line text field since the JSON code is rather short. Neither worked. I did double check the data via static configuration to make sure nothing was wrong with the JSON data set.

In addition, I also tried fetching the GeoJSON data via a URL instead of the table. That also produced nothing. As a test, I copy-pasted the data from the URL into the Vega Lite for static configuration JSON. The static configuration works.

#6

My hunch - you have a serialization issue. Is the JSON content you are storing into the text field in object or stringified format? Can you edit this JSON using the JSON editor in Airtable?

#7

I am under the impression that a text field can only contain a stringified JSON, not an object. Else, I don’t know how to force it to be an object instead of text. Perhaps AT needs a JSON Object field type to make this happen.

I did try the JSON Editor method to modify the code in the text field(s) as suggested, making sure the editor saved and there were no errors.

I also tried creating a view with a single record … just in case it was getting hung up trying to generate the output from multiple records. Also tried wrapping the single record into a FeatureCollection in case Vega was looking for the additional JSON wrapper. Yes, also used the JSON Editor app for this.

So far I have the same results, just a blank interface showing the title, no graphics, no errors.

#8

Can you share a base with just a sample table that demonstrates the failing configuration. Happy to take a look. If so, share to bfrench@globaltc.com (my pro account).

#9

Sample table shared. Dashboard 1 has the apps.

#10

Thanks Bob! I can’t do much in the way of debugging without the ability to inspect the field configurations and perform read/write operations. It won’t even allow me to change the settings in Vega -

image
image1172×928 66.1 KB

#11

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

#12

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

#13

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
image2800×1088 397 KB

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
image1262×1510 94.9 KB

#14

@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.

#15

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

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.
#16

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