Diverging Color Scale Examples

This document demonstrates the new diverging color scale features implemented in Phase 1 of the Observable Plot compatibility enhancement project.

Table of Contents

1. Temperature Anomalies (Crosses Zero)
2. Profit/Loss Analysis
3. Survey Sentiment Scores
4. Performance Deviation
5. Political Bias Spectrum
6. Correlation Matrix

---

Temperature Anomalies

Use Case: Visualizing climate temperature deviations from baseline

Data: Global Temperature Anomalies (°C from 1951-1980 average)

View Source

data:
  source: [
    {"year": 2010, "anomaly": 0.72, "region": "Global"},
    {"year": 2011, "anomaly": 0.61, "region": "Global"},
    {"year": 2012, "anomaly": 0.65, "region": "Global"},
    {"year": 2013, "anomaly": 0.68, "region": "Global"},
    {"year": 2014, "anomaly": 0.75, "region": "Global"},
    {"year": 2015, "anomaly": 0.90, "region": "Global"},
    {"year": 2016, "anomaly": 1.02, "region": "Global"},
    {"year": 2017, "anomaly": 0.93, "region": "Global"},
    {"year": 2018, "anomaly": 0.85, "region": "Global"},
    {"year": 2019, "anomaly": 0.98, "region": "Global"},
    {"year": 2020, "anomaly": 1.02, "region": "Global"}
  ]
type: scatter
engine: plot
x: year
y: anomaly
title: Global Temperature Anomalies
width: 700
height: 400
marks:
  - type: dot
    configuration:
      x: year
      y: anomaly
      fill: anomaly
      r: 8
      tip: true
scales:
  color:
    scheme: rdbu
    pivot: 0
    legend: true

Features Demonstrated:

• ✅ Diverging color scale (red = warmer, blue = cooler)
• ✅ Auto-pivot at 0 (baseline temperature)
• ✅ rdbu (Red-Blue) color scheme

---

Profit/Loss Analysis

Use Case: Business performance visualization showing losses (negative) vs. profits (positive)

Data: Quarterly Business Performance

View Source

data:
  source: [
    {"quarter": "Q1 2022", "profit": -2500, "department": "Marketing"},
    {"quarter": "Q2 2022", "profit": -800, "department": "Marketing"},
    {"quarter": "Q3 2022", "profit": 1200, "department": "Marketing"},
    {"quarter": "Q4 2022", "profit": 3400, "department": "Marketing"},
    {"quarter": "Q1 2023", "profit": 5200, "department": "Marketing"},
    {"quarter": "Q1 2022", "profit": 1500, "department": "Sales"},
    {"quarter": "Q2 2022", "profit": 2800, "department": "Sales"},
    {"quarter": "Q3 2022", "profit": 4100, "department": "Sales"},
    {"quarter": "Q4 2022", "profit": 5500, "department": "Sales"},
    {"quarter": "Q1 2023", "profit": 6800, "department": "Sales"},
    {"quarter": "Q1 2022", "profit": -3200, "department": "R&D"},
    {"quarter": "Q2 2022", "profit": -2100, "department": "R&D"},
    {"quarter": "Q3 2022", "profit": -1500, "department": "R&D"},
    {"quarter": "Q4 2022", "profit": -800, "department": "R&D"},
    {"quarter": "Q1 2023", "profit": 400, "department": "R&D"}
  ]
type: scatter
engine: plot
title: Department Profit/Loss by Quarter
width: 700
height: 400
marks:
  - type: dot
    configuration:
      x: quarter
      y: profit
      fill: profit
      r: 10
      tip: true
      opacity: 0.8
  - type: rule
    configuration:
      y: 0
      stroke: "#333"
      strokeWidth: 2
      strokeDasharray: "5,5"
scales:
  color:
    scheme: prgn
    pivot: 0
    symmetric: true
    legend: true
  x:
    type: band

Features Demonstrated:

• ✅ Diverging scale for profit/loss (purple = loss, green = profit)
• ✅ prgn (Purple-Green) color scheme
• ✅ Symmetric domain (equal visual weight for positive/negative)
• ✅ Reference line at zero
• ✅ Band scale for categorical x-axis

---

Survey Sentiment Scores

Use Case: Customer satisfaction survey with scores from -5 (very dissatisfied) to +5 (very satisfied)

Data: Product Satisfaction Survey

View Source

data:
  source: [
    {"product": "Product A", "satisfaction": 3.8, "responses": 245},
    {"product": "Product B", "satisfaction": -1.2, "responses": 189},
    {"product": "Product C", "satisfaction": 4.2, "responses": 312},
    {"product": "Product D", "satisfaction": 0.5, "responses": 156},
    {"product": "Product E", "satisfaction": -2.8, "responses": 98},
    {"product": "Product F", "satisfaction": 1.9, "responses": 276},
    {"product": "Product G", "satisfaction": -0.3, "responses": 201},
    {"product": "Product H", "satisfaction": 2.6, "responses": 334}
  ]
type: scatter
engine: plot
title: Product Satisfaction Scores
width: 700
height: 400
marks:
  - type: dot
    configuration:
      x: product
      y: satisfaction
      r: responses
      fill: satisfaction
      tip: true
      opacity: 0.7
scales:
  color:
    scheme: brbg
    pivot: 0
    domain: [-5, 5]
    legend: true
  r:
    type: sqrt
    range: [5, 25]
  x:
    type: point

Features Demonstrated:

• ✅ Diverging sentiment (brown = negative, blue-green = positive)
• ✅ brbg (Brown-Blue-Green) color scheme
• ✅ Proportional symbols (size = number of responses)
• ✅ Manual domain specification [-5, 5]
• ✅ Point scale for evenly-spaced categories

---

Performance Deviation

Use Case: Employee performance ratings relative to team average

Data: Team Performance vs. Average

View Source

data:
  source: [
    {"employee": "Alice", "deviation": 12.5, "department": "Engineering"},
    {"employee": "Bob", "deviation": -5.2, "department": "Engineering"},
    {"employee": "Carol", "deviation": 8.3, "department": "Engineering"},
    {"employee": "Dave", "deviation": -2.1, "department": "Engineering"},
    {"employee": "Eve", "deviation": 15.7, "department": "Engineering"},
    {"employee": "Frank", "deviation": 3.4, "department": "Design"},
    {"employee": "Grace", "deviation": -8.6, "department": "Design"}
  ]

engine: plot
title: Performance Deviation from Team Average
width: 800
height: 500
facet:
  x: department
marks:
  - type: dot
    configuration:
      x: employee
      y: deviation
      fill: deviation
      r: 8
      tip: true
  - type: rule
    configuration:
      y: 0
      stroke: "gray"
      strokeWidth: 1
scales:
  color:
    scheme: puor
    pivot: 0
    legend: true

Features Demonstrated:

• ✅ Faceted visualization by department
• ✅ puor (Purple-Orange) diverging scheme
• ✅ Performance above/below average clearly visible
• ✅ Reference line showing average (0) in each facet

---

Political Bias Spectrum

Use Case: Media source bias visualization

Data: News Source Political Leaning

View Source

data:
  source: [
    {"source": "Source A", "bias": -0.8, "trust": 85, "category": "Traditional"},
    {"source": "Source B", "bias": 0.9, "trust": 72, "category": "Traditional"},
    {"source": "Source C", "bias": -0.3, "trust": 90, "category": "Traditional"},
    {"source": "Source D", "bias": 0.2, "trust": 88, "category": "Traditional"},
    {"source": "Source E", "bias": -0.6, "trust": 78, "category": "Digital"},
    {"source": "Source F", "bias": 0.7, "trust": 65, "category": "Digital"},
    {"source": "Source G", "bias": -0.4, "trust": 82, "category": "Digital"},
    {"source": "Source H", "bias": 0.5, "trust": 70, "category": "Digital"},
    {"source": "Source I", "bias": 0.0, "trust": 95, "category": "Wire Service"},
    {"source": "Source J", "bias": -0.1, "trust": 92, "category": "Wire Service"}
  ]
type: scatter
engine: plot
title: Media Source Bias vs. Trust Score
width: 700
height: 500
marks:
  - type: dot
    configuration:
      x: bias
      y: trust
      fill: bias
      r: 10
      tip: true
  - type: text
    configuration:
      x: bias
      y: trust
      text: source
      dy: -15
      fontSize: 9
      textAnchor: middle
  - type: rule
    configuration:
      x: 0
      stroke: "black"
      strokeWidth: 2
scales:
  color:
    scheme: rdbu
    pivot: 0
    domain: [-1, 1]
    legend: true
  x:
    label: "Political Bias (Left ← → Right)"
  y:
    label: "Trust Score"

Features Demonstrated:

• ✅ Diverging scale for political spectrum (red = right, blue = left)
• ✅ Text labels for each point
• ✅ Vertical reference line at center (unbiased)
• ✅ Custom axis labels
• ✅ Fixed domain [-1, 1] for consistent scale

---

Correlation Matrix

Use Case: Statistical correlation heatmap

Data: Feature Correlations

View Source

data:
  source: [
    {"var1": "Age", "var2": "Income", "correlation": 0.42},
    {"var1": "Age", "var2": "Education", "correlation": -0.15},
    {"var1": "Age", "var2": "Experience", "correlation": 0.89},
    {"var1": "Income", "var2": "Education", "correlation": 0.67},
    {"var1": "Income", "var2": "Experience", "correlation": 0.53},
    {"var1": "Education", "var2": "Experience", "correlation": 0.21},
    {"var1": "Income", "var2": "Age", "correlation": 0.42},
    {"var1": "Education", "var2": "Age", "correlation": -0.15},
    {"var1": "Experience", "var2": "Age", "correlation": 0.89},
    {"var1": "Education", "var2": "Income", "correlation": 0.67},
    {"var1": "Experience", "var2": "Income", "correlation": 0.53},
    {"var1": "Experience", "var2": "Education", "correlation": 0.21}
  ]
type: heatmap
engine: plot
title: Feature Correlation Matrix
width: 600
height: 600
marks:
  - type: dot
    configuration:
      x: var1
      y: var2
      fill: correlation
      r: 20
      tip: true
scales:
  color:
    scheme: rdylbu
    pivot: 0
    domain: [-1, 1]
    legend: true
  x:
    type: point
  y:
    type: point

Features Demonstrated:

• ✅ Correlation matrix visualization
• ✅ rdylbu (Red-Yellow-Blue) color scheme
• ✅ Symmetric domain [-1, 1] for correlation values
• ✅ Dot-based heatmap (from examples document)
• ✅ Point scales for matrix layout

---

Advanced Example: Auto-Detected Diverging Pattern

Use Case: Let the plugin auto-detect when diverging scale is appropriate

Data: Centered Distribution (Will Be Auto-Detected)

View Source

data:
  source: [
    {"item": "A", "value": 45},
    {"item": "B", "value": 52},
    {"item": "C", "value": 48},
    {"item": "D", "value": 55},
    {"item": "E", "value": 50},
    {"item": "F", "value": 47},
    {"item": "G", "value": 53},
    {"item": "H", "value": 49}
  ]
type: scatter
engine: plot
title: Centered Distribution (Auto-Detected Pivot at Median)
width: 700
height: 400
marks:
  - type: dot
    configuration:
      x: item
      y: value
      fill: value
      r: 12
      tip: true
scales:
  color:
    scheme: spectral
    # pivot: not specified - will auto-detect at median (50)
    legend: true
  x:
    type: point

Features Demonstrated:

• ✅ Auto-detection of pivot point (will use median = 50)
• ✅ spectral diverging color scheme
• ✅ No manual pivot needed
• 📝 Note: Auto-detection implementation pending (Task 1.2.3)

---

Color Scheme Reference

Available Diverging Color Schemes

Scheme	Colors	Best For
rdbu	Red → White → Blue	Temperature, political bias
rdylbu	Red → Yellow → Blue	Correlations, wide range
brbg	Brown → White → Blue-Green	Natural/organic data
piyg	Pink → White → Yellow-Green	Gender-related data
prgn	Purple → White → Green	Profit/loss, performance
puor	Purple → White → Orange	Abstract comparisons
rdgy	Red → White → Gray	Risk/safety analysis
spectral	Red → Yellow → Green → Blue	Multi-level deviations

---

Best Practices

When to Use Diverging Scales

✅ Good Use Cases:

• Data that crosses a meaningful zero point (profit/loss, temperature anomalies)
• Deviation from average or baseline
• Opposite categories (agree/disagree, for/against)
• Correlations (-1 to +1)
• Sentiment analysis (negative to positive)

❌ Not Recommended For:

• Sequential data (revenue growth over time)
• Purely positive metrics (counts, prices)
• Unrelated categories (product types, regions)

Configuration Tips

1. Choose Appropriate Pivot:

   pivot: 0  # For zero-centered data
   pivot: 50  # For percentage deviation from 50%
   # Or omit for auto-detection

2. Use Symmetric Domain for Balance:

   symmetric: true  # Ensures visual balance

3. Specify Domain for Fixed Scale:

   domain: [-10, 10]  # Consistent across multiple charts

4. Add Reference Lines:

   marks:
     - type: rule
       configuration:
         y: 0  # Or your pivot value
         stroke: gray

---

Implementation Status

✅ Currently Working

• Type definitions for diverging scales (pivot, symmetric)
• 8 diverging color schemes
• Manual pivot specification
• Symmetric domain calculation
• Utility functions (detectDivergingPattern, calculateSymmetricDomain)

🚧 Coming Soon (Task 1.2.3)

• Automatic pivot detection
• Integration with PlotFactory
• Smart defaults based on data patterns

📝 Usage Today

Until Task 1.2.3 is complete, manually specify:

scales:
  color:
    scheme: rdbu  # Use any diverging scheme
    domain: [-10, 10]  # Manual domain

After Task 1.2.3, you'll be able to use:

scales:
  color:
    scheme: rdbu  # Diverging color scheme
    pivot: 0  # Optional - will auto-detect if omitted
    symmetric: true  # Optional - symmetric domain

---

Testing Your Charts

To test these examples:

1. Copy any example above into an Obsidian note
2. Save the file (charts render on save)
3. Modify the data to match your use case
4. Experiment with color schemes to find the best visual representation

Troubleshooting

If charts don't render:

• Ensure DataGlass plugin is enabled
• Check that engine: plot is specified
• Verify data format (JSON array of objects)
• Check browser console for errors

---

Next Examples

See also:

• area-line-examples.md - Line and area charts
• bar-cell-rect-examples.md - Bar and rectangle charts
• examples/dot_image_text/ - Observable Plot gallery examples

---

Created: 2025-10-12
Phase: 1 - Quick Wins
Status: Ready for Task 1.2.3 integration