Last active
September 16, 2017 17:34
-
-
Save owendall/69812eae7f6db0817aee8b610337f718 to your computer and use it in GitHub Desktop.
Vega Tooltip Test - vega-embed-3.0.0-beta.20
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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