Vega editor "table is empty"

Question

I am trying to build an elementary plot showing proportion of energy source by continent. I've already cleaned up the data and uploaded a .csv file here : https://raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015 Yet when I try to import it in vega lite editor, it states that my csv is empty.

Here is the code I've written :

{
  "data": {"url": "raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015"},
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "continent",
      "type": "nominal",
      "domain":["Africa","Europe","Asia","North America","South America","Asia"],
      "title": "Continent"
    },
    "y": {
      "field":"prop",
      "aggregate":"sum",
      "type": "quantitative",
        "stack":  "normalize"
    },
    "color": {
      "field": "share energy",
      "type": "nominal",
      "scale": {
        "domain": ["coal_share_energy","gas_share_energy","nuclear_share_energy",                                       "hydro_share_energy","renewables_share_energy","oil_share_energy"],
        "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
      },
      "title": "Weather type"
    }
  }
}

Answer 1

The Url you have provided in your data config should also contain https:// and then need to specify the format of data. Refer the below config or try fiddle:

{
  "data": {
    "url": "https://raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015",
    "format": {"type": "csv"}
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "continent",
      "type": "nominal",
      "domain": [
        "Africa",
        "Europe",
        "Asia",
        "North America",
        "South America",
        "Asia"
      ],
      "title": "Continent"
    },
    "y": {
      "field": "prop",
      "aggregate": "sum",
      "type": "quantitative",
      "stack": "normalize"
    },
    "color": {
      "field": "share energy",
      "type": "nominal",
      "scale": {
        "domain": [
          "coal_share_energy",
          "gas_share_energy",
          "nuclear_share_energy",
          "hydro_share_energy",
          "renewables_share_energy",
          "oil_share_energy"
        ],
        "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
      },
      "title": "Weather type"
    }
  }
}

Answer 2

If you look in the Javascript console, you'll see the issue:

loader.js:175 GET https://vega.github.io/editor/raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015 404

You are attempting to load the dataset with a relative rather than absolute URL, which is returning a 404; you can fix this by adding https:// to the front of your URL.

Additionally, since your URL does not include a file extension, you must tell Vega-Lite that the data is CSV-formatted using a format specification. With these two changes, your chart works (open in editor):

{
  "data": {
    "url": "https://raw.githubusercontent.com/mkeutgen/dataviz_energy/master/prop_source_by_continent_2015",
    "format": {"type": "csv"}
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "continent",
      "type": "nominal",
      "domain":["Africa","Europe","Asia","North America","South America","Asia"],
      "title": "Continent"
    },
    "y": {
      "field":"prop",
      "aggregate":"sum",
      "type": "quantitative",
        "stack":  "normalize"
    },
    "color": {
      "field": "share energy",
      "type": "nominal",
      "scale": {
        "domain": ["coal_share_energy","gas_share_energy","nuclear_share_energy",
                   "hydro_share_energy","renewables_share_energy","oil_share_energy"],
        "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
      },
      "title": "Weather type"
    }
  }
}