Public
Edited
Feb 12, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
vl
.markCircle()
.data(cars)
.encode(
vl.x().fieldQ(vl.repeat("column")),
vl.y().fieldQ(vl.repeat("row")),
vl.color().fieldO("Cylinders")
)
.width(140)
.height(140)
.repeat({
column: ["Acceleration", "Horsepower", "Miles_per_Gallon"],
row: ["Miles_per_Gallon", "Horsepower", "Acceleration"]
})
.render()
Insert cell
Insert cell
{
const brush = vl.selectInterval().resolve("global"); // resolve all selections to a single global instance

const legend = vl.selectPoint().fields("Cylinders").bind("legend"); // bind to interactions with the color legend

const brushAndLegend = vl.and(brush, legend);

return vl
.markCircle()
.data(cars)
.params(brush, legend)
.encode(
vl.x().fieldQ(vl.repeat("column")),
vl.y().fieldQ(vl.repeat("row")),
vl.color().if(brushAndLegend, vl.fieldO("Cylinders")).value("grey"),
vl.opacity().if(brushAndLegend, vl.value(0.8)).value(0.1)
)
.width(140)
.height(140)
.repeat({
column: ["Acceleration", "Horsepower", "Miles_per_Gallon"],
row: ["Miles_per_Gallon", "Horsepower", "Acceleration"]
})
.render();
}
Insert cell
import { vl } from "@vega/vega-lite-api-v5"
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