Skip to content

Instantly share code, notes, and snippets.

@owendall

owendall/index.html

Last active September 16, 2017 17:34
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/69812eae7f6db0817aee8b610337f718 to your computer and use it in GitHub Desktop.
Save owendall/69812eae7f6db0817aee8b610337f718 to your computer and use it in GitHub Desktop.
Download ZIP
Vega Tooltip Test - vega-embed-3.0.0-beta.20
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing vega-lite 2 and tooltip</title>
<meta charset="utf-8">
<!-- Import Vega 3 & Vega-Lite 2 js (does not have to be from cdn) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.2/vega.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.19/vega-lite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.20/vega-embed.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vega-tooltip/0.4.3/vega-tooltip.min.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-tooltip/0.4.3/vega-tooltip.min.js"></script>
</head>
<body>
<div id="chart" width="20%" height="70%" align="center">
<!-- chart will go here -->
</div>
<div id="vis-tooltip" class="vg-tooltip"</div>
</body>
<script>
var wordJSON = [
{
"Word": "boat",
"Topic": "topic-0",
"Value": 0.03030303
},
{
"Word": "used",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "day",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "great",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "storm",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "pulled",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "sank",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "needed",
"Topic": "topic-0",
"Value": 0.06060606
},
{
"Word": "money",
"Topic": "topic-0",
"Value": 0.18181818
},
{
"Word": "loan",
"Topic": "topic-0",
"Value": 0.09090909
},
{
"Word": "get",
"Topic": "topic-0",
"Value": 0.03030303
},
{
"Word": "new",
"Topic": "topic-0",
"Value": 0.06060606
},
{
"Word": "went",
"Topic": "topic-0",
"Value": 0.03030303
},
{
"Word": "open",
"Topic": "topic-0",
"Value": 0.03030303
},
{
"Word": "told",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "called",
"Topic": "topic-0",
"Value": 0.06060606
},
{
"Word": "month",
"Topic": "topic-0",
"Value": 0.03030303
},
{
"Word": "about",
"Topic": "topic-0",
"Value": 0.06060606
},
{
"Word": "waited",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "year",
"Topic": "topic-0",
"Value": 0.03030303
},
{
"Word": "give",
"Topic": "topic-0",
"Value": 0.03030303
},
{
"Word": "said",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "approved",
"Topic": "topic-0",
"Value": 0.03030303
},
{
"Word": "now",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "take",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "out",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "tie",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "tight",
"Topic": "topic-0",
"Value": 0
},
{
"Word": "live",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "river",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "close",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "bank",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "stream",
"Topic": "topic-1",
"Value": 0.125
},
{
"Word": "feeds",
"Topic": "topic-1",
"Value": 0.125
},
{
"Word": "had",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "old",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "boat",
"Topic": "topic-1",
"Value": 0.125
},
{
"Word": "used",
"Topic": "topic-1",
"Value": 0.125
},
{
"Word": "day",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "great",
"Topic": "topic-1",
"Value": 0.125
},
{
"Word": "storm",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "pulled",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "sank",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "needed",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "money",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "loan",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "get",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "new",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "went",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "open",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "told",
"Topic": "topic-1",
"Value": 0.125
},
{
"Word": "called",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "month",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "about",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "waited",
"Topic": "topic-1",
"Value": 0.125
},
{
"Word": "year",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "give",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "said",
"Topic": "topic-1",
"Value": 0.125
},
{
"Word": "approved",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "now",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "take",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "out",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "tie",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "tight",
"Topic": "topic-1",
"Value": 0
},
{
"Word": "live",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "river",
"Topic": "topic-2",
"Value": 0.27272727
},
{
"Word": "close",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "bank",
"Topic": "topic-2",
"Value": 0.09090909
},
{
"Word": "stream",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "feeds",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "had",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "old",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "boat",
"Topic": "topic-2",
"Value": 0.21212121
},
{
"Word": "used",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "day",
"Topic": "topic-2",
"Value": 0.06060606
},
{
"Word": "great",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "storm",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "pulled",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "sank",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "needed",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "money",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "loan",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "get",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "new",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "went",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "open",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "told",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "called",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "month",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "about",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "waited",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "year",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "give",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "said",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "approved",
"Topic": "topic-2",
"Value": 0
},
{
"Word": "now",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "take",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "out",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "tie",
"Topic": "topic-2",
"Value": 0.03030303
},
{
"Word": "tight",
"Topic": "topic-2",
"Value": 0.03030303
}
];
// Creat vega-lite specification object, aka "vlspec":
var vlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description":"Illustrates word by topic distributionb",
"width": 200,
"height": 400,
"title":"Word Probability by Topic",
"data": {"values": wordJSON},
"mark": "rect",
"encoding": {
"y": {"field": "Word", "type": "nominal"},
"x": {"field": "Topic", "type": "ordinal"},
"color": {"aggregate": "sum", "field": "Value", "type": "quantitative"}
},
"config": {
"range": {
"heatmap": {
"scheme": "blues"
}
},
"cell": {
// "stroke": "transparent"
}
}
};
// Now Embed the visualization in the container div with id 'chart'
// config options object
var opt = {
mode: "vega-lite",
actions: {
// dont show source code, export, or editor link:
source: false,
export: false,
editor: false
}
};
vega.embed("#chart", vlSpec, opt).then(function(result){
// result.view is the Vega View, myspec is the original Vega-Lite specification
var tooltipOption = {
showAllFields: true
};
vegaTooltip.vegaLite(result.view, vlSpec, tooltipOption);
});
// https://github.com/vega/vega-tooltip/blob/master/docs/creating_your_tooltip.md
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment