Public
Edited
Nov 16, 2021
Insert cell
Insert cell
vegaEmbed = require("vega-embed")
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(stocks, { width: 300 })
Insert cell
// Static Visualisation - Using Points
vegaEmbed({
width: 800,
height: 300,
data: { values: stocks },
mark: "point",
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" },
size: { value: 10 }
}
})
Insert cell
// Static Visualisation - Using Line
vegaEmbed({
width: 800,
height: 300,
data: { values: stocks },
mark: { type: "line", point: true, interpolate: "monotone" },
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" }
}
})
Insert cell
Insert cell
// Static Visualisation - Using Line
vegaEmbed({
width: 800,
height: 300,
params: [
{
name: "highlight",
select: {
type: "point",
on: "mouseover",
field: ["symbol"],
nearest: true
}
}
],
data: { values: stocks },
mark: { type: "point" },
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" },
size: {
condition: { param: "highlight", value: 50 },
value: 3
}
}
})
Insert cell
vegaEmbed({
width: 700,
height: 300,
data: { values: stocks },
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: {
condition: { param: "highlight", field: "symbol", type: "nominal" },
value: "grey"
},
opacity: { condition: { param: "highlight", value: 1 }, value: 0.2 }
},
layer: [
{
description: "To help select the line - transparent",
params: [
{
name: "highlight",
select: {
type: "point",
on: "mouseover",
field: ["symbol"]
}
}
],
mark: { type: "line", strokeWidth: 12, stroke: "transparent" }
},
{
description: "To draw the line",
mark: { type: "line" }
}
]
})
Insert cell
Insert cell
vegaEmbed({
width: 700,
height: 300,
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" },
size: { value: 1 }
},
layer: [
{
description: "To help select the point (nearest) - transparent",
params: [
{
name: "highlight",
value: [{ symbol: "AAPL" }],
select: {
type: "point",
on: "mouseover",
fields: ["symbol"],
nearest: true
}
}
],
mark: { type: "point" },
encoding: { opacity: { value: 0 } }
},
{
description: "To draw the highlighted line",
mark: { type: "line" },
encoding: {
size: {
condition: { param: "highlight", value: 3 },
value: 1
}
}
}
],
data: { values: stocks }
})
Insert cell
{
// Using VegaLite API
const highlight = vl
.selectPoint()
.on("mouseover")
.fields("symbol")
.nearest(true)
.init({ symbol: "GOOG" });

const base = vl
.markPoint()
.encode(
vl.x().fieldT("date"),
vl.y().fieldQ("price"),
vl.color().fieldN("symbol"),
vl.size().value(1)
);

return vl
.layer(
base.select(highlight),
base.markLine().encode(vl.size().if(highlight, vl.value(3)).value(1))
)
.data(vl.inlineData(stocks))
.width(700)
.height(300)
.render();
}
Insert cell
Insert cell
vegaEmbed({
data: { values: stocks },
mark: { type: "line", interpolate: "monotone" },
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" }
}
})
Insert cell
vegaEmbed({
width: 150,
height: 150,
data: { values: stocks },
mark: { type: "line", interpolate: "monotone" },
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" },
column: { field: "symbol", type: "nominal" }
}
})
Insert cell
vegaEmbed({
height: 50,
width: 500,
padding: 0,
data: { values: stocks },
mark: { type: "area", interpolate: "monotone" },
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" },
row: { field: "symbol", type: "nominal" }
}
})
Insert cell
vegaEmbed({
height: 50,
width: 500,
padding: 0,
data: { values: stocks },
mark: { type: "area", interpolate: "monotone" },
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" },
row: { field: "symbol", type: "nominal" }
},
resolve: {
scale: { y: "independent" }
}
})
Insert cell
Insert cell
vegaEmbed({
data: { values: stocks },
params: [
{
name: "zoom",
select: "interval",
bind: "scales"
}
],
mark: { type: "line", interpolate: "monotone" },
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" }
}
})
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