A ♥ for data visualization + interaction
Vega-Lite Demo: Let's make a Scatterplot Matrix
md`
We start off with an emty specification, in which we define the version of the Vega-Lite grammar that we want to use:
`
embed({
$schema: "https://vega.github.io/schema/vega-lite/v4.json"
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
data: {
url: "https://vega.github.io/vega-datasets/data/cars.json"
},
mark: "circle",
encoding: {
x: { field: "Horsepower", type: "quantitative" }
}
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
data: {
url: "https://vega.github.io/vega-datasets/data/cars.json"
},
mark: "circle",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" }
}
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
data: {
url: "https://vega.github.io/vega-datasets/data/cars.json"
},
mark: "circle",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Origin", type: "nominal" }
}
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
data: {
url: "https://vega.github.io/vega-datasets/data/cars.json"
},
repeat: {
row: ["Horsepower", "Miles_per_Gallon", "Acceleration"],
column: ["Horsepower", "Miles_per_Gallon", "Acceleration"],
},
spec: {
mark: "circle",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Origin", type: "nominal" }
}
}
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
data: {
url: "https://vega.github.io/vega-datasets/data/cars.json"
},
repeat: {
row: ["Horsepower", "Miles_per_Gallon", "Acceleration"],
column: ["Horsepower", "Miles_per_Gallon", "Acceleration"],
},
spec: {
mark: "circle",
encoding: {
x: { field: { repeat: "row" }, type: "quantitative" },
y: { field:{ repeat: "column" }, type: "quantitative" },
color: { field: "Origin", type: "nominal" }
}
}
})
embed = require("vega-embed");
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.
