从 Github 复制 CSV link 并将其与导致错误的绘图代码结合

Question

我正在尝试使用 Vega-Lite 创建地图。

然后我尝试制作一张关于 2019 年降雨量和城市的地图。但是，它根本不在网页中显示任何地图。这是我的第一个网页设计，我不确定在哪里以及如何调试错误。有谁知道我哪一部分出错了？

调试后报错如下： WARN 加载失败https://github.com/.....csv{}，为什么会这样？我不能只在 Github 上复制 CSV link 吗？

Answer 1

当您在浏览器中打开文件时，请查看 console。您将收到“WARN”、“加载失败”、“data/us-10m.json”

我没有在您的存储库中找到当前文件。

<!DOCTYPE html>
<html>
  <head>
    <title>My_First_Webpage</title>
    <meta charset="utf-8" />

    <script src="https://cdn.jsdelivr.net/npm/vega@5.16.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.16.8"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script>

    <style media="screen">
      /* Add space between Vega-Embed links  */
      .vega-actions a {
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Vega-Lite Visualization</h1>
    <!-- Container for the visualization -->
    <div id="vis"></div>

    <script>
      // Assign the specification to a local variable vlSpec.
      var vlSpec = {
          "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
          "width": 500,
          "height": 300,
          "layer": [
              {
                  "data": {
                      "url": "data/us-10m.json",
                      "format": {
                          "type": "topojson",
                           "feature": "states"
                           }
                        },
                        "projection": {
                           "type": "albersUsa"
                       },
                        "mark": {
                           "type": "geoshape",
                           "fill": "lightgray",
                           "stroke": "white"
                        }
                    },
                   { 
                      "data": {
                         "url": "https://github.com/BocongZhao823/My_First_Webpage-/blob/main/rainfall_tidy.csv"
                       },
                      "projection": {
                           "type": "albersUsa"
                       },
                         "mark": "circle",
                         "encoding": {
                               "longitude": {
                                  "field": "longitude",
                                    "type": "quantitative"
                                },
                               "latitude": {
                                    "field": "latitude",
                                    "type": "quantitative"
                                },
                              "size": {"value": 10},
                             "color": {"value": "steelblue"}
                           }
                       }
                 ]
            };

      // Embed the visualization in the container with id `vis`
      vegaEmbed('#vis', vlSpec);
    </script>
  </body>
</html>

从 Github 复制 CSV link 并将其与导致错误的绘图代码结合

Copy CSV link from Github and combine it with plots codes led error

javascript

html

vega-lite