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?
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/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>