I am trying to use Vega-Lite to draw a map. However, as a student just start self-learning it. There are a few things I am confused.
I do not know the relationship between JavaScript and Vega-Lite? We can use Vega-Lite to draw map. So, what role do JavaScript play in order to draw a map?
(i.e. What's the difference between writing codes in 'JavaScript' format and 'Vega-Lite' format? Is 'Vega-Lite' a new programming language? ) (i.e. I tried to search how to write JavaScript coding and turns out it looks quite different to that temple given for Vega-Lite)
I do not know how to combine the Vega-Lite codes to HTML codes (in order to put in a webpage). I tried to see the temple on Vega-Lite web (https://vega.github.io/vega-lite/tutorials/getting_started.html). But, I do not understand in which part of the existing codes should I change and combine if I want to publish another vega-Lite instead of the given example (as they do not have much comments and I just start learning it.
The following code I write here does not give me any ‘Map’ on Webpage, I do not know where turns wrong?
# 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>
Answering your questions in order:
- I do not know the relationship between JavaScript and Vega-Lite?
Vega-Lite is two things: a grammar for specifying charts via JSON, and a set of javascript libraries to ingest this JSON and render a chart.
- I do not know how to combine the Vega-Lite codes to HTML codes (in order to put in a webpage).
Putting a Vega-Lite chart on a webpage requires passing the vega-lite chart specification (what you call the Vega-Lite codes) to the vega-embed javascript library (which happens via javascript, often within an HTML page). Your example is correct, except that it refers to local data that probably doesn't exist:
"data": {"url": "data/airports.csv"},
Change this to the full vega-datasets URL, and the chart will render on the page:
"data": {"url": "https://vega.github.io/vega-datasets/data/airports.csv"}
- What is the relationship between GeoJSON, TopoJSON, and excel file?
These are all different formats for representing data. Vega-Lite supports TopoJSON for specifying geographic boundaries; if you have geographic data in another format, you'll have to convert it to TopoJSON in order to use it with Vega-Lite.
Note that TopoJSON is only required for map boundaries. If you have a CSV or JSON dataset containing columns of latitudes and longitudes, you can display them on a map background without having to convert to another format; an example is here: https://vega.github.io/editor/#/examples/vega-lite/geo_layer