Skip to content

Commit

Permalink
Expose an "empty" property for selections.
Browse files Browse the repository at this point in the history
By default, all data values are considered to lie within an empty selection. When set to none, empty selections contain no data values.
  • Loading branch information
arvind committed Sep 26, 2017
1 parent bb78270 commit 03b948e
Show file tree
Hide file tree
Showing 11 changed files with 346 additions and 10 deletions.
56 changes: 56 additions & 0 deletions build/vega-lite-schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -659,6 +659,14 @@
"BaseSelectionDef": {
"additionalProperties": false,
"properties": {
"empty": {
"description": "By default, all data values are considered to lie within an empty selection.\nWhen set to `none`, empty selections contain no data values.",
"enum": [
"all",
"none"
],
"type": "string"
},
"encodings": {
"description": "An array of encoding channels. The corresponding data field values\nmust match for a data tuple to fall within the selection.",
"items": {
Expand Down Expand Up @@ -2714,6 +2722,14 @@
],
"type": "string"
},
"empty": {
"description": "By default, all data values are considered to lie within an empty selection.\nWhen set to `none`, empty selections contain no data values.",
"enum": [
"all",
"none"
],
"type": "string"
},
"encodings": {
"description": "An array of encoding channels. The corresponding data field values\nmust match for a data tuple to fall within the selection.",
"items": {
Expand Down Expand Up @@ -2776,6 +2792,14 @@
],
"type": "string"
},
"empty": {
"description": "By default, all data values are considered to lie within an empty selection.\nWhen set to `none`, empty selections contain no data values.",
"enum": [
"all",
"none"
],
"type": "string"
},
"encodings": {
"description": "An array of encoding channels. The corresponding data field values\nmust match for a data tuple to fall within the selection.",
"items": {
Expand Down Expand Up @@ -3680,6 +3704,14 @@
"MultiSelection": {
"additionalProperties": false,
"properties": {
"empty": {
"description": "By default, all data values are considered to lie within an empty selection.\nWhen set to `none`, empty selections contain no data values.",
"enum": [
"all",
"none"
],
"type": "string"
},
"encodings": {
"description": "An array of encoding channels. The corresponding data field values\nmust match for a data tuple to fall within the selection.",
"items": {
Expand Down Expand Up @@ -3728,6 +3760,14 @@
"MultiSelectionConfig": {
"additionalProperties": false,
"properties": {
"empty": {
"description": "By default, all data values are considered to lie within an empty selection.\nWhen set to `none`, empty selections contain no data values.",
"enum": [
"all",
"none"
],
"type": "string"
},
"encodings": {
"description": "An array of encoding channels. The corresponding data field values\nmust match for a data tuple to fall within the selection.",
"items": {
Expand Down Expand Up @@ -4706,6 +4746,14 @@
],
"description": "Establish a two-way binding between a single selection and input elements\n(also known as dynamic query widgets). A binding takes the form of\nVega's [input element binding definition](https://vega.github.io/vega/docs/signals/#bind)\nor can be a mapping between projected field/encodings and binding definitions.\n\nSee the [bind transform](bind.html) documentation for more information."
},
"empty": {
"description": "By default, all data values are considered to lie within an empty selection.\nWhen set to `none`, empty selections contain no data values.",
"enum": [
"all",
"none"
],
"type": "string"
},
"encodings": {
"description": "An array of encoding channels. The corresponding data field values\nmust match for a data tuple to fall within the selection.",
"items": {
Expand Down Expand Up @@ -4761,6 +4809,14 @@
],
"description": "Establish a two-way binding between a single selection and input elements\n(also known as dynamic query widgets). A binding takes the form of\nVega's [input element binding definition](https://vega.github.io/vega/docs/signals/#bind)\nor can be a mapping between projected field/encodings and binding definitions.\n\nSee the [bind transform](bind.html) documentation for more information."
},
"empty": {
"description": "By default, all data values are considered to lie within an empty selection.\nWhen set to `none`, empty selections contain no data values.",
"enum": [
"all",
"none"
],
"type": "string"
},
"encodings": {
"description": "An array of encoding channels. The corresponding data field values\nmust match for a data tuple to fall within the selection.",
"items": {
Expand Down
File renamed without changes
File renamed without changes.
1 change: 1 addition & 0 deletions examples/compiled/paintbrush_simple_none.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
221 changes: 221 additions & 0 deletions examples/compiled/paintbrush_simple_none.vg.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"autosize": "pad",
"padding": 5,
"width": 200,
"height": 200,
"style": "cell",
"data": [
{
"name": "paintbrush_store"
},
{
"name": "source_0",
"url": "data/cars.json",
"format": {
"type": "json",
"parse": {
"Horsepower": "number",
"Miles_per_Gallon": "number"
}
},
"transform": [
{
"type": "identifier",
"as": "_vgsid_"
},
{
"type": "filter",
"expr": "datum[\"Horsepower\"] !== null && !isNaN(datum[\"Horsepower\"]) && datum[\"Miles_per_Gallon\"] !== null && !isNaN(datum[\"Miles_per_Gallon\"])"
}
]
}
],
"signals": [
{
"name": "unit",
"value": {},
"on": [
{
"events": "mousemove",
"update": "isTuple(group()) ? group() : unit"
}
]
},
{
"name": "paintbrush_tuple",
"value": {},
"on": [
{
"events": [
{
"source": "scope",
"type": "mouseover"
}
],
"update": "datum && item().mark.marktype !== 'group' ? {unit: \"\", encodings: [], fields: [\"_vgsid_\"], values: [datum[\"_vgsid_\"]]} : null",
"force": true
}
]
},
{
"name": "paintbrush_toggle",
"value": false,
"on": [
{
"events": [
{
"source": "scope",
"type": "mouseover"
}
],
"update": "event.shiftKey"
}
]
},
{
"name": "paintbrush_modify",
"on": [
{
"events": {
"signal": "paintbrush_tuple"
},
"update": "modify(\"paintbrush_store\", paintbrush_toggle ? null : paintbrush_tuple, paintbrush_toggle ? null : true, paintbrush_toggle ? paintbrush_tuple : null)"
}
]
}
],
"marks": [
{
"name": "marks",
"type": "symbol",
"style": [
"point"
],
"from": {
"data": "source_0"
},
"encode": {
"update": {
"x": {
"scale": "x",
"field": "Horsepower"
},
"y": {
"scale": "y",
"field": "Miles_per_Gallon"
},
"stroke": {
"value": "#4c78a8"
},
"fill": {
"value": "transparent"
},
"size": [
{
"test": "(vlMulti(\"paintbrush_store\", datum))",
"value": 300
},
{
"value": 50
}
],
"opacity": {
"value": 0.7
}
}
}
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {
"data": "source_0",
"field": "Horsepower"
},
"range": [
0,
{
"signal": "width"
}
],
"nice": true,
"zero": true
},
{
"name": "y",
"type": "linear",
"domain": {
"data": "source_0",
"field": "Miles_per_Gallon"
},
"range": [
{
"signal": "height"
},
0
],
"nice": true,
"zero": true
}
],
"axes": [
{
"scale": "x",
"labelOverlap": true,
"orient": "bottom",
"tickCount": {
"signal": "ceil(width/40)"
},
"title": "Horsepower",
"zindex": 1
},
{
"scale": "x",
"domain": false,
"grid": true,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"orient": "bottom",
"tickCount": {
"signal": "ceil(width/40)"
},
"ticks": false,
"zindex": 0,
"gridScale": "y"
},
{
"scale": "y",
"labelOverlap": true,
"orient": "left",
"tickCount": {
"signal": "ceil(height/40)"
},
"title": "Miles_per_Gallon",
"zindex": 1
},
{
"scale": "y",
"domain": false,
"grid": true,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"orient": "left",
"tickCount": {
"signal": "ceil(height/40)"
},
"ticks": false,
"zindex": 0,
"gridScale": "x"
}
],
"config": {
"axisY": {
"minExtent": 30
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "data/cars.json"},
"selection": {
"paintbrush": {"type": "multi", "on": "mouseover"}
"paintbrush": {
"type": "multi",
"on": "mouseover", "empty": "all"
}
},
"mark": "point",
"encoding": {
Expand Down
21 changes: 21 additions & 0 deletions examples/specs/paintbrush_simple_none.vl.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "data/cars.json"},
"selection": {
"paintbrush": {
"type": "multi",
"on": "mouseover", "empty": "none"
}
},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"size": {
"condition": {
"selection": "paintbrush", "value": 300
},
"value": 50
}
}
}
9 changes: 6 additions & 3 deletions site/docs/selection/selection.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ For example, try the different types against the example selection (named `pts`)
{:#selection-on}
While selection types provide useful defaults, it can often be useful to override these properties to customize the interaction design. The following properties are available to do so:

{% include table.html props="on,resolve,mark" source="IntervalSelection" %}
{% include table.html props="on,empty,resolve,mark" source="IntervalSelection" %}

For instance, with the `on` property, a single rectangle in the heatmap below can now be selected on double-click instead.

Expand Down Expand Up @@ -91,9 +91,12 @@ Vega-Lite provides a number of selection _transformations_ to further customize

Selections can be used to conditionally specify visual encodings -- encode data values one way if they fall within the selection, and another if they do not. For instance, in the first two examples on this page, rectangles are colored based on whether or not their data values fall within the `pts` selection. If they do, they are colored by the number of records; and, if they do not, they are left grey.

In this example, a selection (named `paintbrush`) is used to resize the points in the scatterplot on hover.
In this example, a selection (named `paintbrush`) is used to resize the points in the scatterplot on hover. This example is also useful for understanding the difference when empty selections are set to contain <select onchange="changeSpec('paintbrush_simple', 'paintbrush_simple_' + this.value)">
<option>all</option>
<option>none</option>
</select> of the data values.

<div class="vl-example" data-name="paintbrush_simple"></div>
<div class="vl-example" id="paintbrush_simple" data-name="paintbrush_simple_all"></div>

See the [`condition`](condition.html) documentation for more information.

Expand Down
Loading

0 comments on commit 03b948e

Please sign in to comment.