维加斯编辑 "table is empty"

Question

我正在尝试构建一个显示各大陆能源比例的基本图。我已经清理了数据并在此处上传了一个 .csv 文件：https://raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015 然而，当我尝试在 vega lite 编辑器中导入它时，它指出我的 csv 是空的。

这是我写的代码：

{
  "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

如果您查看 Javascript 控制台，您会发现问题：

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

您正在尝试使用相对而非绝对 URL 加载数据集，这将返回 404；您可以通过将 https:// 添加到 URL.

的前面来解决此问题

此外，由于您的 URL 不包含文件扩展名，您必须告诉 Vega-Lite 数据是使用 format 规范的 CSV 格式。通过这两项更改，您的图表有效 (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"
    }
  }
}

Answer 2

您在data配置中提供的Url也应该包含https://，然后需要指定format数据。参考下面的配置或尝试 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"
    }
  }
}

维加斯编辑 "table is empty"

Vega editor "table is empty"

javascript

vega-lite