Published
Edited
Aug 31, 2020
3 stars
Insert cell
Insert cell
Insert cell
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
// 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 = {
// your spec goes here:
yield {
"$schema": "https://vega.github.io/schema/vega-lite/v3.4.0.json",
"data": {
"url": "https://vega.github.io/vega-datasets/data/gapminder-health-income.csv"
},
"config": {"view": {"width": 400, "height": 300}},
"mark": "point",
"encoding": {
"x": {"type": "quantitative", "field": "income"},
"y": {"type": "quantitative", "field": "health"}
}
}
}
Insert cell
embed(specExercise1)
Insert cell
Insert cell
specExercise2 = {
// your spec goes here:
yield {
"$schema": "https://vega.github.io/schema/vega-lite/v3.4.0.json",
"data": {
"url": "https://vega.github.io/vega-datasets/data/gapminder-health-income.csv"
},
"config": {"view": {"width": 400, "height": 300}},
"mark": "point",
"encoding": {
"x": {"type": "quantitative", "field": "income", "scale": {"type": "log"}},
"y": {"type": "quantitative", "field": "health"}
}
}
}
Insert cell
embed(specExercise2)
Insert cell
Insert cell
specExercise3 = {
// your spec goes here:
yield {
"$schema": "https://vega.github.io/schema/vega-lite/v3.4.0.json",
"data": {
"url": "https://vega.github.io/vega-datasets/data/gapminder-health-income.csv"
},
"config": {"view": {"width": 400, "height": 300}},
"mark": "point",
"encoding": {
"size": {"type": "quantitative", "field": "population"},
"x": {"type": "quantitative", "field": "income", "scale": {"type": "log"}},
"y": {"type": "quantitative", "field": "health"}
}
}
}
Insert cell
embed(specExercise3)
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more