Spin the wheel in Confluence

spin-the-wheel.html

<style type="text/css">
  text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    pointer-events: none;
  }
  #chart {
    //position:absolute;
    width: 500px;
    height: 500px;
    //padding: 100px;
    margin-left: 300px;
  }
  #question {
    position: absolute;
    width: 400px;
    height: 500px;
    top: 0px;
    left: 550px;
  }
  #question h1 {
    font-size: 50px;
    font-weight: bold;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    //position: absolute;
    padding: 0;
    //margin-left: 405px;
    margin-left: 310px;
    padding-top: 800px;
    width: inherit;
    top: 100%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: midnightblue;
  }
</style>

<div id="chart"></div>
<div id="question"><h1></h1></div>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
  var padding = { top: 20, right: 40, bottom: 0, left: 0 },
    w = 500 - padding.left - padding.right,
    h = 500 - padding.top - padding.bottom,
    r = Math.min(w, h) / 2,
    rotation = 0,
    oldrotation = 0,
    picked = 100000,
    color = d3.scale.category20(),
    randomNumber = Math.floor(Math.random() * 150) + 20,
    i;

  console.log(
    'Running Math.random() ' +
      randomNumber +
      ' times to make sure we get a "really" random number'
  );
  for (i = 0; i < randomNumber; i++) {
    Math.random();
  }

  var data = [
    { label: 'Person 1', value: 2, question: 'Person 1' },
    { label: 'Person 2', value: 2, question: 'Person 2' },
  ];

  var svg = d3
    .select('#chart')
    .append('svg')
    .data([data])
    .attr('width', w + padding.left + padding.right)
    .attr('height', h + padding.top + padding.bottom);
  var container = svg
    .append('g')
    .attr('class', 'chartholder')
    .attr(
      'transform',
      'translate(' + (w / 2 + padding.left) + ',' + (h / 2 + padding.top) + ')'
    );
  var vis = container.append('g');

  var pie = d3.layout
    .pie()
    .sort(null)
    .value(function (d) {
      return 1;
    });
  // declare an arc generator function
  var arc = d3.svg.arc().outerRadius(r);
  // select paths, use arc generator to draw
  var arcs = vis
    .selectAll('g.slice')
    .data(pie)
    .enter()
    .append('g')
    .attr('class', 'slice');

  arcs
    .append('path')
    .attr('fill', function (d, i) {
      return color(i);
    })
    .attr('d', function (d) {
      return arc(d);
    });
  // add the text
  arcs
    .append('text')
    .attr('transform', function (d) {
      d.innerRadius = 0;
      d.outerRadius = r;
      d.angle = (d.startAngle + d.endAngle) / 2;
      return (
        'rotate(' +
        ((d.angle * 180) / Math.PI - 90) +
        ')translate(' +
        (d.outerRadius - 10) +
        ')'
      );
    })
    .attr('text-anchor', 'end')
    .text(function (d, i) {
      return data[i].label;
    });
  container.on('click', spin);

  function spin(d) {
    var ps = 360 / data.length,
      pieslice = Math.round(1440 / data.length),
      rng = Math.floor(getRandomNumber() * 1440 + 360);

    rotation = Math.round(rng / ps) * ps;

    picked = Math.round(data.length - (rotation % 360) / ps);
    picked = picked >= data.length ? picked % data.length : picked;

    rotation += 90 - Math.round(ps / 2);
    vis
      .transition()
      .duration(3000)
      .attrTween('transform', rotTween)
      .each('end', function () {
        //mark question as seen
        /* d3.select(".slice:nth-child(" + (picked + 1) + ") path")
             .attr("fill", "#111");*/
        //populate question
        d3.select('#question h1').text(data[picked].label);
        oldrotation = rotation;
      });
  }
  //make arrow
  svg
    .append('g')
    .attr(
      'transform',
      'translate(' +
        (w + padding.left + padding.right) +
        ',' +
        (h / 2 + padding.top) +
        ')'
    )
    .append('path')
    .attr('d', 'M-' + r * 0.15 + ',0L0,' + r * 0.05 + 'L0,-' + r * 0.05 + 'Z')
    .style({ fill: 'black' });
  //draw spin circle
  container
    .append('circle')
    .attr('cx', 0)
    .attr('cy', 0)
    .attr('r', 10)
    .style({ fill: 'white', cursor: 'pointer' });
  //spin text
  /* container.append("text")
       .attr("x", 0)
       .attr("y", 15)
       .attr("text-anchor", "middle")
       .text("SPIN")
       .style({"font-weight":"bold", "font-size":"30px"});*/

  function rotTween(to) {
    var i = d3.interpolate(oldrotation % 360, rotation);
    return function (t) {
      return 'rotate(' + i(t) + ')';
    };
  }

  function getRandomNumber() {
    return Math.random();
  }
</script>

Add the HTML as the body of the page and update the data array with the names you want.