Normalized Stacking - 100% Stacked Charts

Observable Plot's stack: "normalize" option creates 100% stacked charts. Values are normalized to percentages (0-100%).

Basic Usage

100% Stacked Bars

type: bar
data:
  source: '[{"year": 2020, "vendor": "A", "share": 3200}, {"year": 2020, "vendor": "B", "share": 2800}, {"year": 2021, "vendor": "A", "share": 4500}, {"year": 2021, "vendor": "B", "share": 3500}]'
marks:
  - type: barY
    configuration:
      x: year
      y: share
      fill: vendor
      stack: normalize

100% Stacked Area

type: area
data:
  source: '[{"date": "2024-01", "revenue": 1000, "cost": 200}, {"date": "2024-02", "revenue": 1200, "cost": 300}, {"date": "2024-03", "revenue": 1500, "cost": 250}]'
marks:
  - type: areaY
    configuration:
      x: date
      y: revenue
      fill: cost
      stack: normalize

Real-World Examples

Market Share Dashboard

type: bar
data:
  source: '[{"quarter": "Q1", "vendor": "Apple", "sales": 3200000}, {"quarter": "Q1", "vendor": "Samsung", "sales": 2800000}, {"quarter": "Q1", "vendor": "Others", "sales": 2000000}, {"quarter": "Q2", "vendor": "Apple", "sales": 3500000}, {"quarter": "Q2", "vendor": "Samsung", "sales": 2900000}, {"quarter": "Q2", "vendor": "Others", "sales": 2600000}]'
marks:
  - type: barY
    configuration:
      x: quarter
      y: sales
      fill: vendor
      stack: normalize
scales:
  y:\n    tickFormat: '(d) => (d * 100).toFixed(0) + "%"'

Revenue Composition

type: area
data:
  source: |
	  [
	  {"month": "Jan", "product": "Pro", "revenue": 45000}, 
	  {"month": "Jan", "product": "Standard", "revenue": 25000}, 
	  {"month": "Feb", "product": "Pro", "revenue": 52000}, 
	  {"month": "Feb", "product": "Standard", "revenue": 30000},
	  {"month": "Mar", "product": "Pro", "revenue": 45000}, 
	  {"month": "Mar", "product": "Standard", "revenue": 25000}, 
	  {"month": "Apr", "product": "Pro", "revenue": 52000}, 
	  {"month": "Apr", "product": "Standard", "revenue": 30000}
	  ]
marks:
  - type: areaY
    configuration:
      x: month
      y: revenue
      fill: product
      stack: normalize

Performance

• Observable Plot handles normalization internally
• Works efficiently with thousands of records
• Fast recalculation when updating data

Common Use Cases

1. Market share analysis
2. Revenue by product over time
3. Budget allocation as percentages
4. Customer segments by region
5. Survey response distribution