Crafting Visual Stories with Data.
{
const highlight = vl.selectSingle()
.on("mouseover")
.nearest(true)
.fields("symbol")
.init({"symbol": ""});
const base = vl.markPoint()
.encode(
vl.x().fieldT("date").axis({"format": "%Y", "labelAngle": 0}),
vl.y().fieldQ("price"),
vl.color().fieldN("symbol"),
vl.size().value(1)
);
return vl
.data('data/stocks.csv')
.config({"point": {"opacity": 0.0}})
.layer(
base.select(highlight),
base.markLine()
.encode(
vl.size().if(highlight, vl.value(3)).value(1)
)
)
.description("Highlight multiple lines")
.width( 800)
.height( 425)
.render();
}
import {vl} from "@vega/vega-lite-api"
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.
