vl.markCircle()
.params(vl.selectInterval().bind("scales"))
.encode(
vl.x().fieldQ("Horsepower").scale({"domain": [75, 150]}),
vl.y().fieldQ("Miles_per_Gallon").scale({"domain": [20, 40]}),
vl.size().fieldQ("Cylinders"),
)
.data(data)
.render()
embed({
"$schema":"https://vega.github.io/schema/vega-lite/v5.json",
"data": {"values": data},
"mark": "circle",
"params": [
{
"name": "name4",
"bind": "scales",
"select": {"type": "interval"}
}
],
"encoding": {
"x": {
"field":"Horsepower", "type": "quantitative",
"scale": {"domain": [75,150]}
},
"y": {
"field": "Miles_per_Gallon", "type": "quantitative",
"scale": {"domain": [20,40]}
},
"size": {
"field": "Cylinders", "type":"quantitative"
}
}
})
data = vegaDatasets["cars.json"]()
embed = require("vega-embed")
vegaDatasets = (await import("vega-datasets")).default
import {vl} from "@vega/vega-lite-api-v5"
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.
