The avatar for @mahog
Marius Hogräfer
A ♥ for data visualization + interaction
Published
DAVI - Vega-Lite Tutorial
Edited
Sep 7, 2020
2 forks
3 stars
DAVI - Vega-Lite Tutorial
Vega-Lite Demo: Let's make a Scatterplot Matrix
Vega-Lite Tutorial Part 1 - Let's make a Scatterplot
Vega-Lite Tutorial Part 2 - The EssentialsVega-Lite Tutorial Part 1 - Let's make a Scatterplot (Solution)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
plot = {
yield {
"$schema": "https://vega.github.io/schema/vega-lite/v3.4.0.json",
"data": {
"url": "https://vega.github.io/vega-datasets/data/cars.json"
},
"config": {"view": {"width": 400, "height": 300}},
"mark": "point",
"encoding": {
"color": {"type": "nominal", "field": "Origin"},
"x": {"type": "quantitative", "field": "Horsepower"},
"y": {"type": "quantitative", "field": "Miles_per_Gallon"}
}
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
embed = require("vega-embed");
Insert cell
Insert cell
embed(plot)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// preview the data by uncommenting the next line:
// p = fetch("https://vega.github.io/vega-datasets/data/gapminder-health-income.csv").then(d => d.text())
Insert cell
specExercise1 = {
// make your changes in the specification below:
yield {
"$schema": "https://vega.github.io/schema/vega-lite/v3.4.0.json",
"data": {
"url": "https://vega.github.io/vega-datasets/data/cars.json"
},
"config": {"view": {"width": 400, "height": 300}},
"mark": "point",
"encoding": {
"color": {"type": "nominal", "field": "Origin"},
"x": {"type": "quantitative", "field": "Horsepower"},
"y": {"type": "quantitative", "field": "Miles_per_Gallon"}
}
}
}
Insert cell
embed(specExercise1)
Insert cell
Insert cell
Insert cell
specExercise2 = {
// reuse your solution from the previous exercise by copy-and-pasting it here:
yield {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"mark": "circle"
}
}
Insert cell
embed(specExercise2)
Insert cell
Insert cell
Insert cell
specExercise3 = {
// reuse your solution from the previous exercise by copy-and-pasting it here:
yield {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"mark": "circle"
}
}
Insert cell
embed(specExercise3)
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more