DataGlass

Appearance

Interactive Selection Examples ​

This document demonstrates the SelectionState and InteractionManager features from Phase 3.8, showing how to create interactive charts with click selection, hover highlighting, and brush selection.

Example 1: Click Selection with Scatter Plot ​

Click on data points to select them. Click again to deselect.

View Source
data:
  source: |
    product,sales,profit,region
    Widget A,12000,3200,North
    Widget B,18000,4500,South
    Widget C,9000,2100,East
    Widget D,15000,3800,West
    Widget E,21000,5200,North
    Widget F,11000,2800,South
    Widget G,16000,4100,East
    Widget H,13000,3400,West
    Widget I,19000,4800,North
    Widget J,14000,3600,South

engine: plot
type: scatter
x: sales
y: profit
color: region

title: Product Performance (Click to Select)
width: 700
height: 500

interactions:
  - type: click
    mode: multi-select
    highlightColor: "#ef4444"
    highlightOpacity: 1.0

scales:
  color:
    scheme: category10
    label: Region

Features Demonstrated:

  • Click to toggle selection
  • Multi-select mode (multiple items can be selected)
  • Custom highlight color and opacity
  • Selection state persists until clicked again

Example 2: Single Selection Mode ​

Only one item can be selected at a time. Clicking another item replaces the selection.

View Source
data:
  source: |
    category,revenue,quarter
    Product,45000,Q1
    Service,32000,Q1
    Support,18000,Q1
    Product,52000,Q2
    Service,38000,Q2
    Support,22000,Q2
    Product,48000,Q3
    Service,35000,Q3
    Support,20000,Q3
    Product,58000,Q4
    Service,41000,Q4
    Support,25000,Q4

engine: plot
type: bar
x: quarter
y: revenue
fill: category

title: Quarterly Revenue by Category (Single Selection)
width: 700
height: 500

interactions:
  - type: click
    mode: single-select
    highlightColor: "#10b981"

scales:
  fill:
    scheme: tableau10
    label: Category

Features Demonstrated:

  • Single-select mode (only one item at a time)
  • Selection automatically clears when clicking another item
  • Works with grouped bar charts

Example 3: Hover Highlighting ​

Hover over data points to highlight them temporarily.

View Source
data:
  source: |
    month,temperature,humidity,city
    Jan,5,65,Seattle
    Feb,7,68,Seattle
    Mar,10,62,Seattle
    Apr,13,58,Seattle
    May,17,55,Seattle
    Jun,20,52,Seattle
    Jan,15,45,Phoenix
    Feb,18,42,Phoenix
    Mar,22,38,Phoenix
    Apr,27,32,Phoenix
    May,32,28,Phoenix
    Jun,38,25,Phoenix

engine: plot

marks:
  - type: line
    configuration:
      x: month
      y: temperature
      stroke: city
      strokeWidth: 2
  - type: dot
    configuration:
      x: month
      y: temperature
      fill: city
      r: 5

title: Temperature Trends (Hover to Highlight)
width: 700
height: 500

interactions:
  - type: hover
    highlightColor: "#f59e0b"
    showTooltip: true
    hoverDebounce: 100

scales:
  stroke:
    scheme: paired
    label: City
  fill:
    scheme: paired

Features Demonstrated:

  • Hover highlighting with custom color
  • Debounced hover events (100ms delay)
  • Tooltip display on hover
  • Works with multi-mark charts (line + dot)

Example 4: Brush Selection ​

Click and drag to select multiple data points within a rectangular area.

View Source
data:
  source: |
    employee,experience,salary,department
    Alice,2,55000,Engineering
    Bob,5,75000,Engineering
    Carol,3,62000,Sales
    Dave,8,95000,Engineering
    Eve,4,68000,Sales
    Frank,6,82000,Marketing
    Grace,1,48000,Sales
    Henry,10,110000,Engineering
    Iris,7,88000,Marketing
    Jack,3,64000,Sales
    Karen,9,102000,Engineering
    Leo,4,70000,Marketing
    Mia,2,52000,Sales
    Nathan,6,80000,Engineering
    Olivia,5,73000,Marketing

engine: plot
type: scatter
x: experience
y: salary
color: department

title: Employee Salary vs Experience (Drag to Select)
width: 700
height: 500

interactions:
  - type: brush
    dimension: xy
    highlightColor: "#8b5cf6"
    highlightOpacity: 0.8

scales:
  color:
    scheme: category10
    label: Department

Features Demonstrated:

  • Brush selection with drag interaction
  • 2D selection (xy dimension)
  • Selected points highlighted with custom color
  • Selection clears when clicking outside brush area

Example 5: Combined Interactions ​

Use multiple interaction types together: hover, click, and tooltips.

View Source
data:
  source: |
    country,gdp_per_capita,life_expectancy,population
    USA,65000,78.5,330
    China,10500,76.9,1400
    India,2100,69.7,1380
    Germany,46000,81.0,83
    UK,42000,81.2,67
    France,40000,82.5,65
    Japan,40000,84.6,126
    Brazil,8900,75.9,212
    Russia,11300,72.6,144
    Mexico,9700,75.1,128

engine: plot
type: scatter
x: gdp_per_capita
y: life_expectancy

title: GDP vs Life Expectancy (Interactive)
width: 700
height: 500

marks:
  - type: dot
    configuration:
      x: gdp_per_capita
      y: life_expectancy
      r: population
      fill: "#3b82f6"
      fillOpacity: 0.6

interactions:
  - type: hover
    highlightColor: "#ef4444"
    showTooltip: true
  - type: click
    mode: multi-select
    highlightColor: "#10b981"

tooltip:
  template: "{country}: ${gdp_per_capita:,.0f} GDP, {life_expectancy} years"
  position: auto

scales:
  r:
    range: [50, 500]
    label: Population (millions)

Features Demonstrated:

  • Multiple interaction types on same chart
  • Hover highlighting (red)
  • Click selection (green)
  • Custom tooltip with formatted values
  • Bubble chart with size encoding

Example 6: Selection with Aggregated Data ​

Interactive selection works with aggregated and transformed data.

View Source
data:
  source: |
    date,sales,region
    2024-01,12000,North
    2024-01,15000,South
    2024-01,11000,East
    2024-02,13000,North
    2024-02,16000,South
    2024-02,12000,East
    2024-03,14000,North
    2024-03,17000,South
    2024-03,13000,East
    2024-04,15000,North
    2024-04,18000,South
    2024-04,14000,East

transformations:
  - type: aggregate
    configuration:
      groupBy: [region]
      sum: [sales]
      avg: [sales]

engine: plot
type: bar
x: region
y: sales_sum

title: Total Sales by Region (Click to Select)
width: 600
height: 450

interactions:
  - type: click
    mode: multi-select
    highlightColor: "#ec4899"

marks:
  - type: bar
    configuration:
      x: region
      y: sales_sum
      fill: region

scales:
  fill:
    scheme: accent

Features Demonstrated:

  • Selection on aggregated data
  • Works with data transformations
  • Custom highlight color (pink)
  • Bar chart with categorical data

Example 7: Brush Selection with 1D Constraint ​

Brush along only the X-axis to select data points.

View Source
data:
  source: |
    week,metric_a,metric_b
    1,120,85
    2,135,92
    3,128,88
    4,142,95
    5,155,98
    6,148,90
    7,162,102
    8,158,97
    9,171,105
    10,165,100
    11,178,108
    12,185,112

engine: plot

marks:
  - type: line
    configuration:
      x: week
      y: metric_a
      stroke: "#3b82f6"
      strokeWidth: 2
  - type: dot
    configuration:
      x: week
      y: metric_a
      fill: "#3b82f6"
      r: 5

title: Weekly Metrics (Brush Along X-Axis)
width: 700
height: 450

interactions:
  - type: brush
    dimension: x
    highlightColor: "#f59e0b"

Features Demonstrated:

  • 1D brush selection (x-dimension only)
  • Drag horizontally to select time range
  • Works with line charts
  • Orange highlight for selected region

Example 8: Interactive Selection State Events ​

Monitor selection changes with event handlers.

View Source
data:
  source: |
    project,budget,roi,status
    Alpha,50000,25,Active
    Beta,75000,32,Active
    Gamma,40000,18,Paused
    Delta,90000,38,Active
    Epsilon,55000,22,Active
    Zeta,65000,28,Paused
    Eta,80000,35,Active
    Theta,45000,20,Active

engine: plot
type: scatter
x: budget
y: roi
color: status

title: Project ROI Analysis (Selection Events)
width: 700
height: 500

interactions:
  - type: click
    mode: multi-select
    highlightColor: "#8b5cf6"
    onSelectionChange: |
      (selected) => {
        console.log(`${selected.length} projects selected`);
      }

scales:
  color:
    scheme: category10
    label: Status

Features Demonstrated:

  • Selection change event handlers
  • Log selection count to console
  • Purple highlight color
  • Multi-select mode with status encoding

API Reference ​

Interaction Types ​

Click Interaction ​

yaml
interactions:
  - type: click
    mode: single-select | multi-select  # Selection mode
    highlightColor: "#color"             # CSS color for selected items
    highlightOpacity: 0.8                # Opacity of highlight
    onSelectionChange: function          # Callback when selection changes

Hover Interaction ​

yaml
interactions:
  - type: hover
    highlightColor: "#color"             # CSS color for hover
    showTooltip: true                    # Show tooltip on hover
    hoverDebounce: 100                   # Debounce delay in ms

Brush Interaction ​

yaml
interactions:
  - type: brush
    dimension: x | y | xy                # Brush dimension
    highlightColor: "#color"             # Highlight color for selection
    highlightOpacity: 0.8                # Opacity of brush selection
    onBrush: function                    # Callback during brushing
    onBrushEnd: function                 # Callback when brush ends

Selection Modes ​

  • single-select: Only one item can be selected at a time
  • multi-select: Multiple items can be selected simultaneously

Event Handlers ​

All interaction types support event handlers:

yaml
interactions:
  - type: click
    onSelectionChange: |
      (selected) => {
        // Handle selection change
        console.log('Selected items:', selected);
      }

Best Practices ​

  1. Choose Appropriate Interaction Types:

    • Use click for deliberate selection
    • Use hover for quick exploration
    • Use brush for range selection

  2. Visual Feedback:

    • Use contrasting highlight colors
    • Adjust opacity for layered effects
    • Consider colorblind-friendly palettes

  3. Performance:

    • Use hoverDebounce to reduce event frequency
    • Limit interaction on very large datasets (>10k points)
    • Consider sampling for better performance

  4. User Experience:

    • Provide clear visual feedback for interactions
    • Use tooltips to show detailed information
    • Allow users to clear selections easily

  5. Accessibility:

    • Ensure sufficient color contrast
    • Provide keyboard alternatives where possible
    • Use semantic markup for screen readers

Examples created as part of Phase 3.8: Interactive Features

Released under the MIT License. Built by Boundary Lab.

Copyright © 2024-2025 DataGlass