Skip to content

Instantly share code, notes, and snippets.

@ijlyttle
Last active August 21, 2018 20:18
Show Gist options
  • Select an option

  • Save ijlyttle/81c392ed462aec3cf1837dc2633200e3 to your computer and use it in GitHub Desktop.

Select an option

Save ijlyttle/81c392ed462aec3cf1837dc2633200e3 to your computer and use it in GitHub Desktop.
Selection question for Vega-Lite
license: mit
height: 350
scrolling: yes
border: yes

The dataset has the following columns:

  • key used to associate related observations, has values from 1 to 32
  • x, sample data for x, approximately evenly spaced from 0 to 2 * pi
  • y, sample data for y, response to x, varies from -1 to 1
  • group indicates the function used to relate y to x

I have set up an interval selection that works on the x and y encodings; the selection resolves globally.

As it currently works, points are highlighted if they are inside the x and y extents of the selection, regardless of the facet that it is in.

What I would like to do

I would like for my interval selection to know which facet it is "inside" (perhaps it does already) such that I could:

  1. Identify the value of key for each point that falls inside the selection interval and has the value of group for the facet used for the selection. In essence, identify only those observations that fall inside the "little grey box". Again, I realize this may already be the case.

  2. Use a condition expression (or a filter expression, if I need to use the filter + layer technique used for the crossfilter example) that identifies those observations where datum.key is in selection.key, where selection is the "selected" part of the dataset from part 1.

Part of my problem is that I don't see that there is a way to use an expression like selection.key.

Other approaches and motivation

I can work around this by using "wide" data, rather than "tall" data. The problem is that once I do this, my Vega-Lite spec is no longer generalizable becuse it will depend on given values for group to be part of the column names.

<!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>
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"config": {
"view": {
"height": 300,
"width": 400
}
},
"data": {
"name": "data-7435e4d121c4f72f89b2f4251a41157f"
},
"datasets": {
"data-7435e4d121c4f72f89b2f4251a41157f": [
{
"group": "sin",
"key": 0,
"x": -0.0799,
"y": -0.0798
},
{
"group": "sin",
"key": 1,
"x": 0.1233,
"y": 0.123
},
{
"group": "sin",
"key": 2,
"x": 0.5364,
"y": 0.511
},
{
"group": "sin",
"key": 3,
"x": 0.6196,
"y": 0.5807
},
{
"group": "sin",
"key": 4,
"x": 0.7457,
"y": 0.6785
},
{
"group": "sin",
"key": 5,
"x": 0.9906,
"y": 0.8364
},
{
"group": "sin",
"key": 6,
"x": 1.295,
"y": 0.9622
},
{
"group": "sin",
"key": 7,
"x": 1.2969,
"y": 0.9627
},
{
"group": "sin",
"key": 8,
"x": 1.3952,
"y": 0.9846
},
{
"group": "sin",
"key": 9,
"x": 1.5369,
"y": 0.9994
},
{
"group": "sin",
"key": 10,
"x": 1.7999,
"y": 0.9739
},
{
"group": "sin",
"key": 11,
"x": 2.2423,
"y": 0.7829
},
{
"group": "sin",
"key": 12,
"x": 2.2564,
"y": 0.774
},
{
"group": "sin",
"key": 13,
"x": 2.3846,
"y": 0.6867
},
{
"group": "sin",
"key": 14,
"x": 2.7192,
"y": 0.4099
},
{
"group": "sin",
"key": 15,
"x": 2.8107,
"y": 0.3249
},
{
"group": "sin",
"key": 16,
"x": 3.2613,
"y": -0.1194
},
{
"group": "sin",
"key": 17,
"x": 3.4482,
"y": -0.3018
},
{
"group": "sin",
"key": 18,
"x": 3.4192,
"y": -0.274
},
{
"group": "sin",
"key": 19,
"x": 3.6146,
"y": -0.4556
},
{
"group": "sin",
"key": 20,
"x": 3.9303,
"y": -0.7095
},
{
"group": "sin",
"key": 21,
"x": 4.2302,
"y": -0.886
},
{
"group": "sin",
"key": 22,
"x": 4.3293,
"y": -0.9275
},
{
"group": "sin",
"key": 23,
"x": 4.6049,
"y": -0.9942
},
{
"group": "sin",
"key": 24,
"x": 4.7936,
"y": -0.9967
},
{
"group": "sin",
"key": 25,
"x": 4.9991,
"y": -0.9592
},
{
"group": "sin",
"key": 26,
"x": 5.1667,
"y": -0.8985
},
{
"group": "sin",
"key": 27,
"x": 5.1413,
"y": -0.9094
},
{
"group": "sin",
"key": 28,
"x": 5.5079,
"y": -0.6999
},
{
"group": "sin",
"key": 29,
"x": 5.7479,
"y": -0.5101
},
{
"group": "sin",
"key": 30,
"x": 5.8169,
"y": -0.4496
},
{
"group": "sin",
"key": 31,
"x": 6.1338,
"y": -0.1489
},
{
"group": "cos",
"key": 0,
"x": -0.1422,
"y": 0.9899
},
{
"group": "cos",
"key": 1,
"x": 0.2138,
"y": 0.9772
},
{
"group": "cos",
"key": 2,
"x": 0.446,
"y": 0.9022
},
{
"group": "cos",
"key": 3,
"x": 0.4989,
"y": 0.8781
},
{
"group": "cos",
"key": 4,
"x": 0.8963,
"y": 0.6245
},
{
"group": "cos",
"key": 5,
"x": 0.9488,
"y": 0.5826
},
{
"group": "cos",
"key": 6,
"x": 1.0517,
"y": 0.4961
},
{
"group": "cos",
"key": 7,
"x": 1.3801,
"y": 0.1896
},
{
"group": "cos",
"key": 8,
"x": 1.4471,
"y": 0.1234
},
{
"group": "cos",
"key": 9,
"x": 1.6949,
"y": -0.1237
},
{
"group": "cos",
"key": 10,
"x": 1.9541,
"y": -0.374
},
{
"group": "cos",
"key": 11,
"x": 2.08,
"y": -0.4875
},
{
"group": "cos",
"key": 12,
"x": 2.3138,
"y": -0.6765
},
{
"group": "cos",
"key": 13,
"x": 2.5043,
"y": -0.8037
},
{
"group": "cos",
"key": 14,
"x": 2.7439,
"y": -0.922
},
{
"group": "cos",
"key": 15,
"x": 3.0396,
"y": -0.9948
},
{
"group": "cos",
"key": 16,
"x": 3.1791,
"y": -0.9993
},
{
"group": "cos",
"key": 17,
"x": 3.3224,
"y": -0.9837
},
{
"group": "cos",
"key": 18,
"x": 3.564,
"y": -0.9121
},
{
"group": "cos",
"key": 19,
"x": 3.6892,
"y": -0.8538
},
{
"group": "cos",
"key": 20,
"x": 4.0566,
"y": -0.6098
},
{
"group": "cos",
"key": 21,
"x": 4.0446,
"y": -0.6193
},
{
"group": "cos",
"key": 22,
"x": 4.3605,
"y": -0.3447
},
{
"group": "cos",
"key": 23,
"x": 4.5684,
"y": -0.1435
},
{
"group": "cos",
"key": 24,
"x": 4.9028,
"y": 0.1893
},
{
"group": "cos",
"key": 25,
"x": 4.8202,
"y": 0.1076
},
{
"group": "cos",
"key": 26,
"x": 4.9814,
"y": 0.2658
},
{
"group": "cos",
"key": 27,
"x": 5.4489,
"y": 0.6717
},
{
"group": "cos",
"key": 28,
"x": 5.4808,
"y": 0.695
},
{
"group": "cos",
"key": 29,
"x": 5.5854,
"y": 0.7663
},
{
"group": "cos",
"key": 30,
"x": 6.0607,
"y": 0.9753
},
{
"group": "cos",
"key": 31,
"x": 6.1159,
"y": 0.986
}
]
},
"facet": {
"column": {
"field": "group",
"type": "nominal"
}
},
"spec": {
"encoding": {
"opacity": {
"condition": {
"selection": "selector002",
"value": 0.75
},
"value": 0.25
},
"x": {
"field": "x",
"type": "quantitative"
},
"y": {
"field": "y",
"type": "quantitative"
}
},
"height": 200,
"mark": "point",
"selection": {
"selector002": {
"type": "interval"
}
},
"width": 200
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment