如何将本地 html 文件放入网页
How to put local html file in a webpage
我正在尝试使用 Vega-Lite 绘制地图。然而，作为一个学生，才刚刚开始自学。有几件事我很困惑。
我不知道JavaScript和Vega-Lite之间的关系？我们可以使用 Vega-Lite 来绘制地图。那么，JavaScript绘制地图有什么作用呢？
（即 'JavaScript' 格式和 'Vega-Lite' 格式的代码有什么区别？'Vega-Lite' 是一种新的编程语言吗？）（即我试图搜索如何编写 JavaScript 编码事实证明它看起来与为 Vega-Lite 提供的寺庙完全不同）
我不知道如何将 Vega-Lite 代码组合成 HTML 代码（以便放入网页）。
我试图在 Vega-Lite 网站 (https://vega.github.io/vega-lite/tutorials/getting_started.html) 上查看神庙。但是，我不明白如果我想发布另一个 vega-Lite 而不是给定的示例，我应该更改和组合现有代码的哪一部分（因为他们没有太多评论，我才刚刚开始学习它。
下面我写的代码在网页上没有给我任何‘地图’，不知道哪里出错了？
# Codes I tried to combine with HTML (This is just a purely Vega-Lite code on its website)
<!DOCTYPE html>
<html>
<head>
<title>Vega-Lite Bar Chart</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>Template for Embedding 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,
"data": {"url": "data/airports.csv"},
"projection": {"type": "albersUsa"},
"mark": "point",
"encoding": {
"longitude": {"field": "longitude", "type": "quantitative"},
"latitude": {"field": "latitude", "type": "quantitative"},
"size": {"value": 10}
},
"config": {"view": {"stroke": "transparent"}}
};
// Embed the visualization in the container with id `vis`
vegaEmbed('#vis', vlSpec);
</script>
</body>
</html>
- GeoJSON、TopoJSON 和excel 文件有什么关系？Vega-Lite 支持TopoJSON。我们还说我们可以使用 'excel/csv file' 作为数据域。那为什么还需要将GeoJSON转为TopoJSON并放入HTML呢？他们在这里扮演什么角色？如果我的数据集已经包含“经度”和“纬度”以绘制地图，我可以避免这一步吗？
（即 GeoJSON、TopoJSON 只是另一种类似于 excel 的数据集吗？）
按顺序回答您的问题：
- I do not know the relationship between JavaScript and Vega-Lite?
Vega-Lite 是两件事：通过 JSON 指定图表的语法，以及一组 javascript 库来摄取此 JSON 并呈现图表。
- I do not know how to combine the Vega-Lite codes to HTML codes (in order to put in a webpage).
将 Vega-Lite 图表放在网页上需要将 vega-lite 图表规范（您称之为 Vega-Lite 代码）传递给 vega-embed javascript库（通过 javascript 发生，通常在 HTML 页面中）。您的示例是正确的，只是它引用了可能不存在的本地数据：
"data": {"url": "data/airports.csv"},
将此更改为完整 vega-datasets URL，图表将呈现在页面上：
"data": {"url": "https://vega.github.io/vega-datasets/data/airports.csv"}
- What is the relationship between GeoJSON, TopoJSON, and excel file?
这些都是表示数据的不同格式。 Vega-Lite 支持 TopoJSON 指定地理边界；如果您有其他格式的地理数据，则必须将其转换为 TopoJSON 才能与 Vega-Lite.
一起使用
请注意，TopoJSON 仅对地图边界是必需的。如果您有一个包含纬度和经度列的 CSV 或 JSON 数据集，您可以将它们显示在地图背景上，而无需转换为另一种格式；一个例子在这里：https://vega.github.io/editor/#/examples/vega-lite/geo_layer
我正在尝试使用 Vega-Lite 绘制地图。然而，作为一个学生，才刚刚开始自学。有几件事我很困惑。
我不知道JavaScript和Vega-Lite之间的关系？我们可以使用 Vega-Lite 来绘制地图。那么，JavaScript绘制地图有什么作用呢？
（即 'JavaScript' 格式和 'Vega-Lite' 格式的代码有什么区别？'Vega-Lite' 是一种新的编程语言吗？）（即我试图搜索如何编写 JavaScript 编码事实证明它看起来与为 Vega-Lite 提供的寺庙完全不同）我不知道如何将 Vega-Lite 代码组合成 HTML 代码（以便放入网页）。 我试图在 Vega-Lite 网站 (https://vega.github.io/vega-lite/tutorials/getting_started.html) 上查看神庙。但是，我不明白如果我想发布另一个 vega-Lite 而不是给定的示例，我应该更改和组合现有代码的哪一部分（因为他们没有太多评论，我才刚刚开始学习它。
下面我写的代码在网页上没有给我任何‘地图’，不知道哪里出错了？
# Codes I tried to combine with HTML (This is just a purely Vega-Lite code on its website)
<!DOCTYPE html>
<html>
<head>
<title>Vega-Lite Bar Chart</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>Template for Embedding 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,
"data": {"url": "data/airports.csv"},
"projection": {"type": "albersUsa"},
"mark": "point",
"encoding": {
"longitude": {"field": "longitude", "type": "quantitative"},
"latitude": {"field": "latitude", "type": "quantitative"},
"size": {"value": 10}
},
"config": {"view": {"stroke": "transparent"}}
};
// Embed the visualization in the container with id `vis`
vegaEmbed('#vis', vlSpec);
</script>
</body>
</html>
- GeoJSON、TopoJSON 和excel 文件有什么关系？Vega-Lite 支持TopoJSON。我们还说我们可以使用 'excel/csv file' 作为数据域。那为什么还需要将GeoJSON转为TopoJSON并放入HTML呢？他们在这里扮演什么角色？如果我的数据集已经包含“经度”和“纬度”以绘制地图，我可以避免这一步吗？ （即 GeoJSON、TopoJSON 只是另一种类似于 excel 的数据集吗？）
按顺序回答您的问题：
- I do not know the relationship between JavaScript and Vega-Lite?
Vega-Lite 是两件事：通过 JSON 指定图表的语法，以及一组 javascript 库来摄取此 JSON 并呈现图表。
- I do not know how to combine the Vega-Lite codes to HTML codes (in order to put in a webpage).
将 Vega-Lite 图表放在网页上需要将 vega-lite 图表规范（您称之为 Vega-Lite 代码）传递给 vega-embed javascript库（通过 javascript 发生，通常在 HTML 页面中）。您的示例是正确的，只是它引用了可能不存在的本地数据：
"data": {"url": "data/airports.csv"},
将此更改为完整 vega-datasets URL，图表将呈现在页面上：
"data": {"url": "https://vega.github.io/vega-datasets/data/airports.csv"}
- What is the relationship between GeoJSON, TopoJSON, and excel file?
这些都是表示数据的不同格式。 Vega-Lite 支持 TopoJSON 指定地理边界；如果您有其他格式的地理数据，则必须将其转换为 TopoJSON 才能与 Vega-Lite.
一起使用请注意，TopoJSON 仅对地图边界是必需的。如果您有一个包含纬度和经度列的 CSV 或 JSON 数据集，您可以将它们显示在地图背景上，而无需转换为另一种格式；一个例子在这里：https://vega.github.io/editor/#/examples/vega-lite/geo_layer