Skip to content

Instantly share code, notes, and snippets.

@ijlyttle

ijlyttle/.block

Last active September 13, 2018 15:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ijlyttle/61738a08502ea94d0f175ac8f9cd3089 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ijlyttle/61738a08502ea94d0f175ac8f9cd3089 to your computer and use it in GitHub Desktop.
Download ZIP
Vega-Lite: selection 'zero' issue
Raw
.block
license: mit
height: 500
scrolling: yes
border: yes
Raw
README.md

I have three potential issues here, and would appreciate guidance on if and how they should be split up:

  1. When the range widget is set to 0 (pull all the way to the left), Vega-Lite seems to interpret this as an empty selection.
  2. I would like to be able, from the spec, set an initial value for the selection (I can work around this using JS, after the fact).
  3. I would like to be able to put a label on the widget without a Vega-Lite warning, this has already been raised in #3350. You can add a "name" field to the "bind" element - it works, but it raises Vega-Lite warnings.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- uploaded using vegawidget -->
<script src="https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.16.0"></script>
<link rel="stylesheet" type="text/css" href="vega-embed.css">
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
const spec = "spec.json";
const opt = {"defaultStyle":true,"renderer":"canvas"};
vegaEmbed('#vis', spec, opt).then(function(result) {
// access view as result.view
}).catch(console.error);
</script>
</body>
</html>
Raw
spec.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {
"values": [
{
"t": 0,
"x": 1,
"y": 0
},
{
"t": 1,
"x": 0.866,
"y": 0.5
},
{
"t": 2,
"x": 0.5,
"y": 0.866
},
{
"t": 3,
"x": 6.1232e-17,
"y": 1
},
{
"t": 4,
"x": -0.5,
"y": 0.866
},
{
"t": 5,
"x": -0.866,
"y": 0.5
},
{
"t": 6,
"x": -1,
"y": 1.2246e-16
},
{
"t": 7,
"x": -0.866,
"y": -0.5
},
{
"t": 8,
"x": -0.5,
"y": -0.866
},
{
"t": 9,
"x": -1.837e-16,
"y": -1
},
{
"t": 10,
"x": 0.5,
"y": -0.866
},
{
"t": 11,
"x": 0.866,
"y": -0.5
}
]
},
"transform": [
{
"filter": {
"selection": "time"
}
}
],
"selection": {
"time": {
"type": "single",
"fields": [
"t"
],
"bind": {
"input": "range",
"name": "custom name",
"min": 0,
"max": 11,
"step": 1
}
}
},
"mark": "point",
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"scale": {
"domain": [
-1,
1
]
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {
"domain": [
-1,
1
]
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment