The avatar for @john-guerra
John Alexis Guerra Gómez
I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Published
Edited
Feb 28, 2022
Insert cell
# Vega-Lite Tooltip Broken?

The following example should display a tooltip. It is using the version of vega-lite imported by default on Observable

Observable imports version ${vl.vegalite.version}
Insert cell
vl
.markCircle({ tooltip: true })
.encode(vl.x().fieldQ("Beak Length (mm)"), vl.y().fieldQ("Beak Depth (mm)"))
.data(data)
.render()
Insert cell
## Now using the original VegaLite import

This imports version ${vlOrig.vegalite.version}
Insert cell
import { vl as vlOrig } from "@vega/vega-lite-api-v5"
Insert cell
vlOrig
.markCircle({ tooltip: true })
.encode(vl.x().fieldQ("Beak Length (mm)"), vl.y().fieldQ("Beak Depth (mm)"))
.data(data)
.render()
Insert cell
## Importing vega-lite 5.2
Insert cell
vlVersion52 = "5.2.0"
Insert cell
import { vl as vl52 } with { vlVersion52 as vlVersion } from "@vega/vega-lite-api-v5"
Insert cell
vl52
.markCircle({ tooltip: true })
.encode(vl.x().fieldQ("Beak Length (mm)"), vl.y().fieldQ("Beak Depth (mm)"))
.data(data)
.render()
Insert cell
data = (await require("vega-datasets"))["penguins.json"]()
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