SOURCE

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,
});

var data = [1,2,3,4,5,6,7,8,9,10]
var rectW = 1
data = data.map(e=>[[-rectW/2,0],[-rectW/2,e],[rectW/2,e],[rectW/2,0]])
console.log(data)
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]
  })
.face({
    color: 0x3090FF,
    width: 3,
  })
.end()


})

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