D3 Interactive Charts Examples

This document demonstrates the interactive features available for D3 charts in DataGlass. These features are D3-only - Observable Plot has native interaction support via tip marks.

Note: Some examples include config options marked as "Planned" in the Configuration Reference. These options are parsed but not yet implemented - they're included for forward compatibility.

Basic Tooltip
Custom Tooltip Templates
Tooltip Positioning
Hover Effects
Single Selection
Multiple Selection
Combined Interactions
Interactive Bar Chart
Interactive Line Chart
Interactive Scatter Plot
Configuration Reference

Simple tooltip showing all fields on hover:

View Source

data:
  source: |
    category,value,count
    Product A,120,45
    Product B,98,32
    Product C,150,67
    Product D,85,28

engine: d3
type: bar
x: category
y: value

interactions:
  tooltip:
    enabled: true
    position: auto
    offset: 10
    
scales:
    color:
      scheme: blab

Use templates to format tooltip content:

View Source

data:
  source: |
    product,revenue,units,region
    Widget,50000,1250,North
    Gadget,75000,2100,South
    Tool,42000,980,East
    Device,91000,3200,West

engine: d3
type: bar
x: product
y: revenue

interactions:
  tooltip:
    enabled: true
    template: "{product}: ${revenue}\n{units} units sold in {region}"
    fields: [product, revenue, units, region]
    position: top
    offset: 15

Control where tooltips appear:

View Source

data:
  source: |
    month,sales
    Jan,4200
    Feb,5100
    Mar,4800
    Apr,6300
    May,5900
    Jun,7100

engine: d3
type: line
x: month
y: sales

interactions:
  tooltip:
    enabled: true
    position: bottom
    offset: 20

Position options:

auto - Automatically chooses best position (default)
top - Above the cursor
bottom - Below the cursor
left - Left of cursor
right - Right of cursor

Hover Effects

Add visual feedback on hover:

View Source

data:
  source: |
    category,value
    Alpha,45
    Beta,62
    Gamma,38
    Delta,71
    Epsilon,54

engine: d3
type: bar
x: category
y: value

interactions:
  hover:
    enabled: true
    highlight: true
    debounce: 100
    showTooltip: true
  tooltip:
    enabled: true

Single Selection

Click to select one item at a time:

View Source

data:
  source: |
    department,budget,employees
    Engineering,850000,45
    Sales,620000,32
    Marketing,480000,28
    Support,390000,21
    HR,280000,15

engine: d3
type: bar
x: department
y: budget

interactions:
  selection:
    enabled: true
    mode: single
    highlightColor: "#3b82f6"
    opacity: 0.3
  tooltip:
    enabled: true
    template: "{department}\nBudget: ${budget}\nEmployees: {employees}"

Multiple Selection

Click to select multiple items:

View Source

data:
  source: |
    product,q1,q2,q3,q4
    Product A,120,135,128,142
    Product B,98,105,112,108
    Product C,150,148,165,171
    Product D,85,92,88,95

engine: d3
type: bar
x: product
y: q1

interactions:
  selection:
    enabled: true
    mode: multiple
    keyField: product
    highlightColor: "#10b981"
    opacity: 0.4
  tooltip:
    enabled: true

Selection modes:

single - Only one item can be selected at a time
multiple - Multiple items can be selected (toggle on click)

Combined Interactions

Use multiple interaction types together:

View Source

data:
  source: |
    month,revenue,expenses,profit
    Jan,45000,32000,13000
    Feb,52000,35000,17000
    Mar,48000,33000,15000
    Apr,61000,38000,23000
    May,58000,36000,22000
    Jun,67000,40000,27000

engine: d3
type: bar
x: month
y: profit

interactions:
  tooltip:
    enabled: true
    template: "{month} Profit: ${profit}\nRevenue: ${revenue}\nExpenses: ${expenses}"
    position: auto
    offset: 12
  hover:
    enabled: true
    highlight: true
    debounce: 50
  selection:
    enabled: true
    mode: multiple
    highlightColor: "#8b5cf6"

Interactive Bar Chart

Full-featured interactive bar chart:

View Source

data:
  source: |
    region,sales,target,growth
    North,425000,400000,6.25
    South,380000,350000,8.57
    East,510000,480000,6.25
    West,445000,420000,5.95
    Central,395000,380000,3.95

engine: d3
type: bar
x: region
y: sales

width: 700
height: 450
title: Regional Sales Performance
xLabel: Region
yLabel: Sales ($)

interactions:
  tooltip:
    enabled: true
    template: "{region}\nSales: ${sales}\nTarget: ${target}\nGrowth: {growth}%"
    fields: [region, sales, target, growth]
    position: auto
    offset: 15
  hover:
    enabled: true
    highlight: true
    showTooltip: true
    debounce: 100
  selection:
    enabled: true
    mode: single
    keyField: region
    highlightColor: "#3b82f6"
    opacity: 0.25

Interactive Line Chart

Time series with interactive features:

View Source

data:
  source: |
    date,temperature,humidity
    2024-01-01,18,65
    2024-01-02,21,62
    2024-01-03,19,68
    2024-01-04,23,58
    2024-01-05,22,61
    2024-01-06,20,66
    2024-01-07,24,55

engine: d3
type: line
x: date
y: temperature

width: 700
height: 400
title: Daily Temperature
xLabel: Date
yLabel: Temperature (°C)

interactions:
  tooltip:
    enabled: true
    template: "{date}\nTemp: {temperature}°C\nHumidity: {humidity}%"
    position: top
    offset: 20
  hover:
    enabled: true
    highlight: false
    showTooltip: true

Interactive Scatter Plot

Scatter plot with selection:

View Source

data:
  source: |
    product,price,satisfaction,category
    A,299,4.2,Electronics
    B,149,4.5,Electronics
    C,499,3.8,Electronics
    D,89,4.7,Accessories
    E,199,4.1,Accessories
    F,349,4.4,Electronics
    G,79,4.6,Accessories
    H,599,3.9,Electronics

engine: d3
type: scatter
x: price
y: satisfaction

width: 600
height: 500
title: Price vs Customer Satisfaction
xLabel: Price ($)
yLabel: Satisfaction Rating

interactions:
  tooltip:
    enabled: true
    template: "Product {product}\nPrice: ${price}\nRating: {satisfaction}⭐\nCategory: {category}"
    position: auto
    offset: 15
  hover:
    enabled: true
    highlight: true
    debounce: 100
  selection:
    enabled: true
    mode: multiple
    keyField: product
    highlightColor: "#f59e0b"
    opacity: 0.3

Configuration Reference

yaml

interactions:
  tooltip:
    enabled: true              # Enable tooltips (default: true)
    template: "{x}: {y}"       # Template with {field} placeholders
    fields: [x, y, color]      # Fields to show (if no template)
    position: auto             # auto | top | bottom | left | right
    offset: 15                 # Distance from cursor in pixels

Hover Configuration

yaml

interactions:
  hover:
    enabled: true              # Enable hover effects
    highlight: true            # Dim non-hovered elements (opacity: 0.7)
    debounce: 100              # Debounce delay in milliseconds

Selection Configuration

yaml

interactions:
  selection:
    enabled: true              # Enable click selection
    mode: single               # single | multiple
    keyField: id               # Field to use as unique key
    highlightColor: "#3b82f6"  # Selection highlight color
    opacity: 0.3               # Non-selected element opacity (0-1)

Brush Selection (Scatter Charts Only)

Enable brush selection on scatter charts via config:

yaml

type: scatter
x: xValue
y: yValue
color: category

interactions:
  brush:
    enabled: true
    unselectedOpacity: 0.3       # Opacity for non-selected points

Legacy: type: brushable-scatter is deprecated. Use type: scatter with brush config instead.

Important Notes

D3 Engine Required

Interactive features only work with engine: d3. If you use Observable Plot (default), you'll get a validation error:

yaml

# ❌ This will fail validation
engine: plot
interactions:
  tooltip:
    enabled: true

Error message:

Interactive features are only supported with engine: 'd3'.
Observable Plot has native interaction support via 'tip' marks.

Observable Plot Alternative

For Observable Plot charts, use the native tip mark:

View Source

data:
  source: |
    x,y
    1,10
    2,20
    3,15

engine: plot
marks:
  - type: dot
    x: x
    y: y
    tip: true  # Native Plot tooltip

Chart Element Requirements

For interactions to work, chart implementations must add these attributes to SVG elements:

data-interactive - Marks element as interactive
data-index - Index in the data array

Example:

javascript

// In chart strategy implementation
bars
  .attr('data-interactive', 'true')
  .attr('data-index', (d, i) => i);

Advanced Examples

Runtime Event Handlers

You can attach runtime event handlers programmatically (not via YAML):

javascript

// In TypeScript/JavaScript code
const config = {
  engine: 'd3',
  type: 'bar',
  x: 'category',
  y: 'value',
  interactions: {
    tooltip: { enabled: true },
    onClickRuntime: (event) => {
      console.log('Clicked:', event.data);
    },
    onHoverRuntime: (event) => {
      console.log('Hovered:', event.data);
    },
    onSelectionChangeRuntime: (selectedIds, selectedData) => {
      console.log('Selected:', selectedIds, selectedData);
    }
  }
};

Debug Mode

Enable debug logging for interactions:

yaml

interactions:
  debug: true  # Logs all interaction events to console
  tooltip:
    enabled: true

Disable All Interactions

yaml

interactions:
  disabled: true  # Disables all interactions (useful for static exports)

Testing Your Interactive Charts

Enable interactions with engine: d3
Hover over chart elements to see tooltips
Click elements to select them (if selection enabled)
Check console for debug output (if debug: true)

Browser Compatibility

Interactive features work in all modern browsers:

✅ Chrome/Edge (latest)
✅ Firefox (latest)
✅ Safari (latest)

Requires:

SVG support
JavaScript enabled
Modern DOM APIs

Performance Considerations

For large datasets (>1000 points):

Use debounce on hover events
Consider disabling hover effects
Test performance in your target browser

Example for large datasets:

yaml

interactions:
  tooltip:
    enabled: true
  hover:
    enabled: true
    debounce: 200  # Longer debounce for better performance
    highlight: false  # Disable expensive highlight effects

D3 Interactive Charts Examples

Table of Contents

Basic Tooltip

Custom Tooltip Templates

Tooltip Positioning

Hover Effects

Single Selection

Multiple Selection

Combined Interactions

Interactive Bar Chart

Interactive Line Chart

Interactive Scatter Plot

Configuration Reference

Tooltip Configuration

Hover Configuration

Selection Configuration

Brush Selection (Scatter Charts Only)

Important Notes

D3 Engine Required

Observable Plot Alternative

Chart Element Requirements

Advanced Examples

Runtime Event Handlers

Debug Mode

Disable All Interactions

Testing Your Interactive Charts

Browser Compatibility

Performance Considerations

Troubleshooting

Tooltips not appearing?

Selection not working?

Hover effects not visible?

Next Steps

D3 Interactive Charts Examples ​

Table of Contents ​

Basic Tooltip ​

Custom Tooltip Templates ​

Tooltip Positioning ​

Hover Effects ​

Single Selection ​

Multiple Selection ​

Combined Interactions ​

Interactive Bar Chart ​

Interactive Line Chart ​

Interactive Scatter Plot ​

Configuration Reference ​

Tooltip Configuration ​

Hover Configuration ​

Selection Configuration ​

Brush Selection (Scatter Charts Only) ​

Important Notes ​

D3 Engine Required ​

Observable Plot Alternative ​

Chart Element Requirements ​

Advanced Examples ​

Runtime Event Handlers ​

Debug Mode ​

Disable All Interactions ​

Testing Your Interactive Charts ​

Browser Compatibility ​

Performance Considerations ​

Troubleshooting ​

Tooltips not appearing? ​

Selection not working? ​

Hover effects not visible? ​

Next Steps ​

D3 Interactive Charts Examples

Table of Contents

Basic Tooltip

Custom Tooltip Templates

Tooltip Positioning

Hover Effects

Single Selection

Multiple Selection

Combined Interactions

Interactive Bar Chart

Interactive Line Chart

Interactive Scatter Plot

Configuration Reference

Tooltip Configuration

Hover Configuration

Selection Configuration

Brush Selection (Scatter Charts Only)

Important Notes

D3 Engine Required

Observable Plot Alternative

Chart Element Requirements

Advanced Examples

Runtime Event Handlers

Debug Mode

Disable All Interactions

Testing Your Interactive Charts

Browser Compatibility

Performance Considerations

Troubleshooting

Tooltips not appearing?

Selection not working?

Hover effects not visible?

Next Steps