kirjavascript/index.html

## index.html
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>kCube</title>
        <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
        <style>
            x3d {
                position:absolute;
                left:50%;
                top:50%;
                transform: translate(-50%,-50%);
                border: 0;
            }
        </style>
    </head>
    <body></body>
    <script>
    var colour = "#FFF #0A0 #b11 yellow #02e #FA0 #D00".split(" ");
    var size = "0.9,0.1,0.9 0.1,0.9,0.9 0.9,0.9,0.1".split(" ");

    var facelets = [];

    var matricies = [
        [[0,0,0],[0,0,1],[0,0,2],[1,0,0],[1,0,1],[1,0,2],[2,0,0],[2,0,1],[2,0,2]],
        [[0,0,0],[0,0,1],[0,0,2],[0,1,0],[0,1,1],[0,1,2],[0,-1,0],[0,-1,1],[0,-1,2]],
        [[0,0,0],[0,-1,0],[0,-2,0],[-1,0,0],[-1,-1,0],[-1,-2,0],[-2,0,0],[-2,-1,0],[-2,-2,0]],
    ];

    function face(x,y,z,c,m) {
        matricies[m].forEach(function(e,i) {
            facelets.push({
                t:`${x+e[0]} ${y+e[1]} ${z+e[2]}`,
                c:colour[c],
                s:size[m]
            })
        });
    }

    face(-1,1.5,-1,0,0);
    face(-1,-1.5,-1,3,0);
    face(-1.5,0,-1,1,1);
    face(1.5,0,-1,4,1);
    face(1,1,-1.5,5,2);
    face(1,1,1.5,6,2);

    var x3d = d3.select("body")
        .append("x3d")
        .attr("showStat", "true")
        .attr("width", window.innerWidth)
        .attr("height", window.innerHeight)

    var scene = x3d.append("scene");

    var cubies = scene
        .selectAll('.cubie')
        .data(facelets)

    var cubieEnter = cubies
        .enter()
        .append("transform")
        .classed("cubie", true)
        .attr('translation',d=>d.t)
        .append("shape")

    cubieEnter
        .append("appearance")
        .append("material")
        .attr("diffuseColor",d=>d.c)

    cubieEnter
        .append("box")
        .attr('size',d=>d.s)

   </script>
</html>
	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>kCube</title>
	<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
	<style>
	x3d {
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	border: 0;
	}
	</style>
	</head>
	<body></body>
	<script>
	var colour = "#FFF #0A0 #b11 yellow #02e #FA0 #D00".split(" ");
	var size = "0.9,0.1,0.9 0.1,0.9,0.9 0.9,0.9,0.1".split(" ");

	var facelets = [];

	var matricies = [
	[[0,0,0],[0,0,1],[0,0,2],[1,0,0],[1,0,1],[1,0,2],[2,0,0],[2,0,1],[2,0,2]],
	[[0,0,0],[0,0,1],[0,0,2],[0,1,0],[0,1,1],[0,1,2],[0,-1,0],[0,-1,1],[0,-1,2]],
	[[0,0,0],[0,-1,0],[0,-2,0],[-1,0,0],[-1,-1,0],[-1,-2,0],[-2,0,0],[-2,-1,0],[-2,-2,0]],
	];

	function face(x,y,z,c,m) {
	matricies[m].forEach(function(e,i) {
	facelets.push({
	t:`${x+e[0]} ${y+e[1]} ${z+e[2]}`,
	c:colour[c],
	s:size[m]
	})
	});
	}

	face(-1,1.5,-1,0,0);
	face(-1,-1.5,-1,3,0);
	face(-1.5,0,-1,1,1);
	face(1.5,0,-1,4,1);
	face(1,1,-1.5,5,2);
	face(1,1,1.5,6,2);

	var x3d = d3.select("body")
	.append("x3d")
	.attr("showStat", "true")
	.attr("width", window.innerWidth)
	.attr("height", window.innerHeight)

	var scene = x3d.append("scene");

	var cubies = scene
	.selectAll('.cubie')
	.data(facelets)

	var cubieEnter = cubies
	.enter()
	.append("transform")
	.classed("cubie", true)
	.attr('translation',d=>d.t)
	.append("shape")

	cubieEnter
	.append("appearance")
	.append("material")
	.attr("diffuseColor",d=>d.c)

	cubieEnter
	.append("box")
	.attr('size',d=>d.s)

	</script>
	</html>