The area on pure js.

area.html

<canvas id="canvasElement"></canvas>
<script>

var canvas = document.getElementById('canvasElement'),
	context = canvas.getContext('2d'),
	radius = 300, d_qu = 0;

setInterval(function () {
	d_qu += 0.06;

	// Очистить канвас (грязный хак)
	canvas.width = canvas.height = 900;

	line({x: 0, y: 0, z: 0}, {x: 200, y: 0,   z: 0  });
	line({x: 0, y: 0, z: 0}, {x: 0,   y: 200, z: 0  });
	line({x: 0, y: 0, z: 0}, {x: 0,   y: 0,   z: 200});

	for (var fi = -Math.PI/2; fi <= Math.PI/2; fi += 0.1)
		for (var qu = 0; qu < 2 * Math.PI; qu += 0.1)
			point(
				radius * Math.cos(fi) * Math.cos(qu + d_qu),
				radius * Math.cos(fi) * Math.sin(qu + d_qu),
				radius * Math.sin(fi)
			);
}, 1);

function getPositionsByCoords (x, y, z) {
	return {
		x: canvas.width / 2 + (x - y) * 0.866,
		y: canvas.height / 2 + (x + y) * 0.5 - z
	}
}

function point (x, y, z) {
	var point = getPositionsByCoords(x, y, z);

	context.beginPath();
	context.arc(point.x, point.y, 1, 0, 2*Math.PI);
	context.stroke();
}

function line (from, to) {
	from = getPositionsByCoords(from.x, from.y, from.z);
	to = getPositionsByCoords(to.x, to.y, to.z);

	context.moveTo(from.x, from.y);
	context.lineTo(to.x, to.y);
	context.stroke();
}

</script>