Skip to content

Instantly share code, notes, and snippets.

@owendall

owendall/Tooltip Test

Forked from sirahd/.block
Last active September 1, 2017 18:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save owendall/176a0fc5bde70be23e86572b081aba94 to your computer and use it in GitHub Desktop.
Save owendall/176a0fc5bde70be23e86572b081aba94 to your computer and use it in GitHub Desktop.
Download ZIP
Vega-lite Scatterplot with Tooltip
Raw
index.html
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.3/vega-lite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.31/vega.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.14/vega-embed.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vega-tooltip/0.3.3/vega-tooltip.min.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-tooltip/0.3.3/vega-tooltip.min.js"></script>
</head>
<body>
<div id="vis-scatter"></div>
<script>
var vlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "https://raw.githubusercontent.com/vega/vega-datasets/gh-pages/data/cars.json"},
"mark": "circle",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"}
}
}
var opt = {
mode: "vega-lite",
actions: false
};
vega.embed("#vis-scatter", vlSpec, opt, function (error, result) {
var tooltipOption = {
showAllFields: false,
fields: [
{ field: "Name" },
{ field: "Horsepower" },
{ field: "Miles_per_Gallon", title: "Miles per Gallon" }
]
};
vegaTooltip.vegaLite(result.view,vlSpec,tooltipOption);
});
</script>
</body>
Raw
Tooltip Test
A vega-lite scatterplot example for vega-tooltip. You can specify the limited sets of field to display in tooltip by setting `showAllFields` to false, then specify those in `fields` array. You can also rename the field by specifying `title`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment