Published
Edited
May 28, 2020
2 forks
3 stars
Insert cell
Insert cell
{
const highlight = vl.selectSingle()
.on("mouseover")
.nearest(true)
.fields("symbol")
.init({"symbol": []});
const base = vl.markPoint({tooltip: true})
.encode(
vl.x().fieldT("date").axis({"format": "%Y", "labelAngle": 0}),
vl.y().fieldQ("price"),
vl.color().fieldN("symbol")
);

return vl
.data('data/stocks.csv')
.config({"point": {"opacity": 0.0}})
.layer(
base.select(highlight),
base.markLine()
.encode(
vl.size()
.if(vl.not(highlight), vl.value(1))
.value(3)
)
)
.description("Highlight multiple lines")
.width( 800)
.height( 425)

.render();
}
Insert cell
import {vl} from "@vega/vega-lite-api"
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