lottery-representation.js demo

Return Home

lottery-representation.js is a JavaScript library for representing lotteries in experiments. It is available on GitHub.

Alphanumeric representation

This renders only the textual description (no graphical bars).

HTML:

<div id="demo-alphanumeric"></div>

JS:

new Lottery({
  el: 'demo-alphanumeric',
  x1: 20,
  x2: 10,
  p1Percent: 20,
  representation: 'alphanumeric',
  formatFn: v => '£' + v
});

Probability representation

Widths represent probabilities, payoff text is shown above each column.

HTML:

<div id="demo-probabilities"></div>

JS:

new Lottery({
  el: 'demo-probabilities',
  x1: 20,
  x2: 10,
  p1Percent: 20,
  representation: 'probabilities',
  formatFn: v => '£' + v
});

Payoff representation

Heights represent payoffs. The largest payoff in the experiment gets the same height as the total width, and all other payoffs are scaled accordingly. The library provides a helper Lottery.computeRatios(). Below we assume there are two lotteries in the experiment to compute the ratios.

HTML:

<div id="demo-payoffs"></div>

JS:

const lotteries = [
  { x1: 20, x2: 10, p1Percent: 20 },
  { x1: 150, x2: 50, p1Percent: 50 },
  ]
const scale = Lottery.computeRatios(lotteries.map(r => ({ x1: r.x1, x2: r.x2 }))); 
const ratios = scale.ratioFor(lotteries[0].x1, lotteries[0].x2);

new Lottery({
  el: 'demo-payoffs',
  x1: 20,
  x2: 10,
  p1Percent: 20,
  representation: 'payoffs',
  x1_ratio: ratios.x1_ratio,
  x2_ratio: ratios.x2_ratio,
  formatFn: v => '£' + v
});

Joint representation

Widths and heights are shown together.

HTML:

<div id="demo-joint"></div>

JS:

// reuse `ratios` from the payoff example above
new Lottery({
  el: 'demo-joint',
  x1: 20,
  x2: 10,
  p1Percent: 20,
  representation: 'joint',
  x1_ratio: ratios.x1_ratio,
  x2_ratio: ratios.x2_ratio,
  formatFn: v => '£' + v
});