feat: interactive legends #5305

arvind · 2019-08-15T21:01:31Z

This PR supersedes #4732 and makes legends interactive when there exists a selection that has been projected over the legend's domain. If the legend only partially matches the selection's projection (e.g., a color legend for Origin when the selection is projected over ["Origin", "Cylinders"]) the legend is still interactive and only partially populates the selection predicate (i.e., clicking "Europe" will select all "Europe" cars without any "Cylinders" specified.)

/cc @djbarnwal

…ega-lite into djbarnwal-db/legendInteractive

domoritz · 2019-08-16T09:10:52Z

🎉 I'm very excited about this

arvind · 2019-08-16T17:54:06Z

Alright, I'm nearing the end with this feature PR. Before I finalize the design via unit tests, I'd like to get some eyes and hands on how interactive legends work and confirm that the current design is desirable.

To that end, here are some interesting specifications to try. I'm purposely not including any GIFs so as not to prime you.

Single selection projected over the legend domain

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A scatterplot showing horsepower and miles per gallons.",
  "data": {"url": "data/cars.json"},
  "mark": "circle",
  "selection": {
    "foo": {"type": "single", "fields": ["Origin"]}
  },
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "condition": {"selection": "foo", "field": "Origin", "type": "nominal"},
      "value": "grey"
    }
  }
}

Multi selection projected over the legend domain

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A scatterplot showing horsepower and miles per gallons.",
  "data": {"url": "data/cars.json"},
  "mark": "circle",
  "selection": {
    "foo": {"type": "multi", "fields": ["Origin"]}
  },
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "condition": {"selection": "foo", "field": "Origin", "type": "nominal"},
      "value": "grey"
    }
  }
}

Multi selection projected over several fields, only one of which includes the legend domain

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A scatterplot showing horsepower and miles per gallons.",
  "data": {"url": "data/cars.json"},
  "mark": "circle",
  "selection": {
    "foo": {"type": "multi", "fields": ["Origin", "Cylinders"]}
  },
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "condition": {"selection": "foo", "field": "Origin", "type": "nominal"},
      "value": "grey"
    }
  }
}

Multi selection projected over several fields, where each field has a corresponding legend

{
  "$schema": "htts://vega.github.io/schema/vega-lite/v3.json",
  "description": "A scatterplot showing horsepower and miles per gallons.",
  "data": {"url": "data/cars.json"},
  "mark": "circle",
  "selection": {
    "foo": {"type": "multi", "fields": ["Origin", "Cylinders"]}
  },
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "condition": {"selection": "foo", "field": "Origin", "type": "nominal"},
      "value": "grey"
    },
    "size": {
      "condition": {"selection": "foo", "field": "Cylinders", "type": "nominal"},
      "value": 0
    }
  }
}

Multiple selections each that map to one legend

{
  "$schema": "htts://vega.github.io/schema/vega-lite/v3.json",
  "description": "A scatterplot showing horsepower and miles per gallons.",
  "data": {"url": "data/cars.json"},
  "mark": "circle",
  "selection": {
    "foo": {"type": "multi", "fields": ["Origin"]},
    "bar": {"type": "multi", "fields": ["Cylinders"]}
  },
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "condition": {"selection": "foo", "field": "Origin", "type": "nominal"},
      "value": "grey"
    },
    "size": {
      "condition": {"selection": "bar", "field": "Cylinders", "type": "nominal"},
      "value": 0
    }
  }
}

Interactive Legends when unioning a selection across multiple views

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "repeat": {
    "row": ["Horsepower", "Acceleration", "Miles_per_Gallon"],
    "column": ["Miles_per_Gallon", "Acceleration", "Horsepower"]
  },
  "spec": {
    "data": {"url": "data/cars.json"},
    "mark": "circle",
    "selection": {
      "brush": {
        "type": "multi", "fields": ["Origin"],
        "resolve": "union"
      }
    },
    "encoding": {
      "x": {"field": {"repeat": "column"}, "type": "quantitative"},
      "y": {
        "field": {"repeat": "row"},
        "type": "quantitative",
        "axis": {"minExtent": 30}
      },
      "color": {
        "condition": {
          "selection": "brush",
          "field": "Origin",
          "type": "nominal"
        },
        "value": "grey"
      }
    }
  }
}

Let me know what you think. Besides bugs, do interactive legends work as you expect them to or are there cases where their behavior is unexpected?

/cc @djbarnwal, @domoritz, @kanitw, @jheer

domoritz · 2019-08-16T21:48:12Z

This is awesome!
I think the second spec should use multi, not single as the title implies.
In the multi-selection, I first wanted to use CMD since I use that on my mac to toggle selections but it didn't work. This obviously isn't something unique to this PR.
I expected shift+click to also de-select a previously selected items (toggle) but it didn't work for me. Is this supposed to work? It works in the chart but not the legend.
The way multiple legends over a single projection work is really nice!

This is necessary when a selection is projected over several fields. Using vlSelectionTest will cause all legend items to appear unselected, even if one of the values is within in the selection. Instead, we now test only for the legend item itself, via the top-level resolved signal.

Augmenting existing signal logic with legend events yields buggy behavior when toggling values from the store based on unit name. It is also less efficient in multi-view cases, as each individual view would modify the store based on legend events. Instead, the legend selection transform adds a top-level signal to coordinate all legends for a given selection. Moreover, it allows users to selectively disable interactive legend processing (i.e., "legends": false in a selection definition).

domoritz · 2019-09-19T00:40:20Z

Are we changing the design based on @jheer's comment in #1657 (comment)?

domoritz

See my comments. Otherwise, it looks good. Feel free to merge when this is done.

src/compile/selection/transforms/legends.ts

domoritz · 2019-11-13T22:53:11Z

examples/compiled/bar_layered_transparent.vg.json

-      "encode": {"symbols": {"update": {"opacity": {"value": 0.7}}}}
+      "encode": {
+        "symbols": {
+          "name": "gender_legend_symbols",


This chart isn't interactive so it shouldn't have a name for the legend, right?

domoritz · 2019-11-18T05:49:55Z

This spec leads to an error "Converting circular structure to JSON"

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/cars.json"},
  "selection": {
    "sel": {
      "type": "multi", "fields": ["Origin"], "bind": "legend"
    }
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "shape": {"field": "Origin", "type": "nominal"},
    "color": {
      "condition": {"selection": "sel", "field": "Origin", "type": "nominal"},
      "value": "gray"
    }
  }
}

domoritz · 2019-11-18T05:53:07Z

In this spec below, I would expect the shape to depend on the selection. Instead, Vega-Lite filters the data by the selection. I think the actual behavior makes a lot more sense but it's not what the spec says, no?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/cars.json"},
  "selection": {
    "sel": {
      "type": "multi", "fields": ["Origin"], "bind": "legend"
    }
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "shape": {
      "condition": {"selection": "sel", "field": "Origin", "type": "nominal"},
      "value": "rectangle"
    }
  }
}

domoritz · 2019-11-18T06:06:59Z

#5305 (comment) seems to be happening in legend assemble.

It looks like the problem is coming from the materialized selection.

Works in current Vega-Lite: https://vega.github.io/editor/#/url/vega-lite/N4KABGBEAkDODGALApgWwIaQFxUQFzwAdYsB6UgN2QHN0A6agSz0QFcAjOxge1IRQyUa6ALQAbZskoAWOgCtY3AHaQANOCgATdHkw5gkVgCcx2LTvSl46I7HmKVAX3URIsZGOTw8PFfo2u7qb+EKFQeACehMhmkKisYj5qUABmjB6asGYA2pAA8kaMTCoAuqpQ7IxKmrGe1MjVkAFgjhrOGnE2ANaxhNxVeGodDfDcmlXUZqBhkAAeU5BpGbEAEty2yH0A7shGyZCR0bEAjqzoSj66PlSQ7TMRC0tiNTiQALKMnrAA+tFG3wBxdBiMTKfaHGKvU7nS46Rg3O6hNyIdBHfSLdLPWIFIpVcFRSFQJTcVBVYG3FxI0agvYhMJQUbVZi+BZBLw+MGvIL7J4vKA44r4tFEklk0yImYUYGsQmQahGdAPZqtCCtRxAA

domoritz · 2019-11-18T06:15:35Z

Fixed in 17bb58d but I'm not happy with the fix.

domoritz

Looks good except #5305 (comment)

src/compile/selection/transforms/legends.ts

src/compile/legend/encode.ts

src/compile/legend/parse.ts

src/compile/selection/transforms/legends.ts

Co-Authored-By: Dominik Moritz <[email protected]>

djbarnwal and others added 9 commits March 10, 2019 16:15

Interactive Legend

7f4dd24

Correct tests

ad3bf38

Enable interactive legends for multi-field selection

f82d1af

Support single type selections

a503c36

Add tests for interactive legends

7dd21d4

Merge branch 'db/legendInteractive' of https://github.com/djbarnwal/v…

aeb02bf

…ega-lite into djbarnwal-db/legendInteractive

Simplify flagging a legend to be interactive if selection present.

dd32a55

Simplify signal assembly for interactive legends.

df54951

Simplify conditional encoding for legend items.

d4ebec7

arvind mentioned this pull request Aug 15, 2019

Interactive Legend for Unit Specs #4732

Closed

Scope legend events to "view" as signals may be nested within subscopes.

49062c1

arvind force-pushed the djbarnwal-db/legendInteractive branch from b05535e to 2646d20 Compare August 16, 2019 17:52

arvind added this to the 4.0 milestone Aug 16, 2019

domoritz mentioned this pull request Aug 31, 2019

vega-lite interactive legend #5357

Closed

arvind added 6 commits September 2, 2019 12:07

Move opacity of unselected legend entries to config.

c655a4e

Input widgets should reflect selection status from interactive legends.

563d873

Update existing compile-time unit tests.

06a3346

Snapshot.

f96e699

arvind force-pushed the djbarnwal-db/legendInteractive branch from e531677 to f96e699 Compare September 2, 2019 18:25

arvind added 2 commits September 2, 2019 14:53

Merge branch 'master' into djbarnwal-db/legendInteractive

1de1d5c

Fix build.

d799578

arvind force-pushed the djbarnwal-db/legendInteractive branch from c98e8aa to d799578 Compare September 2, 2019 19:15

arvind mentioned this pull request Sep 6, 2019

Interacting with Legends & Axes #1657

Open

domoritz force-pushed the master branch from 82437d8 to dcf292c Compare September 26, 2019 23:37

domoritz self-requested a review November 13, 2019 22:50

domoritz approved these changes Nov 13, 2019

View reviewed changes

domoritz force-pushed the djbarnwal-db/legendInteractive branch from 55d8462 to edf24d5 Compare November 13, 2019 22:54

refactor: don't interpret numbers as truth values

473eefa

domoritz force-pushed the djbarnwal-db/legendInteractive branch from edf24d5 to 473eefa Compare November 13, 2019 23:45

GitHub Actions Bot and others added 6 commits November 13, 2019 23:48

chore: update examples [CI]

dac1150

Only name and flag parts as interactive if selections exist on component

e6917e2

React to legend entries (whitespace between symbol, label).

e60d1fb

Warn + skip if projecting over an aggregate field (or no field).

d05d651

chore: update examples [CI]

e03c6ac

Merge branch 'master' into djbarnwal-db/legendInteractive

d002977

arvind force-pushed the djbarnwal-db/legendInteractive branch from 9ba36ec to d002977 Compare November 17, 2019 20:47

Merge branch 'master' into djbarnwal-db/legendInteractive

47cec23

domoritz force-pushed the djbarnwal-db/legendInteractive branch from 76bdf54 to 47cec23 Compare November 18, 2019 05:27

chore: rebuild runtime examples

6c86b1b

domoritz mentioned this pull request Nov 18, 2019

Interactive legends should have larger click area #5549

Closed

fix: resolve issue with symbol and color legend by using deep equal

17bb58d

domoritz self-requested a review November 18, 2019 17:17

domoritz approved these changes Nov 18, 2019

View reviewed changes

fix: store selection names (not components) on legend component

44707db

domoritz approved these changes Nov 19, 2019

View reviewed changes

refactor: use null coalescing

051b0dd

Co-Authored-By: Dominik Moritz <[email protected]>

arvind merged commit 89108f0 into master Nov 19, 2019

arvind deleted the djbarnwal-db/legendInteractive branch November 19, 2019 05:58

kanitw modified the milestones: 4.1, 4.0 Dec 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: interactive legends #5305

feat: interactive legends #5305

arvind commented Aug 15, 2019

domoritz commented Aug 16, 2019

arvind commented Aug 16, 2019 •

edited

Loading

domoritz commented Aug 16, 2019 •

edited

Loading

domoritz commented Sep 19, 2019

domoritz left a comment

domoritz Nov 13, 2019

domoritz commented Nov 18, 2019

domoritz commented Nov 18, 2019

domoritz commented Nov 18, 2019 •

edited

Loading

domoritz commented Nov 18, 2019 •

edited

Loading

domoritz left a comment

feat: interactive legends #5305

feat: interactive legends #5305

Conversation

arvind commented Aug 15, 2019

domoritz commented Aug 16, 2019

arvind commented Aug 16, 2019 • edited Loading

domoritz commented Aug 16, 2019 • edited Loading

domoritz commented Sep 19, 2019

domoritz left a comment

Choose a reason for hiding this comment

domoritz Nov 13, 2019

Choose a reason for hiding this comment

domoritz commented Nov 18, 2019

domoritz commented Nov 18, 2019

domoritz commented Nov 18, 2019 • edited Loading

domoritz commented Nov 18, 2019 • edited Loading

domoritz left a comment

Choose a reason for hiding this comment

arvind commented Aug 16, 2019 •

edited

Loading

domoritz commented Aug 16, 2019 •

edited

Loading

domoritz commented Nov 18, 2019 •

edited

Loading

domoritz commented Nov 18, 2019 •

edited

Loading