SOURCE

    var labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
    var originData = [3, 2, 3, 4, 5, 1, 3, 2, 1, 2]
    var rectW = .5

    var mathbox = mathBox({
      plugins: ['core', 'cursor', 'controls'],
      controls: {
        klass: THREE.OrbitControls,
      },
    });
    if (mathbox.fallback) throw "WebGL error";

    // Set renderer background
    var three = mathbox.three;
    three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);

    // Set mathbox units and place camera
    mathbox.set({
      scale: 1000,
      focus: 3
    });
    mathbox.camera({
      proxy: true,
      position: [0, 0, 3]
    });

    // Create cartesian view
    var view = mathbox.cartesian({
      range: [
        [-4, 4],
        [-4, 4]
      ],
      scale: [1, 1],
    });
    // 2D axes / grid
    view.axis({
      axis: 1,
      width: 3
    });
    view.axis({
      axis: 2,
      width: 3
    });
    view.axis({
      axis: 3,
      width: 3
    });

    view.grid({
      width: 1.5,
      divideX: 10,
      divideY: 10
    });

    view.scale({
      divide: 10,
    });

    //draw cirlcle
    view.interval({
      expr: function (emit, x, i, t) {
        emit(Math.sin(x), Math.cos(x), 0);
        emit(Math.sin(x + 0.1), Math.cos(x + 0.1), 0);
      },
      width: 64,
      items: 2,
      channels: 2,
    });
    view.line({
      color: 0x3090FF,
      width: 10,
    }).end()

    data = originData.map(e => [
      [-rectW / 2, 0],
      [-rectW / 2, e],
      [rectW / 2, e],
      [rectW / 2, 0]
    ])
    var len = data.length
    data.forEach((e, i) => {
      view.array({
          data: e,
          channels: 2,
          items: 4
        })
        .transform({
          matrix:
					 [
						Math.cos(2 * Math.PI / len * i), -Math.sin(2 * Math.PI / len * i), 0, 0,
            Math.sin(2 * Math.PI / len * i), Math.cos(2 * Math.PI / len * i), 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1
          ]
        })
        .transform({
          matrix:
						[1, 0, 0, 0,
            0, 1, 0, 1,
            0, 0, 1, 0,
            0, 0, 0, 1
          ]
        })
        .transform()
        .play({
          pace: 5,
          script: [{
              props: {
                scale: [1, 0, 1],
              }
            },
            {
              props: {
                scale: [1, .5, 1]
              }
            },
          ]
        })
        .face({
          color: 0x3090FF,
          width: 3,
        })
			  .play({
          pace: 5,
          script: [{
              props: {
                opacity:0.5
              }
            },
            {
              props: {
                opacity:1
              }
            },
          ]
        })
        .transform({
          matrix: [1, 0, 0, 0,
            0, 1, 0, originData[i] + 1,
            0, 0, 1, 0,
            0, 0, 0, 1
          ]
        })
        .text({
          data: [labels[i]],
        })
        .label({
          color: 0x3090FF,
          size: 24,
        })
        .end()
    })

<script src="http://acko.net/files/mathbox2/mathbox-bundle.min.js">
</script>