The vega-tooltip JS library is now part of vega-embed; I write these words ignorant of the "new" way of doing things. I am writing this do document the behavior of the "old" way of doing things, so that I could refer to it if I need to.
Using the "old" way, there seems to be four operating modes for tooltips, as shown in these tooltip specifications.
{
showAllFields: false
}
{
showAllFields: null
}
This seemed a good way to get a quick, useful tooptip - showing only the variables included in the encoding.
{
showAllFields: true
}
{
showAllFields: false,
fields: [
{field: "Name"},
{field: "Origin"},
{field: "Miles_per_Gallon", title: "MPG"},
{field: "Horsepower"}
]
}
This may already be in place, but I think it would be useful to be able to specify that the tooltip respect the order of the fields
array. If we can specify that a field
can be a value or the name of a variable (I think I read something about that), then we could image a fileld
have a value of <hr>
, giving us a way to introduce some formatting.
xxxxxxxxxx
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@3.2.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2.3.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.2.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@0.7.0"></script>
<link href="https://cdn.jsdelivr.net/npm/vega-tooltip@0.7.0/build/vega-tooltip.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel = "stylesheet">
</head>
<body>
<div id="vis"></div>
<label for="tooltip-choice">Tooltip variables</label>
<select id="tooltip-choice">
<option selected="selected" value = "none">None</option>
<option value = "encoding">Encoding</option>
<option value = "all">All</option>
<option value = "custom">Custom</option>
</select>
<script type="text/javascript">
var chart_spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.3.0.json",
"config": {
"view": {
"height": 300,
"width": 400
}
},
"data": {
"url": "https://vega.github.io/vega-datasets/data/cars.json"
},
"encoding": {
"color": {
"field": "Origin",
"type": "nominal"
},
"x": {
"field": "Miles_per_Gallon",
"type": "quantitative"
},
"y": {
"field": "Horsepower",
"type": "quantitative"
}
},
"mark": "point"
};
var embed_spec = {"actions": false};
var tooltip_spec = {
"showAllFields": null,
"delay": 100
};
// function to return a tooltip-spec, given a choice
var get_tooltip_spec = function(choice) {
spec_choice = {
none: {
showAllFields: false
},
all: {
showAllFields: true
},
encoding: {
showAllFields: null
},
custom: {
showAllFields: false,
fields: [
{field: "Name"},
{field: "Origin"},
{field: "Miles_per_Gallon", title: "MPG"},
{field: "Horsepower"}
]
}
};
return spec_choice[choice];
}
// function to render the chart, given a tooltip-spec
var render = function(tooltip_spec) {
vegaEmbed("#vis", chart_spec, embed_spec).then(function(result) {
// access view as result.view
vegaTooltip.vegaLite(result.view, chart_spec, tooltip_spec);
}).catch(console.error);
};
// render chart
render(get_tooltip_spec($("#tooltip-choice").val()));
$(document).ready(function() {
// when the tooltip-choice changes,
// render the chart using the "new" tooltip-spec
$("#tooltip-choice").change(function(){
render(get_tooltip_spec($("#tooltip-choice").val()));
});
});
</script>
</body>
</html>
https://cdn.jsdelivr.net/npm/vega@3.2.1
https://cdn.jsdelivr.net/npm/vega-lite@2.3.1
https://cdn.jsdelivr.net/npm/vega-embed@3.2.0
https://cdn.jsdelivr.net/npm/vega-tooltip@0.7.0
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js