Skip to content

Instantly share code, notes, and snippets.

@sirahd

sirahd/.block

Last active February 3, 2018 18:20
Show Gist options
  • Save sirahd/b5b9307edb7cfe6050598574fbb971a3 to your computer and use it in GitHub Desktop.
Save sirahd/b5b9307edb7cfe6050598574fbb971a3 to your computer and use it in GitHub Desktop.
Download ZIP
Vega-lite Scatterplot with Tooltip
Raw
.block
license: mit
Raw
README.md

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

Raw
index.html
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vega-tooltip@0/build/vega-tooltip.min.css">
<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@0"></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
};
vegaEmbed("#vis-scatter", vlSpec, opt).then(function (result) {
var tooltipOption = {
showAllFields: false,
fields: [
{ field: "Name" },
{ field: "Horsepower" },
{ field: "Miles_per_Gallon", title: "Miles per Gallon" }
]
};
vegaTooltip.vegaLite(result.view, vlSpec, tooltipOption);
}).catch(console.error);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment