A ♥ for data visualization + interaction
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"}
}
}
}
embed = require("vega-embed");
embed(plot)
// 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())
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"}
}
}
}
embed(specExercise1)
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"
}
}
embed(specExercise2)
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"
}
}
embed(specExercise3)
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.
