Examples: interactive brushed-scatter showpiece in the gallery

src/core/examples.ts

@@ -96,6 +96,47 @@ export const CHART_EXAMPLES: ReadonlyArray<ChartExample> = [
       },
     },
   },
+  {
+    id: 'brush',
+    name: 'Brushed scatter',
+    description: 'Drag a rectangle — points outside the brush fade.',
+    // Interactivity showpiece. Single-view on purpose: the gallery sizes every
+    // thumbnail with a top-level `width`/`height`, which composed (concat/layer)
+    // specs don't accept — a linked-views example needs a bespoke host.
+    spec: {
+      $schema: VEGA_LITE_SCHEMA_URL,
+      description: 'A scatter plot with an interval brush selection.',
+      data: {
+        values: [
+          { x: 1.1, y: 2.6, group: 'A' },
+          { x: 1.6, y: 3.1, group: 'A' },
+          { x: 2.0, y: 2.2, group: 'A' },
+          { x: 2.4, y: 3.6, group: 'A' },
+          { x: 2.9, y: 2.9, group: 'A' },
+          { x: 3.3, y: 4.2, group: 'B' },
+          { x: 3.8, y: 3.4, group: 'B' },
+          { x: 4.2, y: 4.8, group: 'B' },
+          { x: 4.6, y: 3.9, group: 'B' },
+          { x: 5.1, y: 5.2, group: 'B' },
+          { x: 5.5, y: 4.4, group: 'C' },
+          { x: 6.0, y: 5.7, group: 'C' },
+          { x: 6.4, y: 4.9, group: 'C' },
+          { x: 6.9, y: 6.1, group: 'C' },
+          { x: 7.3, y: 5.3, group: 'C' },
+        ],
+      },
+      params: [{ name: 'brush', select: 'interval' }],
+      mark: 'point',
+      encoding: {
+        x: { field: 'x', type: 'quantitative' },
+        y: { field: 'y', type: 'quantitative' },
+        color: {
+          condition: { param: 'brush', field: 'group', type: 'nominal' },
+          value: 'lightgray',
+        },
+      },
+    },
+  },
   {
     id: 'area',
     name: 'Stacked area',