chart = {
// The selection
const hover = vl.selectSingle("hover")
.on("mouseover")
.encodings("x")
.nearest(true)
.clear("moouseout")
.init({ x: { year: 2005, month: 1, date: 1 } });
// The line and point marks. Notice how we filter the points on hover
const lineAndPoint = vl.layer(
vl.markLine(),
vl.markPoint()
.transform(vl.filter(hover))
).encode(
vl.y().fieldQ("price"),
vl.color().fieldN("symbol")
);
// The rule helps as a proxy for the hover. We draw rules all over the chart
// so we can easily find the nearest one. We then hide them using opacity 0
const rule =vl.markRule({ strokeWidth: 0.5, tooltip: true })
// We pivot the data so we can show all the stock prices at once
.transform(vl.pivot("symbol").value("price").groupby(["date"]))
.encode(
vl.opacity().value(0).if(hover, vl.value(0.7)),
vl.tooltip([vl.fieldT("date"), "AAPL", "AMZN", "GOOG", "IBM", "MSFT"])
)
.select(hover);
return vl
.layer(lineAndPoint, rule )
.encode(vl.x().fieldT("date"))
.data("data/stocks.csv")
.width(width - 150)
.height(300)
.render();
}
viewof chartWithRules = {
// The selection
const hover = vl
.selectSingle("hover")
.on("mouseover")
.encodings("x")
.nearest(true)
.clear("moouseout")
.init({ x: { year: 2005, month: 1, date: 1 } });
// The line and point marks. Notice how we filter the points on hover
const lineAndPoint = vl.layer(
vl.markLine(),
vl.markPoint()
.transform(vl.filter(hover))
).encode(
vl.y().fieldQ("price"),
vl.color().fieldN("symbol")
);
// The rule helps as a proxy for the hover. We draw rules all over the chart
// so we can easily find the nearest one. We then hide them using opacity 0
const rule =vl.markRule({ strokeWidth: 1, tooltip: true })
.transform(vl.pivot("symbol").value("price").groupby(["date"]))
.encode(
vl.color().value("#aaa").if(hover, vl.value("#333")),
vl.tooltip(["AAPL", "AMZN", "GOOG", "IBM", "MSFT"])
)
.select(hover);
return vl
.layer(lineAndPoint, rule )
.encode(vl.x().fieldT("date"))
.data("data/stocks.csv")
.width(width - 150)
.height(300)
.render();
}
vegaDataViewer(chartWithRules, {dataset: "data_0"})
vegaEmbed({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"values": data},
"width": 400,
"height": 300,
"encoding": {"x": {"field": "date", "type": "temporal"}},
"layer": [
{
"encoding": {
"color": {"field": "symbol", "type": "nominal"},
"y": {"field": "price", "type": "quantitative"}
},
"layer": [
{"mark": "line"},
{"transform": [{"filter": {"selection": "hover"}}], "mark": "point"}
]
},
{
"transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
"mark": "rule",
"encoding": {
"opacity": {
"condition": {"value": 0.3, "selection": "hover"},
"value": 0
},
"tooltip": [
{"field": "AAPL", "type": "quantitative"},
{"field": "AMZN", "type": "quantitative"},
{"field": "GOOG", "type": "quantitative"},
{"field": "IBM", "type": "quantitative"},
{"field": "MSFT", "type": "quantitative"}
]
},
"selection": {
"hover": {
"type": "single",
"fields": ["date"],
"nearest": true,
"on": "mouseover",
"empty": "none",
"clear": "mouseout"
}
}
}
]
})
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.
