Importing data features into Vega-Lite

My attempt to plot area shapes using vega-lite is resulting in the following warning message.

[Warning] Dropping {"type":"geojson"} from channel "shape" since it does not contain any data field, datum, value, or signal.

The data is loading successfully, as I can view it in the vega-lite editor/viewer, and I have provided sample records below and in the link to the vega-lite snippet.

The issue seems to be related to correctly pointing to the fields in the data.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "OBJECTID": 4691,
        "WD21CD": "E05011118",
        "WD21NM": "Acocks Green",
        "WD21NMW": " ",
        "BNG_E": 412052,
        "BNG_N": 282830,
        "LONG": -1.8241,
        "LAT": 52.4433,
        "SHAPE_Length": 0.0924,
        "SHAPE_Area": 0.0005,
        "geometry": {
          "type": "MultiPolygon",
          "coordinates": [
            [
              [
                [-1.8093, 52.4454],
                [-1.8173, 52.4324],
                [-1.8253, 52.4293],
                [-1.839, 52.4341],
                [-1.8355, 52.4382],
                [-1.831, 52.4483],
                [-1.8345, 52.4522],
                [-1.824, 52.4571],
                [-1.8139, 52.4547],
                [-1.8093, 52.4454]
              ]
            ]
          ]
        }
      },
      {
        "OBJECTID": 4692,
        "WD21CD": "E05011119",
        "WD21NM": "Allens Cross",
        "WD21NMW": " ",
        "BNG_E": 401463,
        "BNG_N": 279538,
        "LONG": -1.9799,
        "LAT": 52.4138,
        "SHAPE_Length": 0.0959,
        "SHAPE_Area": 0.0002,
        "geometry": {
          "type": "MultiPolygon",
          "coordinates": [
            [
              [
                [-1.9618, 52.4212],
                [-1.9717, 52.4163],
                [-1.9758, 52.4079],
                [-1.9835, 52.4095],
                [-1.9978, 52.4097],
                [-1.986, 52.4167],
                [-1.975, 52.4205],
                [-1.9807, 52.4247],
                [-1.9754, 52.4268],
                [-1.9679, 52.4214],
                [-1.9618, 52.4212]
              ]
            ]
          ]
        }
      }
    ],
    "format": {"type": "json"}
  },
  "mark": "geoshape",
  "encoding": {"shape": {"type": "geojson"}},
  "width": 500,
  "height": 500
}
javascriptrjsonvega-litejsonlite

Answer №1

After some investigation, I discovered that my JSON was not properly formatted. I mistakenly used jsonlite::toJSON in R to convert a Simple Feature to JSON instead of using geojsonsf::sf_geojson(). The former only captures the feature's properties.

If you want to learn more, check out Converting data to JSON with all objects included

The correct code snippet is shown below, pay attention to the data definition where the FeatureCollection and features are specified.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "OBJECTID": 4691,
            "WD21CD": "E05011118",
            "WD21NM": "Acocks Green",
            "BNG_E": 412052,
            "BNG_N": 282830,
            "LONG": -1.82411,
            "LAT": 52.443321,
            "SHAPE_Length": 0.09237554909129655,
            "SHAPE_Area": 0.000522111171395259
          },
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [-1.809263305999934, 52.44539377400008],
                  [-1.817314732999932, 52.43236735700003],
                  [-1.825263312999937, 52.42930558300003],
                  [-1.839003390999949, 52.434050100000036],
                  [-1.809263305999934, 52.44539377400008]
                ]
              ]
            ]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "OBJECTID": 4692,
            "WD21CD": "E05011119",
            "WD21NM": "Allens Cross",
            "WD21NMW": " ",
            "BNG_E": 401463,
            "BNG_N": 279538,
            "LONG": -1.97991,
            "LAT": 52.413849,
            "SHAPE_Length": 0.09592937334184568,
            "SHAPE_Area": 0.00023886389782556888
          },
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [-1.961811859999955, 52.42117633300006],
                  [-1.971725540999955, 52.41631029900003],
                  [-1.975847800999929, 52.40792152500006],
                  [-1.983516194999936, 52.409539153000026],
                  [-1.967944932999956, 52.42144882300005],
                  [-1.961811859999955, 52.42117633300006]
                ]
              ]
            ]
          }
        }
      ]
    },
    "format": {"type": "json", "property": "features"}
  },
  "mark": {"type": "geoshape", "strokeWidth": "1", "stroke": "White"},
  "encoding": {
    "tooltip": {"field": "properties.WD21NM"},
    "shape": {"type": "geojson"}
  },
  "width": 500,
  "height": 500
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with implementing a conditional template component within an AngularJS directive

As a Java/Python developer, I found myself working on an AngularJS project recently. While most concepts were easy to grasp, some of the syntax and functionality still elude me. The code I have handles login/logout functionality. If the user is logged in ...

javascriptangularjsangularjs-directive

Color each row in PrimeVue DataTable based on the value of a specific column item

Recently, I came across a PrimeVue DataTable with a specific structure: <DataTable value="info"> <Column header="Name" field="name" /> <Column header="Desc." field="desc" /> <Colu ...

javascriptcssvue.jsdatatableprimevue

Is there a way to keep a label in a Material-UI TextField from getting obscured by an adornment when the input is not in focus?

Here is the code for my custom TextField component: <TextField fullWidth: true, classes, helperText: errorText, FormHelperTextProps: getInputProps({ error }), InputProps: getInputProps({ error, endAdornment: error ? <Warning ...

javascriptreactjsmaterial-ui

Retrieve data by sorting based on the count column in a joined table with Sequelize

I've been struggling to make this work for some time and was hoping for some guidance. OBJECTIVE: I'm attempting to sort the posts by the number of likes they currently have. CURRENT: const posts = await db.post.findAll({ include: [ db.user ...

javascriptsequelize.js

Interpreting an undefined HTTP GET request within a Node.js server

I am encountering an issue within my Node.js application. When I send an http get request through an ajax call on the client-side, the server-side does not recognize the request data and returns an "undefined" error message. This problem is puzzling to me ...

javascriptjqueryajaxnode.jsget-request

Method to store JSON data into a file

Here is my code: def saveJSONget(site, code): response = requests.get(site) json_str = json.dumps(response.json()) if not response.status_code == code: file = open("PATH", 'w') file.write(str(respo ...

pythonjsonseleniumpostget

Tips for eliminating choices upon button press

How do I remove nested options inside a select element upon button click? I'm not sure where my mistake is, could it be in the for loop? var select = document.getElementById('colorSelect'); var options = document.getElementsByTagName(&ap ...

javascripthtml

Utilizing a GLTF asset as the main Scene element in a Three.js project

I'm struggling with incorporating a gltf model as the main scene in Three.js. Specifically, I have a gltf model of an apartment that I want to load from inside and not outside the apartment. I also need the controls to work seamlessly within the apart ...

javascripttypescriptthree.jsgltf

Automatic Addition of Row Numbers Enabled

I'm currently exploring coding and experimenting with creating a scorekeeper for family games. I've managed to add rows dynamically and automatically sum up the entered information in the "total" row at the bottom. However, I'm facing an iss ...

javascriptjqueryhtmlcss

An error of type 'TypeError' has occurred, where it is unable to access the property 'render' of an undefined element in

I'm using a function in my controller to render the "result" in my "home-page" view, which is calling my model to execute the query. exports.searchNoms = (req, res) => { getDatabaseModel.searchNoms(req).then(function(result) { console.l ...

javascriptnode.jsexpress

What is the best way to dynamically update or display unique CSS styles when a service is invoked or provides a response in AngularJS using JavaScript

Seeking to display a unique CSS style on my HTML FORM prior to invoking a service in my code and then reverting back after receiving the response. I have implemented the use of ng-class to dynamically add the class when the boolean activeload1 is set to tr ...

javascripthtmlcssangularjs

Use jQuery to swap out every nth class name in the code

I am looking to update the 6th occurrence of a specific div class. This is my current code <div class="disp">...</div> <div class="disp">...</div> <div class="disp">...</div> <div class="disp">...</div> < ...

javascriptjqueryhtmlcss

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...

javascriptjqueryhtmlcssajax

Is there a way to retrieve the href value from a modal window upon clicking the link?

When clicking on the a href, I am attempting to retrieve a value in my pop-up window. I am using magnificPopup JavaScript Below is the code for my a href tag and I want to fetch the "data-stream" value in the pop-up window. <a class="popup-with-zoom ...

javascriptphppopupbootstrap-modalcodeigniter-3

Using Google Maps Api (JSON) to calculate the distance between two destinations

Seeking the distance between two locations using Google API, I stumbled upon JSON for the first time. The variable $json_a is supposed to decode the JSON, but I keep encountering an error: "Notice: Undefined index: legs in C:\xampp\htdocs\ap ...

phpjsongoogle-maps-api-3

Transform Ajax response into dropdown menu option

I have made an ajax call and received HTML as a response. Now, I need to convert this output into options and add them to select tags on my webpage. <div class="views-element-container"> <div class="view view-contact-view-id-conta ...

javascripthtmljqueryajax

using async/await to retrieve data from a Google spreadsheet in Node.js

How can I use a for-loop to iterate through sheets in a Google spreadsheet and access specific cells within each sheet? I have a Google spreadsheet with Sheet1, Sheet2,... , Sheet5 where the cell values are Value1,..., Value5. The expected result should be ...

javascriptnode.jsgoogle-sheetsasync-awaitgoogle-sheets-api

Leveraging mongorestore for efficiently populating a temporary collection with numerous documents

I am working with an array of objects. const arr = [ { name: 'somename', age: 25, }, { name: 'othername', age: 15, }, ] After successfully updating my collection with the above array: MyCollection.insertMany(a ...

javascriptnode.jsjsonmongodbbson

The EJS file is failing to display the stylesheet even though it is being pulled from the

Encountering a strange issue where the page routed to display additional information about a specific record from my database list on the homepage is not loading the stylesheets located in my partial/head, despite successfully passing the object informatio ...

javascriptnode.jsexpressejs

Validate user credentials using both jQuery and PHP to display an error message if login details are incorrect

Working on a form validation using jQuery and PHP. I am utilizing an .ajax request to the server in order to verify if data has been entered into the form, and execute different actions based on the callback response received from the server. For instance, ...

phpjavascriptjqueryajax