vl
.markLine()
.encode(
vl.x()
.fieldQ("IMDB Rating")
.bin(true),
vl.y().mean(vl.repeat("layer")),
vl.color().datum(vl.repeat("layer"))
)
// for these type of charts is important that you place the *.repeat* and *.data* below the *encode*
.repeat({ layer: ["US Gross", "Worldwide Gross"] })
.data(data)
.render()
data
viewof stakedArea = vl
.markArea()
.transform(vl.fold(["US Gross", "Worldwide Gross"]))
.encode(
vl.x()
.fieldQ("IMDB Rating")
.bin(true),
vl.y().mean("value"),
vl.color().fieldN("key")
)
.data(data)
.render()
vegaDataViewer(stakedArea, {
dataset: "data_0",
tableOptions: { title: "Folded movie data", pageSize: 10 }
})
vegaDataViewer(stakedArea, {
dataset: "source_0",
tableOptions: { title: "Original movie data", pageSize: 10 }
})
({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: {
url: "data/movies.json"
},
repeat: {
layer: ["US Gross", "Worldwide Gross"]
},
spec: {
mark: "line",
encoding: {
x: {
bin: true,
field: "IMDB Rating",
type: "quantitative"
},
y: {
aggregate: "mean",
field: { repeat: "layer" },
type: "quantitative",
title: "Mean of US and Worldwide Gross"
},
color: {
datum: { repeat: "layer" },
type: "nominal"
}
}
}
})
data = (await require("vega-datasets"))["movies.json"]()
import { vl } from "@vega/vega-lite-api-v5"
import {vegaDataViewer} from "@john-guerra/vega-data-viewer"
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.
