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

Question

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

219 Views Asked by AudioBubble At 28 April 2025 at 20:30

I am trying to create a map using Vega-Lite.

Then I tried to create a map about the rainfall and city in year 2019. However, it does not display any map in the webpage at all. This is my first webpage design, I'm not sure where and how can I debug the error. Anyone knows in which part do I make a mistake?

After debug the error said so: WARN Loading failed https://github.com/.....csv {}, why this happen? Can't I just copy the CSV link on Github?

Original Q&A

There are 1 best solutions below

**Artem Fedotov** · Accepted Answer

look at the console, when you open your file in browser. You will get "WARN", "Loading failed", "data/us-10m.json"

I didn't find current file at your repo.

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

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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>

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

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in VEGA-LITE

Trending Questions

Popular # Hahtags

Popular Questions