Prices by Country and Transaction Type

Consumers face costs when moving money domestically. Primarily, this entails exchanging cash for e-money and vice versa (e.g. cash-in, cash-out), moving money between personal accounts (e.g. on-network transfer, off-network transfer) and paying for goods or services (e.g. merchant payments, utility payments).

The visualization shows the price of various transaction types across countries. Prices are expressed as percentages of the transaction amount. For each country, the values represent a market-share weighted average of providers; where market share data is unavailable for any provider, a simple average is used instead.

Depending on the selected option, the prices shown reflect either the cost of completing a transaction equal to a reference value, or a user-specified amount ranging from $1 to $1,000. Pre-specified reference values vary by country, while user-specified values use the same USD value across all countries. For more information on reference values, see our methodology.

---

mutable sharedCountries = []
mutable sharedMonth = null
mutable sharedTransactionAmount = 100
mutable sharedTransactionTypes = []
mutable sharedProviderTypes = []
mutable sharedTransactionTypesDepositing = []
mutable sharedTransactionTypesWithdrawing = []
mutable sharedTransactionTypesTransfers = []

html`<span>Use our reference values&nbsp;&nbsp;&nbsp;</span>
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>
<span>&nbsp;&nbsp;&nbsp;Use unique values from $1 to $1,000</span>`

// Setup DuckDB client with data sources
dfsdb = DuckDBClient.of({
  summary_table: FileAttachment("data/summary_table_preview.csv")
})

function dateToYYYYMMDD(dateValue) {
  if (dateValue instanceof Date) {
    const year = dateValue.getUTCFullYear();
    const month = String(dateValue.getUTCMonth() + 1).padStart(2, '0');
    const day = String(dateValue.getUTCDate()).padStart(2, '0');
    return parseInt(`${year}${month}${day}`);
  } else {
    return dateValue;
  }
}

// Query and process summary data
summary_data_raw = {
  yield dfsdb.query("SELECT * FROM summary_table WHERE transaction_value = 'high'");
}

// Helper function for numeric validation
isNumeric = (str) => /^[+-]?\d+(\.\d+)?$/.test(str);

// Helper function to fix provider type capitalization
fixProviderTypeCapitalization = (providerType) => {
  if (!providerType) return providerType;
  const fixes = {
    'mobile banking': 'Mobile banking',
    'mobile money': 'Mobile money',
    'other types of fsps': 'Other types of FSPs',
    'other digital financial services': 'Other types of FSPs'
  };
  return fixes[providerType.trim().toLowerCase()] || providerType;
};

// Convert "NA" strings to JavaScript NaN and ensure type safety
summary_data_processed = {
  const processed = summary_data_raw.map(row => {
    Object.keys(row).forEach(key => {
      if (row[key] === "NA")
        row[key] = NaN;
      else if (isNumeric(row[key]))
        row[key] = parseFloat(row[key]);
    });
    return row;
  });
  return processed;
}

// Add month column using plain JavaScript with hardcoded date logic
summary_data_objects = {
  yield summary_data_processed.map(d => ({
      ...d,
    month: (() => {
      if (!d.date_collection) return null;

      return d.date_collection.toString().slice(0, 4) + "-" + d.date_collection.toString().slice(4, 6);
    })()
  }));
}

// Group and calculate averages manually
prepped_data = {
  yield (() => {
  const groups = {};

  // Group by country and month, filtering by provider type
  for (const row of summary_data_objects) {
    // Skip rows that don't match selected provider types
    if (providerTypes && providerTypes.length > 0 && !providerTypes.includes(fixProviderTypeCapitalization(row.fsp_type))) continue;
    
    const key = `${row.country}|${row.month}`;
    if (!groups[key]) {
      groups[key] = {
        country: row.country,
        month: row.month,
        rows: []
      };
    }
    groups[key].rows.push(row);
  }

  // Calculate averages for each group
  const results = [];
  for (const group of Object.values(groups)) {
    const result = {
      country: group.country,
      month: group.month
    };

    // Process each fee column (using actual CSV column names)
    const columns = [
      'pct_cost_cash-in via agent',
      'pct_cost_cash-in via ATM',
      'pct_cost_p2p on-network transfer',
      'pct_cost_p2p off-network transfer',
      'pct_cost_p2p to unregistered user',
      'pct_cost_bank to wallet',
      'pct_cost_wallet to bank',
      'pct_cost_payment at merchant',
      'pct_cost_utility payment',
      'pct_cost_cash-out via agent',
      'pct_cost_cash-out via ATM'
    ];

    for (const col of columns) {
      const allValues = group.rows.map(r => r[col]).filter(v => v != null);
      const validValues = allValues.filter(v => v >= 0);

      let avgValue;
      if (validValues.length === 0) {
        avgValue = allValues.some(v => v === -55) ? -55 : null;
      } else {
        const wm = weightedMean(group.rows, r => r[col], r => r.provider_market_share);
        avgValue = wm != null ? 100 * wm : null;
      }

      // Convert column name to expected format for visualization
      const newColName = col.replace('pct_cost_', 'avg_cost_').replace(/[\s-]/g, '_');
      result[newColName] = avgValue;
    }

    results.push(result);
  }

  return results;
})();
}

import {prettyName, weightedMean} from "/assets/js/utilities.js"
import {primaryPalette as palette} from "/assets/js/colors.js"

reference_data = prepped_data.map(d => ({
  ...d,
  country: prettyName(d.country)
}))

// Function to convert YYYY-MM to YYYY-MON format
function formatMonthDisplay(yearMonth) {
  if (!yearMonth) return '';
  const [year, month] = yearMonth.split('-');
  const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  return `${year}-${monthNames[parseInt(month) - 1]}`;
}

// Extract unique month values from the data and sort in reverse chronological order
uniqueMonth = [...new Set(reference_data.map(prices => prices.month))].filter(m => m != null).sort()
uniqueMonthDisplay = uniqueMonth.map(month => ({
  value: month,
  label: formatMonthDisplay(month)
}))

// Extract category values from the data and sort in reverse chronological order
uniqueCountry = [...new Set(reference_data.map(prices => prices.country))].sort()

// Get unique provider types from the summary data with fixed capitalization
uniqueProviderTypes = [...new Set(summary_data_objects.map(d => fixProviderTypeCapitalization(d.fsp_type)))].filter(d => d != null).sort()

// Initialize shared state if empty
{
  if (sharedCountries.length === 0) {
    mutable sharedCountries = uniqueCountry;
  }
  if ((sharedMonth === null || !uniqueMonth.includes(sharedMonth)) && uniqueMonth.length > 0) {
    mutable sharedMonth = uniqueMonth[uniqueMonth.length - 1];
  }
  if (sharedProviderTypes.length === 0 && uniqueProviderTypes.length > 0) {
    mutable sharedProviderTypes = uniqueProviderTypes;
  }
  // Initialize transaction type shared states from reference data
  if (sharedTransactionTypesDepositing.length === 0 && uniqueTransactionTypesIn.length > 0) {
    mutable sharedTransactionTypesDepositing = uniqueTransactionTypesIn;
  }
  if (sharedTransactionTypesWithdrawing.length === 0 && uniqueTransactionTypesOut.length > 0) {
    mutable sharedTransactionTypesWithdrawing = uniqueTransactionTypesOut;
  }
  if (sharedTransactionTypesTransfers.length === 0 && uniqueTransactionTypesMoving.length > 0) {
    mutable sharedTransactionTypesTransfers = uniqueTransactionTypesMoving;
  }
  return html``;
}

viewof month = {
  const input = Inputs.select(
    uniqueMonth,
    { value: sharedMonth,
      label: "Month:",
      multiple: false,
      sort: false,
      unique: true,
      format: formatMonthDisplay
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedMonth = input.value;
  });
  
  return input;
}

//| panel: input
viewof country = {
  const input = Inputs.checkbox(
    uniqueCountry,
    {
      value: sharedCountries,
      label: "Countries:",
      multiple: true,
      sort: true,
      unique: true
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedCountries = input.value;
  });
  
  return input;
}

//| panel: input
viewof providerTypes = {
  const input = Inputs.checkbox(
    uniqueProviderTypes,
    {
      value: sharedProviderTypes,
      label: "Provider Types:",
      multiple: true,
      sort: true,
      unique: true
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedProviderTypes = input.value;
  });
  
  return input;
}

filtered_reference = reference_data.filter(function(prices) {
  return (month === prices.month
  &&
         country.includes(prices.country)
         );
})

all_transaction_data = reference_data.flatMap(row => [
  // Money Into System
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Cash-in via agent",
    value: row.avg_cost_cash_in_via_agent,
    group: "Depositing Money"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Cash-in via ATM",
    value: row.avg_cost_cash_in_via_ATM,
    group: "Depositing Money"
  },
  // Moving Money Around
  {
    country: prettyName(row.country),
    month: row.month,
    category: "On-net transfer",
    value: row.avg_cost_p2p_on_network_transfer,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Off-net transfer",
    value: row.avg_cost_p2p_off_network_transfer,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Transfer to unregistered user",
    value: row.avg_cost_p2p_to_unregistered_user,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Bank-to-wallet transfer",
    value: row.avg_cost_bank_to_wallet,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Wallet-to-bank transfer",
    value: row.avg_cost_wallet_to_bank,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Merchant payment",
    value: row.avg_cost_payment_at_merchant,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Utility payment",
    value: row.avg_cost_utility_payment,
    group: "Moving Money Around"
  },
  // Taking Money Out
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Cash-out via agent",
    value: row.avg_cost_cash_out_via_agent,
    group: "Taking Money Out"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Cash-out via ATM",
    value: row.avg_cost_cash_out_via_ATM,
    group: "Taking Money Out"
  }
])

// Process all transaction data first
all_transaction_data_processed = all_transaction_data.map(d => ({
  ...d,
  value: d.value === null || d.value === undefined ? 'N/A' : d.value === -55 ? -55 : Number(d.value),
  numericValue: d.value === null || d.value === undefined ? -1 : d.value === -55 ? -55 : Number(d.value)
}));

// Define unique transaction types for each group from the full dataset
uniqueTransactionTypesIn = [...new Set(all_transaction_data_processed.filter(d => d.group === "Depositing Money").map(d => d.category))].sort()
uniqueTransactionTypesOut = [...new Set(all_transaction_data_processed.filter(d => d.group === "Taking Money Out").map(d => d.category))].sort()
uniqueTransactionTypesMoving = [...new Set(all_transaction_data_processed.filter(d => d.group === "Moving Money Around").map(d => d.category))].sort()

// Now filter based on country and month selection
filtered_long = filtered_reference.flatMap(row => [
  // Money Into System
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Cash-in via agent",
    value: row.avg_cost_cash_in_via_agent,
    group: "Depositing Money"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Cash-in via ATM",
    value: row.avg_cost_cash_in_via_ATM,
    group: "Depositing Money"
  },
  // Moving Money Around
  {
    country: prettyName(row.country),
    month: row.month,
    category: "On-net transfer",
    value: row.avg_cost_p2p_on_network_transfer,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Off-net transfer",
    value: row.avg_cost_p2p_off_network_transfer,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Transfer to unregistered user",
    value: row.avg_cost_p2p_to_unregistered_user,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Bank-to-wallet transfer",
    value: row.avg_cost_bank_to_wallet,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Wallet-to-bank transfer",
    value: row.avg_cost_wallet_to_bank,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Merchant payment",
    value: row.avg_cost_payment_at_merchant,
    group: "Moving Money Around"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Utility payment",
    value: row.avg_cost_utility_payment,
    group: "Moving Money Around"
  },
  // Taking Money Out
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Cash-out via agent",
    value: row.avg_cost_cash_out_via_agent,
    group: "Taking Money Out"
  },
  {
    country: prettyName(row.country),
    month: row.month,
    category: "Cash-out via ATM",
    value: row.avg_cost_cash_out_via_ATM,
    group: "Taking Money Out"
  }
])

filtered_long2 = filtered_long.map(d => ({
  ...d,
  value: d.value === null || d.value === undefined || isNaN(d.value) ? 'N/A' : d.value === -55 ? -55 : Number(d.value),
  numericValue: d.value === null || d.value === undefined || isNaN(d.value) ? -1 : d.value === -55 ? -55 : Number(d.value)
}));

filtered_long_in = filtered_long2.filter(d => d.group === "Depositing Money" )
filtered_long_out = filtered_long2.filter(d => d.group === "Taking Money Out")
filtered_long_moving = filtered_long2.filter(d => d.group === "Moving Money Around")

Depositing Money

viewof transactionTypeIn = {
  const input = Inputs.checkbox(
    uniqueTransactionTypesIn,
    {
      label: "Transaction:",
      value: sharedTransactionTypesDepositing.filter(t => uniqueTransactionTypesIn.includes(t)),
      multiple: true,
      sort: false, 
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedTransactionTypesDepositing = input.value;
  });
  
  return input;
}

// Generate the plot for depositing money
referenceDataDepositPlot = transactionTypeIn.length > 0 ? Plot.plot({
  marks: [
    // Regular bars for values > 0
    Plot.barX(filtered_long_in.filter(d => d.value !== 'N/A' && d.value > 0 &&  transactionTypeIn.includes(d.category)), {
      x: "value",
      y: "category",
      fill: "category",
      fy: "country",
      channels: {
        Country: "country",
        "Transaction type": "category",
        "Fee (%)": "value",
      },
      tip: {
        maxRadius: 5,
        format: {
          y: false,
          x: false,
          fill: false,
          fy: false,
        }
      }
    }),
    // Bar for zero values
    Plot.barX(filtered_long_in.filter(d => d.value === 0 && transactionTypeIn.includes(d.category)), {
      x: -0.05, // Small fixed width for visibility
      y: "category",
      fy: "country",
      fill: "category",
      fillOpacity: 0.7,
      channels: {
        Country: "country",
        "Transaction type": "category",
        "Fee (%)": "value",
      },
      tip: {
        maxRadius: 5,
        format: {
          y: false,
          x: false,
          stroke: false,
          fy: false,
          fill: false
        }
      }
    }),
    // Add text label for N/A bars
    Plot.text(
      filtered_long_in.filter(d => (d.value === 'N/A' || d.value == -55) && transactionTypeIn.includes(d.category)),
      {
        x: 0,
        y: "category",
        fy: "country",
        text: d => d.value === -55 ? `${d.category} fees unavailable due to technical issues` : `${d.category} fees not listed`,
        fontSize: 12,
        fill: "category",
        fillOpacity: 0.8,
        textAnchor:"start",
        dx:5
      }
    )
  ],
  marginLeft: 80,
  x: {
    tickFormat: d => `${d}%`,
    grid: true,
    label: "Cost (% of transaction amount)",
    domain: [0, Math.max(5, d3.max(filtered_long_in.filter(d => d.value !== 'N/A' && d.value !== -55 && transactionTypeIn.includes(d.category)), d => d.value) || 0)]
  },
  y: {
    // Only include the selected transaction types in the domain
    domain: uniqueTransactionTypesIn.filter(category => transactionTypeIn.includes(category)),
    axis: null,
  },
  fy: {
    label: "",
    padding: 0.3, // Increase padding between rows of countries
  },
  color: {
    range: palette.slice(0,2),
    legend: true
  }
}) : html`<div></div>`

// Add explanatory note about missing data only when transaction types are selected
transactionTypeIn.length > 0 ? html`<div>
  ${referenceDataDepositPlot}
  <div style="font-size: 0.85em; margin-top: 10px; color: #555; max-width: 800px;">
    <p><strong>Notes:</strong></p>
    <ol>
      <li>Fees labeled "not listed" are not clearly available on provider websites. This may indicate the transaction is not offered by the provider, or the transaction is offered but lacks clear pricing on the website. In these cases, prices may be missing, ambiguous, inconsistent, or described only as "varies."</li>
      <li>Fees labeled as "unavailable due to technical issues" are available on provider websites, but IPA was unable to collect this information due to technical difficulties with our data collection process.</li>
      <li>
      Simple averages by country presented, restricted to the selected provider type(s).
      </li>
      <li>The beta version of data collection, limited to a subset of providers and countries, ran through September 2025. In October 2025, coverage expanded to include all providers and countries. Differences in reported fees between those months are therefore primarily due to this rollout, not real-world price changes.</li>
    </ol>
  </div>
  
</div>` : html`<div></div>`

Withdrawing Money

viewof transactionTypeOut = {
  const input = Inputs.checkbox(
    uniqueTransactionTypesOut,
    {
      label: "Transaction:",
      value: sharedTransactionTypesWithdrawing.filter(t => uniqueTransactionTypesOut.includes(t)),
      multiple: true,
      sort: false
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedTransactionTypesWithdrawing = input.value;
  });
  
  return input;
}

// Generate the plot for withdrawing money
referenceDataWithdrawPlot = transactionTypeOut.length > 0 ? Plot.plot({
  marks: [
    // Regular bars for values > 0
    Plot.barX(filtered_long_out.filter(d => d.value !== 'N/A' && d.value > 0 && transactionTypeOut.includes(d.category)), {
      x: "value",
      y: "category",
      fill: "category",
      fy: "country",
      channels: {
        Country: "country",
        "Transaction type": "category",
        "Fee (%)": "value",
      },
      tip: {
        maxRadius: 5,
        format: {
          y: false,
          x: false,
          fill: false,
          fy: false,
        }
      }
    }),
    // Bar for zero values
    Plot.barX(filtered_long_out.filter(d => d.value === 0 && transactionTypeOut.includes(d.category)), {
      x: -0.04, // Small fixed width for visibility
      y: "category",
      fy: "country",
      fill: "category",
      fillOpacity: 0.7,
      channels: {
        Country: "country",
        "Transaction type": "category",
        "Fee (%)": "value",
      },
      tip: {
        maxRadius: 5,
        format: {
          y: false,
          x: false,
          stroke: false,
          fy: false,
          fill: false
        }
      }
    }),
     // Add text label for N/A bars
    Plot.text(
      filtered_long_out.filter(d => (d.value === 'N/A' || d.value === -55) && transactionTypeOut.includes(d.category)),
      {
        x: 0,
        y: "category",
        fy: "country",
        text: d => d.value === -55 ? `${d.category} fees unavailable due to technical issues` : `${d.category} fees not listed`,
        fontSize: 10,
        fill: "category",
        fillOpacity: 0.8,
        textAnchor: "start",
        dx: 5
      }
    )
  ],
  marginLeft: 80,
  x: {
    tickFormat: d => `${d}%`,
    grid: true,
    label: "Cost (% of transaction amount)",
    domain: [0, Math.max(5, d3.max(filtered_long_out.filter(d => d.value !== 'N/A' && d.value !== -55 && transactionTypeOut.includes(d.category)), d => d.value) || 0)]
  },
  y: {
    // Only include the selected transaction types in the domain
    domain: uniqueTransactionTypesOut.filter(category => transactionTypeOut.includes(category)),
    axis: null,
  },
  fy: {
    label: "",
    padding: 0.3, // Increase padding between rows of countries
  },
  color: {
    range: palette.slice(2,4),
    legend: true
  }
}): html`<div></div>`

// Add explanatory note about missing data only when transaction types are selected
transactionTypeOut.length > 0 ? html`<div>
  ${referenceDataWithdrawPlot}
  <div style="font-size: 0.85em; margin-top: 10px; color: #555; max-width: 800px;">
    <p><strong>Notes:</strong></p>
    <ol>
      <li>Fees labeled "not listed" are not clearly available on provider websites. This may indicate the transaction is not offered by the provider, or the transaction is offered but lacks clear pricing on the website. In these cases, prices may be missing, ambiguous, inconsistent, or described only as "varies."</li>
      <li>Fees labeled as "unavailable due to technical issues" are available on provider websites, but IPA was unable to collect this information due to technical difficulties with our data collection process.</li>
      <li>
      Simple averages by country presented, restricted to the selected provider type(s).
      </li>
    </ol>
  </div>
</div>` : html`<div></div>`

Transfers & Payments

orderedColumns = [
  "On-net transfer",
  "Off-net transfer",
  "Transfer to unregistered user",
  "Bank-to-wallet transfer",
  "Wallet-to-bank transfer",
  "Merchant payment",
  "Utility payment",
]

// Create a consistent color mapping for all transaction types
darkTextColors = [
  "#2c3e50", // dark blue-gray
  "#8b4513", // saddle brown
  "#556b2f", // dark olive green
  "#800080", // purple
  "#b22222", // fire brick red
  "#a89232ff", // 
  "#f6692dff"  // 
];

movingTextColorMap = new Map(
  uniqueTransactionTypesMoving.map((type, i) => [type, darkTextColors[i % darkTextColors.length]])
)

// Add a dropdown select for Transfers & Payments transaction types
viewof transactionTypeMoving = {
  const input = Inputs.checkbox(
    uniqueTransactionTypesMoving,
    {
      label: "Transaction:",
      value: sharedTransactionTypesTransfers.filter(t => uniqueTransactionTypesMoving.includes(t)),
      multiple: true,
      sort: false
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedTransactionTypesTransfers = input.value;
  });
  
  return input;
}

// Generate the plot for transfers and payments
referenceDataTransfersPlot = transactionTypeMoving.length > 0 ? Plot.plot({
  marks: [
    // Regular bars for values > 0
    Plot.barX(filtered_long_moving.filter(d => d.value !== 'N/A' && d.value > 0 && transactionTypeMoving.includes(d.category)), {
      x: "value",
      y: "category",
      fill: d => movingTextColorMap.get(d.category),
      fy: "country",
      channels: {
        Country: "country",
        "Transaction type": "category",
        "Fee (%)": "value",
      },
      tip: {
        maxRadius: 5,
        format: {
          y: false,
          x: false,
          fill: false,
          fy: false,
        }
      }
    }),
    // Bar for zero values
    Plot.barX(filtered_long_moving.filter(d => d.value === 0 && transactionTypeMoving.includes(d.category)), {
      x: -0.04, // Small fixed width for visibility
      y: "category",
      fy: "country",
      fill: d => movingTextColorMap.get(d.category),
      fillOpacity: 0.7,
      channels: {
        Country: "country",
        "Transaction type": "category",
        "Fee (%)": "value",
      },
      tip: {
        maxRadius: 5,
        format: {
          y: false,
          x: false,
          stroke: false,
          fy: false,
          fill: false
        }
      }
    }),
    // Add text label for N/A bars
    Plot.text(
      filtered_long_moving.filter(d => (d.value === 'N/A' || d.value === -55) && transactionTypeMoving.includes(d.category)),
      {
        x: 0,
        y: "category",
        fy: "country",
        text: d => d.value === -55 ? `${d.category} fees unavailable due to technical issues` : `${d.category} fees not listed`,
        fontSize: 9,
        fill: d => movingTextColorMap.get(d.category),
        textAnchor: "start",
        dx: 5,
        dy: d => d.textIndex * 12
      }
    )
  ],
  marginLeft: 80,
  x: {
    tickFormat: d => `${d}%`,
    grid: true,
    label: "Cost (% of transaction amount)",
    domain: [0, Math.max(5, d3.max(filtered_long_moving.filter(d => d.value !== 'N/A' && d.value !== -55 && transactionTypeMoving.includes(d.category)), d => d.value) || 0)]
  },
  y: {
    // Only include the selected transaction types in the domain
    domain: orderedColumns.filter(category => transactionTypeMoving.includes(category)),
    axis: null,
  },
  fy: {
    label: "",
    padding: 0.3, // Increase padding between rows of countries
  },
  color: {
    // Create a legend that only shows selected transaction types with dark colors for readability
    domain: transactionTypeMoving,
    range: transactionTypeMoving.map(type => movingTextColorMap.get(type)),
    legend: true
  }
}): html`<div></div>`

// Add explanatory note about missing data only when transaction types are selected
transactionTypeMoving.length > 0 ? html`<div>
  ${referenceDataTransfersPlot}
  <div style="font-size: 0.85em; margin-top: 10px; color: #555; max-width: 800px;">
    <p><strong>Notes:</strong></p>
    <ol>
      <li>Fees labeled "not listed" are not clearly available on provider websites. This may indicate the transaction is not offered by the provider, or the transaction is offered but lacks clear pricing on the website. In these cases, prices may be missing, ambiguous, inconsistent, or described only as "varies."</li>
      <li>Fees labeled as "unavailable due to technical issues" are available on provider websites, but IPA was unable to collect this information due to technical difficulties with our data collection process.</li>
      <li>
      Simple averages by country presented, restricted to the selected provider type(s).
      </li>
    </ol>
  </div>
</div>` : html`<div></div>`

Data

Inputs.table(filtered_reference.map(d => ({...d, value: d.value || 'N/A'})), {select: false})

button(filtered_reference, 'dfs-by-transaction-type.csv')

import {conditionalSpinner} from "/assets/js/loading-spinner.js"

// from https://observablehq.com/@jeremiak/download-data-button
reference_data_button = (reference_data, filename = 'reference_data.csv') => {
  if (!reference_data) throw new Error('Array of data required as first argument');

  let downloadData;
  if (filename.includes('.csv')) {
    downloadData = new Blob([d3.csvFormat(reference_data)], { type: "text/csv" });
  } else {
    downloadData = new Blob([JSON.stringify(reference_data, null, 2)], {
      type: "application/json"
    });
  }

  const size = (downloadData.size / 1024).toFixed(0);
  const button = DOM.download(
    downloadData,
    filename,
    `Download Data (~${size} KB)`
  );
  return button;
}

exploded_dfsdb = DuckDBClient.of({
  all_prices: FileAttachment("data/all_listed_prices_preview.csv")
})

// Create the dataset for the current slider amount using DuckDB.
// Uses an analytical query instead of a recursive CTE: filters to rows where
// transactionAmount falls within each fee's valid range and evaluates the fee
// formula at that single value. Re-runs reactively when the slider changes.
exploded_data = {
  try {
    // Load the CSV into DuckDB (no-op after first run thanks to IF NOT EXISTS)
    await exploded_dfsdb.query(`
      CREATE TABLE IF NOT EXISTS raw_prices AS
      SELECT * FROM all_prices
    `);

    // Load the analytical SQL template and substitute the slider value.
    // transactionAmount is a bounded integer (1-1000) from a range input.
    const sqlTemplate = await FileAttachment("src/sql/fee_at_amount.sql").text();
    const sqlQuery = sqlTemplate.replaceAll("__AMOUNT__", transactionAmount);
    const result = await exploded_dfsdb.query(sqlQuery);
    return result;
  } catch (error) {
    throw error;
  }
}

// Track loading state - starts as false (not ready)
exploded_data_ready = {
  try {
    await exploded_data;
    
    // Hide the overlay loading spinner when data is ready
    const loadingOverlay = document.getElementById('loading-overlay');
    if (loadingOverlay) {
      loadingOverlay.style.display = 'none';
    }
    
    return true;
  } catch (error) {    
    // Hide overlay on error too
    const loadingOverlay = document.getElementById('loading-overlay');
    if (loadingOverlay) {
      loadingOverlay.style.display = 'none';
    }
    
    return false;
  }
}

// Filter and process exploded data with NA handling
transaction_data = exploded_data
  .filter(d => d.usd_transaction_amount != null)
  .map(d => ({
    ...d,
    // Convert NA strings to NaN and ensure numeric types
    usd_fee: d.usd_fee === "NA" ? NaN : (typeof d.usd_fee === 'string' ? parseFloat(d.usd_fee) : d.usd_fee),
    fee_pct_of_transaction: d.fee_pct_of_transaction === "NA" ? NaN : (typeof d.fee_pct_of_transaction === 'string' ? parseFloat(d.fee_pct_of_transaction) : d.fee_pct_of_transaction),
    country: d.country.replace(/\b\w/g, l => l.toUpperCase()), // Title case
    month: d.date_collection ?
      d.date_collection.getUTCFullYear() + "-" +
      String(d.date_collection.getUTCMonth() + 1).padStart(2, '0') :
      null,
    date_collection: dateToYYYYMMDD(d.date_collection),
  month: (() => {
    const dateNum = dateToYYYYMMDD(d.date_collection);
    if (dateNum != null) {
      const dcStr = dateNum.toString();
      if (dcStr.length >= 6) {
        const year = dcStr.substring(0, 4);
        const month = dcStr.substring(4, 6);
        return `${year}-${month}`;
      }
    }
    return null;
  })()

  }))

fees_data = transaction_data

data = exploded_data_ready ? fees_data : []
// Function to convert YYYY-MM to YYYY-MON format (duplicate for unique values section)
function formatMonthDisplayUnique(yearMonth) {
  if (!yearMonth) return '';
  const [year, month] = yearMonth.split('-');
  const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  return `${year}-${monthNames[parseInt(month) - 1]}`;
}

uniqueTransactionTypes = [...new Set(data.map(d => d.transaction_type))].sort()
uniqueCountries = [...new Set(data.map(d => d.country))].sort()
uniqueProviderTypesUnique = [...new Set(data.map(d => fixProviderTypeCapitalization(d.fsp_type)))].filter(d => d != null).sort()
uniqueAmounts = [...new Set(data.map(d => d.usd_transaction_amount))].sort((a, b) => a - b)
uniqueMonths = [...new Set(data.map(d => d.month).filter(m => m != null))].sort()
uniqueMonthsDisplay = uniqueMonths.map(month => ({
  value: month,
  label: formatMonthDisplayUnique(month)
}))

//| panel: input
viewof transactionAmount = {
  const input = Inputs.range(
    [1, 1000],
    {
      value: sharedTransactionAmount,
      step: 1,
      label: "Transaction Amount (USD):"
    }
  );
  
  const slider = input.querySelector('input[type="range"]');
  const textBox = input.querySelector('input[type="number"]');
  
  // Set initial value in text box
  if (textBox) textBox.value = slider.value;
  
  // Update text box in real-time but only update state on change
  slider.addEventListener('input', () => {
    if (textBox) textBox.value = slider.value;
  });
  
  // Only update shared state when user finishes dragging
  slider.addEventListener('change', () => {
    mutable sharedTransactionAmount = parseInt(slider.value);
  });
  
  if (textBox) {
    textBox.addEventListener('input', () => {
      slider.value = textBox.value;
      mutable sharedTransactionAmount = parseInt(textBox.value);
    });
  }
  
  return input;
}

//| panel: input
viewof selectedMonth = {
  const input = Inputs.select(
    uniqueMonths,
    {
      value: uniqueMonths.includes(sharedMonth) ? sharedMonth : uniqueMonths[uniqueMonths.length - 1],
      label: "Month:",
      multiple: false,
      sort: false,
      unique: true,
      format: formatMonthDisplayUnique
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedMonth = input.value;
  });
  
  return input;
}

//| panel: input
viewof selectedCountries = {
  const input = Inputs.checkbox(
    uniqueCountries,
    {
      value: sharedCountries.filter(c => uniqueCountries.includes(c)),
      label: "Countries:",
      multiple: true,
      sort: true,
      unique: true
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedCountries = input.value;
  });
  
  return input;
}

//| panel: input
viewof selectedProviderTypes = {
  const input = Inputs.checkbox(
    uniqueProviderTypesUnique,
    {
      value: sharedProviderTypes.filter(pt => uniqueProviderTypesUnique.includes(pt)),
      label: "Provider Types:",
      multiple: true,
      sort: true,
      unique: true
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedProviderTypes = input.value;
  });
  
  return input;
}

filtered = data.filter(function(d) {
  return (d.usd_transaction_amount === transactionAmount &&
          String(d.month) === sharedMonth &&
          sharedCountries.includes(d.country) &&
          sharedProviderTypes && sharedProviderTypes.length > 0 && 
          sharedProviderTypes.includes(fixProviderTypeCapitalization(d.fsp_type)));
})
// Define all possible transaction types (matching reference data approach)
allTransactionTypes = [
  "Cash-in via agent",
  "Cash-in via ATM", 
  "On-net transfer",
  "Off-net transfer",
  "Transfer to unregistered user",
  "Bank-to-wallet transfer",
  "Wallet-to-bank transfer",
  "Merchant payment",
  "Utility payment",
  "Cash-out via agent",
  "Cash-out via ATM"
];

// Group filtered data by country first
groupedByCountry = d3.rollup(filtered, v => v, d => d.country);

// Process each country to include all transaction types
groupedData = {
  const result = new Map();
  
  // Process ALL selected countries (not just those with data)
  for (const country of sharedCountries) {
    const countryData = groupedByCountry.get(country) || [];
    const countryMap = new Map();
    
    // Process each transaction type (whether it exists or not)
    for (const transactionType of allTransactionTypes) {
      const transactionData = countryData.filter(d => d.transaction_type === transactionType);
      
      if (transactionData.length === 0) {
        // No data for this transaction type in this country
        countryMap.set(transactionType, 'N/A');
      } else {
        // Process the data for this transaction type.
        // Use market-share weighted average; falls back to simple mean if any provider has missing share.
        const wAvg = weightedMean(
          transactionData,
          d => d.fee_pct_of_transaction,
          d => d.provider_market_share
        );

        if (wAvg !== null) {
          countryMap.set(transactionType, wAvg);
        } else {
          // wAvg is null only when no rows have valid fee values
          if (transactionData.some(d => d.fee_technical_issue)) {
            countryMap.set(transactionType, 'TECH_ISSUE');
          } else {
            countryMap.set(transactionType, 'N/A');
          }
        }
      }
    }
    
    result.set(country, countryMap);
  }
  
  return result;
}

plotData = Array.from(groupedData, ([country, transactionTypes]) =>
  Array.from(transactionTypes, ([transactionType, avgFeePercent]) => ({
    country: country,
    transaction_type: transactionType,
    fee_percent: avgFeePercent,
    numericValue: avgFeePercent === 'N/A' || avgFeePercent === 'TECH_ISSUE' ? -1 : avgFeePercent
  }))
).flat()

// Group transaction types based on actual data values
depositingTypes = ["Cash-in via ATM", "Cash-in via agent"]
withdrawingTypes = ["Cash-out via ATM", "Cash-out via agent"] 
transferTypes = ["Bank-to-wallet transfer", "Merchant payment", "Off-net transfer", "On-net transfer", "Transfer to unregistered user", "Utility payment", "Wallet-to-bank transfer"]

plotData_depositing = plotData.filter(d => depositingTypes.includes(d.transaction_type))
plotData_withdrawing = plotData.filter(d => withdrawingTypes.includes(d.transaction_type))
plotData_transfers = plotData.filter(d => transferTypes.includes(d.transaction_type))

// Initialize shared transaction type states if empty - but don't reset existing selections
{
  const availableDepositingTypes = depositingTypes.filter(type => plotData_depositing.some(d => d.transaction_type === type));
  const availableWithdrawingTypes = withdrawingTypes.filter(type => plotData_withdrawing.some(d => d.transaction_type === type));
  const availableTransferTypes = transferTypes.filter(type => plotData_transfers.some(d => d.transaction_type === type));
  
  // Only initialize if completely empty, don't overwrite existing selections
  if (sharedTransactionTypesDepositing.length === 0 && availableDepositingTypes.length > 0) {
    mutable sharedTransactionTypesDepositing = availableDepositingTypes;
  }
  if (sharedTransactionTypesWithdrawing.length === 0 && availableWithdrawingTypes.length > 0) {
    mutable sharedTransactionTypesWithdrawing = availableWithdrawingTypes;
  }
  if (sharedTransactionTypesTransfers.length === 0 && availableTransferTypes.length > 0) {
    mutable sharedTransactionTypesTransfers = availableTransferTypes;
  }
  
  // Filter out any selected types that are no longer available in the current data
  // This prevents errors but preserves user selections when possible
  if (sharedTransactionTypesDepositing.some(t => !availableDepositingTypes.includes(t))) {
    const validSelections = sharedTransactionTypesDepositing.filter(t => availableDepositingTypes.includes(t));
    if (validSelections.length > 0) {
      mutable sharedTransactionTypesDepositing = validSelections;
    } else if (availableDepositingTypes.length > 0) {
      mutable sharedTransactionTypesDepositing = availableDepositingTypes;
    }
  }
  
  if (sharedTransactionTypesWithdrawing.some(t => !availableWithdrawingTypes.includes(t))) {
    const validSelections = sharedTransactionTypesWithdrawing.filter(t => availableWithdrawingTypes.includes(t));
    if (validSelections.length > 0) {
      mutable sharedTransactionTypesWithdrawing = validSelections;
    } else if (availableWithdrawingTypes.length > 0) {
      mutable sharedTransactionTypesWithdrawing = availableWithdrawingTypes;
    }
  }
  
  if (sharedTransactionTypesTransfers.some(t => !availableTransferTypes.includes(t))) {
    const validSelections = sharedTransactionTypesTransfers.filter(t => availableTransferTypes.includes(t));
    if (validSelections.length > 0) {
      mutable sharedTransactionTypesTransfers = validSelections;
    } else if (availableTransferTypes.length > 0) {
      mutable sharedTransactionTypesTransfers = availableTransferTypes;
    }
  }
  
  return html``;
}

Depositing Money

html`<div id="loading-overlay" class="loading-overlay" style="z-index: 5;">
  <div class="spinner"></div>
  <div class="loading-text">Processing Pricing Data</div>
  <div class="loading-subtext">Generating interactive fee calculations for all transaction amounts from $1 to $1,000.<br/>This intensive process may take a moment and temporarily freeze the page.</div>
</div>`

viewof transactionTypeDepositing = {
  const availableTypes = depositingTypes.filter(type => plotData_depositing.some(d => d.transaction_type === type));
  const input = Inputs.checkbox(
    availableTypes,
    {
      label: "Transaction:",
      value: sharedTransactionTypesDepositing.filter(t => availableTypes.includes(t)),
      multiple: true,
      sort: false
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedTransactionTypesDepositing = input.value;
  });
  
  return input;
}

depositPlot = transactionTypeDepositing.length > 0 && plotData_depositing.filter(d => transactionTypeDepositing.includes(d.transaction_type)).length > 0 ? 
  Plot.plot({
    marks: [
      Plot.barX(plotData_depositing.filter(d => transactionTypeDepositing.includes(d.transaction_type) && d.fee_percent !== 'N/A' && d.fee_percent > 0), {
        x: "fee_percent",
        y: "transaction_type",
        fill: "transaction_type",
        fy: "country",
        channels: {
          Country: "country",
          "Transaction type": "transaction_type",
          "Fee (%)": d => d.fee_percent.toFixed(1),
        },
        tip: {
          maxRadius: 5,
          format: {
            y: false,
            x: false,
            fill: false,
            fy: false,
          }
        }
      }),
      Plot.barX(plotData_depositing.filter(d => transactionTypeDepositing.includes(d.transaction_type) && d.fee_percent === 0), {
        x: 0.05,
        y: "transaction_type",
        fy: "country",
        fill: "transaction_type",
        fillOpacity: 0.7,
        channels: {
          Country: "country",
          "Transaction type": "transaction_type",
          "Fee (%)": d => d.fee_percent.toFixed(1),
        },
        tip: {
          maxRadius: 5,
          format: {
            y: false,
            x: false,
            stroke: false,
            fy: false,
            fill: false
          }
        }
      }),
      // Add text label for N/A values
      Plot.text(
        plotData_depositing.filter(d => transactionTypeDepositing.includes(d.transaction_type) && (d.fee_percent === 'N/A' || d.fee_percent === 'TECH_ISSUE')),
        {
          x: 0,
          y: "transaction_type",
          fy: "country",
          text: d => d.fee_percent === 'TECH_ISSUE' ? `${d.transaction_type} fees unavailable due to technical issues` : `${d.transaction_type} fees not listed`,
          fontSize: 12,
          fill: "transaction_type",
          fillOpacity: 0.8,
          textAnchor: "start",
          dx: 5
        }
      )
    ],
    marginLeft: 120,
    x: {
      tickFormat: d => `${d}%`,
      grid: true,
      label: "Fee (% of transaction amount)",
      domain: [0, Math.max(5, d3.max(plotData_depositing.filter(d => transactionTypeDepositing.includes(d.transaction_type) && d.fee_percent !== 'N/A'), d => d.fee_percent) || 0)]
    },
    y: {
      domain: transactionTypeDepositing,
      axis: null,
    },
    fy: {
      label: "",
      padding: 0.3,
    },
    color: {
      range: palette.slice(0, 2),
      legend: true
    }
  }) : 
  html`<div style="padding: 20px; text-align: center; color: #666;">
    No data available for the selected transaction amount and filters.
  </div>`

// Add explanatory note about missing data only when transaction types are selected
transactionTypeDepositing.length > 0 ? html`<div>
  ${depositPlot}
  <div style="font-size: 0.85em; margin-top: 10px; color: #555; max-width: 800px;">
    <p><strong>Notes:</strong></p>
    <ol>
      <li>Fees labeled "not listed" are not clearly available on provider websites. This may indicate the transaction is not offered by the provider, or the transaction is offered but lacks clear pricing on the website. In these cases, prices may be missing, ambiguous, inconsistent, or described only as "varies."</li>
      <li>Fees labeled as "unavailable due to technical issues" are available on provider websites, but IPA was unable to collect this information due to technical difficulties with our data collection process.</li>
      <li>
      Simple averages by country presented, restricted to the selected provider type(s).
      </li>
    </ol>
  </div>
</div>` : html`<div></div>`

Withdrawing Money

viewof transactionTypeWithdrawing = {
  const availableTypes = withdrawingTypes.filter(type => plotData_withdrawing.some(d => d.transaction_type === type));
  const input = Inputs.checkbox(
    availableTypes,
    {
      label: "Transaction:",
      value: sharedTransactionTypesWithdrawing.filter(t => availableTypes.includes(t)),
      multiple: true,
      sort: false
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedTransactionTypesWithdrawing = input.value;
  });
  
  return input;
}

withdrawPlot = transactionTypeWithdrawing.length > 0 && plotData_withdrawing.filter(d => transactionTypeWithdrawing.includes(d.transaction_type)).length > 0 ?
  Plot.plot({
    marks: [
      Plot.barX(plotData_withdrawing.filter(d => transactionTypeWithdrawing.includes(d.transaction_type) && d.fee_percent !== 'N/A' && d.fee_percent > 0), {
        x: "fee_percent",
        y: "transaction_type",
        fill: "transaction_type",
        fy: "country",
        channels: {
          Country: "country",
          "Transaction type": "transaction_type",
          "Fee (%)": d => d.fee_percent.toFixed(1),
        },
        tip: {
          maxRadius: 5,
          format: {
            y: false,
            x: false,
            fill: false,
            fy: false,
          }
        }
      }),
      Plot.barX(plotData_withdrawing.filter(d => transactionTypeWithdrawing.includes(d.transaction_type) && d.fee_percent === 0), {
        x: 0.05,
        y: "transaction_type",
        fy: "country",
        fill: "transaction_type",
        fillOpacity: 0.7,
        channels: {
          Country: "country",
          "Transaction type": "transaction_type",
          "Fee (%)": d => d.fee_percent.toFixed(1),
        },
        tip: {
          maxRadius: 5,
          format: {
            y: false,
            x: false,
            stroke: false,
            fy: false,
            fill: false
          }
        }
      }),
      // Add text label for N/A values
      Plot.text(
        plotData_withdrawing.filter(d => transactionTypeWithdrawing.includes(d.transaction_type) && (d.fee_percent === 'N/A' || d.fee_percent === 'TECH_ISSUE')),
        {
          x: 0,
          y: "transaction_type",
          fy: "country",
          text: d => d.fee_percent === 'TECH_ISSUE' ? `${d.transaction_type} fees unavailable due to technical issues` : `${d.transaction_type} fees not listed`,
          fontSize: 12,
          fill: "transaction_type",
          fillOpacity: 0.8,
          textAnchor: "start",
          dx: 5
        }
      )
    ],
    marginLeft: 120,
    x: {
      tickFormat: d => `${d}%`,
      grid: true,
      label: "Fee (% of transaction amount)",
      domain: [0, Math.max(8, d3.max(plotData_withdrawing.filter(d => transactionTypeWithdrawing.includes(d.transaction_type) && d.fee_percent !== 'N/A'), d => d.fee_percent) || 0)]
    },
    y: {
      domain: transactionTypeWithdrawing,
      axis: null,
    },
    fy: {
      label: "",
      padding: 0.3,
    },
    color: {
      range: palette.slice(2, 4),
      legend: true
    }
  }) :
  html`<div style="padding: 20px; text-align: center; color: #666;">
    No data available for the selected transaction amount and filters.
  </div>`

// Add explanatory note about missing data only when transaction types are selected
transactionTypeWithdrawing.length > 0 ? html`<div>
  ${withdrawPlot}
  <div style="font-size: 0.85em; margin-top: 10px; color: #555; max-width: 800px;">
    <p><strong>Notes:</strong></p>
    <ol>
      <li>Fees labeled "not listed" are not clearly available on provider websites. This may indicate the transaction is not offered by the provider, or the transaction is offered but lacks clear pricing on the website. In these cases, prices may be missing, ambiguous, inconsistent, or described only as "varies."</li>
      <li>Fees labeled as "unavailable due to technical issues" are available on provider websites, but IPA was unable to collect this information due to technical difficulties with our data collection process.</li>
      <li>
      Simple averages by country presented, restricted to the selected provider type(s).
      </li>
    </ol>
  </div>
</div>` : html`<div></div>`

Transfers & Payments

availableTransferTypes = transferTypes.filter(type => plotData_transfers.some(d => d.transaction_type === type))

viewof transactionTypeTransfers = {
  const input = Inputs.checkbox(
    availableTransferTypes,
    {
      label: "Transaction:",
      value: sharedTransactionTypesTransfers.filter(t => availableTransferTypes.includes(t)),
      multiple: true,
      sort: false
    }
  );
  
  input.addEventListener('input', () => {
    mutable sharedTransactionTypesTransfers = input.value;
  });
  
  return input;
}

transfersPlot = transactionTypeTransfers.length > 0 && plotData_transfers.filter(d => transactionTypeTransfers.includes(d.transaction_type)).length > 0 ?
  Plot.plot({
    marks: [
      Plot.barX(plotData_transfers.filter(d => transactionTypeTransfers.includes(d.transaction_type) && d.fee_percent !== 'N/A' && d.fee_percent > 0), {
        x: "fee_percent",
        y: "transaction_type",
        fill: "transaction_type",
        fy: "country",
        channels: {
          Country: "country",
          "Transaction type": "transaction_type",
          "Fee (%)": d => d.fee_percent.toFixed(1),
        },
        tip: {
          maxRadius: 5,
          format: {
            y: false,
            x: false,
            fill: false,
            fy: false,
          }
        }
      }),
      Plot.barX(plotData_transfers.filter(d => transactionTypeTransfers.includes(d.transaction_type) && d.fee_percent === 0), {
        x: 0.05,
        y: "transaction_type",
        fy: "country",
        fill: "transaction_type",
        fillOpacity: 0.7,
        channels: {
          Country: "country",
          "Transaction type": "transaction_type",
          "Fee (%)": d => d.fee_percent.toFixed(1),
        },
        tip: {
          maxRadius: 5,
          format: {
            y: false,
            x: false,
            stroke: false,
            fy: false,
            fill: false
          }
        }
      }),
      // Add text label for N/A values
      Plot.text(
        plotData_transfers.filter(d => transactionTypeTransfers.includes(d.transaction_type) && (d.fee_percent === 'N/A' || d.fee_percent === 'TECH_ISSUE')),
        {
          x: 0,
          y: "transaction_type",
          fy: "country",
          text: d => d.fee_percent === 'TECH_ISSUE' ? `${d.transaction_type} fees unavailable due to technical issues` : `${d.transaction_type} fees not listed`,
          fontSize: 10,
          fill: "transaction_type",
          fillOpacity: 0.8,
          textAnchor: "start",
          dx: 5
        }
      )
    ],
    marginLeft: 120,
    x: {
      tickFormat: d => `${d}%`,
      grid: true,
      label: "Fee (% of transaction amount)",
      domain: [0, Math.max(8, d3.max(plotData_transfers.filter(d => transactionTypeTransfers.includes(d.transaction_type) && d.fee_percent !== 'N/A'), d => d.fee_percent) || 0)]
    },
    y: {
      domain: transactionTypeTransfers,
      axis: null,
    },
    fy: {
      label: "",
      padding: 0.3,
    },
    color: {
      range: palette.slice(4, 4 + availableTransferTypes.length),
      legend: true
    }
  }) :
  html`<div style="padding: 20px; text-align: center; color: #666;">
    No data available for the selected transaction amount and filters.
  </div>`

// Add explanatory note about missing data only when transaction types are selected
transactionTypeTransfers.length > 0 ? html`<div>
  ${transfersPlot}
  <div style="font-size: 0.85em; margin-top: 10px; color: #555; max-width: 800px;">
    <p><strong>Notes:</strong></p>
    <ol>
      <li>Fees labeled "not listed" are not clearly available on provider websites. This may indicate the transaction is not offered by the provider, or the transaction is offered but lacks clear pricing on the website. In these cases, prices may be missing, ambiguous, inconsistent, or described only as "varies."</li>
      <li>Fees labeled as "unavailable due to technical issues" are available on provider websites, but IPA was unable to collect this information due to technical difficulties with our data collection process.</li>
      <li>
      Simple averages by country presented, restricted to the selected provider type(s).
      </li>
      <li>
      The beta version of data collection, limited to a subset of providers and countries, ran through September 2025. In October 2025, coverage expanded to include all providers and countries. Differences in reported fees between those months are therefore primarily due to this rollout, not real-world price changes.
      </li>
    </ol>
  </div>
</div>` : html`<div></div>`

Data

Inputs.table(
  plotData.map(d => ({
    Country: d.country,
    "Transaction Type": d.transaction_type,
    "Fee (%)": d.fee_percent === 'N/A' || d.fee_percent === 'TECH_ISSUE' ? (d.fee_percent === 'TECH_ISSUE' ? 'Technical Issue' : 'N/A') : d.fee_percent.toFixed(1),
    "Transaction Amount (USD)": transactionAmount,
    "Month": sharedMonth
  })), 
  {select: false}
)

button(plotData.map(d => ({
  country: d.country,
  transaction_type: d.transaction_type,
  fee_percent: d.fee_percent,
  transaction_amount_usd: transactionAmount,
  month: sharedMonth
})), 'fee-percentages-by-amount.csv')

button = (data, filename = 'data.csv') => {
  if (!data) throw new Error('Array of data required as first argument');

  let downloadData;
  if (filename.includes('.csv')) {
    downloadData = new Blob([d3.csvFormat(data)], { type: "text/csv" });
  } else {
    downloadData = new Blob([JSON.stringify(data, null, 2)], {
      type: "application/json"
    });
  }

  const size = (downloadData.size / 1024).toFixed(0);
  const button = DOM.download(
    downloadData,
    filename,
    `Download Data (~${size} KB)`
  );
  return button;
}

// Wait for DOM to load
{
  setTimeout(() => {
    // Select the first toggle checkbox in the custom switch
    const checkbox = document.querySelector('label.switch input[type="checkbox"]');
    if (!checkbox) return;
    function toggleDisplay() {
      const referenceDataElems = document.querySelectorAll('.reference-data');
      const uniqueValuesElems = document.querySelectorAll('.unique-values');
      if (checkbox.checked) {
        referenceDataElems.forEach(el => el.style.display = 'none');
        uniqueValuesElems.forEach(el => el.style.display = '');
      } else {
        referenceDataElems.forEach(el => el.style.display = '');
        uniqueValuesElems.forEach(el => el.style.display = 'none');
      }
    }
    // Initial state
    toggleDisplay();
    // Listen for changes
    checkbox.addEventListener('change', toggleDisplay);
  }, 0);
  
  return html``;
}