saifuddin778/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A Coxeter Plane in the form of layered squares. Each layer is "fully connected" with the preceding layer.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
    text-align: center;
}

.liner {
    stroke: rgba(34, 49, 63, .5);
    stroke-width: 0.3;
    opacity: 0;
}

.pointer {
    fill: crimson;
    stroke: black;
    stroke-width: 0.5;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>

<body>
    <script>
    var width = 500;
    var height = 500;
    var origin_x = width / 2;
    var origin_y = height / 2;
    var point_size = 3;
    var spacing = 19;

    var points = [
        [origin_x, origin_y]
    ];

    var last_points = points;
    var increment = 0;
    var space = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g");

    function interconnect(points, last_points, space) {
        var id = Math.random().toString(36).replace(/[^a-z]+/g, "").substr(0, 5);
        var inter_space = space.append("g").attr("id", id);
        if (points.length > last_points.length) {
            for (var j = 0; j < points.length; j++) {
                for (var k = 0; k < last_points.length; k++) {
                    inter_space.append("line")
                        .attr("class", "liner")
                        .attr("id", id)
                        .attr("x1", points[j][0])
                        .attr("y1", points[j][1])
                        .attr("x2", last_points[k][0])
                        .attr("y2", last_points[k][1]);
                }
            }
        }

        var selector = "#" + id;
        inter_space.selectAll(selector).each(function() {
            d3.select(this).transition().duration(500).style("opacity", 1);
        });
    }

    function step_range(min, max, steps) {
        var res = [min];
        var delta = max - min;
        var inc = delta / (steps - 1);
        var g = min;
        for (var i = 0; i < steps; i++) {
            g += inc;
            res.push(g);
        }
        return res;
    }

    function mid_range(min, max, steps) {
        var res = [];
        var delta = max - min;
        var inc = delta / (steps - 1);
        var g = min;
        for (var i = 0; i < steps; i++) {
            if (i != 0 && i != steps - 1) {
                res.push(g);
            }
            g += inc;
        }
        return res;
    }

    function move_to_front() {
        d3.selectAll("circle").each(function() {
            this.parentNode.appendChild(this);
        });
    };

    function draw_points(index, space, spacing) {
        if (index === 1) {
            last_inc = 1;
            var points = [
                [origin_x, origin_y]
            ];
            space.append("circle")
                .attr("r", point_size * 1.5)
                .attr("cx", origin_x)
                .attr("cy", origin_y)
                .style("fill", "orange")
                .style("stroke", "black");
        } else {
            var points = [];
            var ht = origin_y - ((index - 1) * spacing);
            var hb = origin_y + ((index - 1) * spacing);
            var left_indent = origin_x - ((index - 1) * spacing);
            var right_indent = origin_x + ((index - 1) * spacing);

            var xs = step_range(left_indent, right_indent, index);
            var ys = mid_range(ht, hb, index);

            d3.range(index).map(function(d) {
                //tops
                space.append("circle")
                    .attr("class", "pointer")
                    .attr("r", point_size)
                    .attr("cx", xs[d])
                    .attr("cy", ht);

                points.push([xs[d], ht]);

                //bottoms
                space.append("circle")
                    .attr("class", "pointer")
                    .attr("r", point_size)
                    .attr("cx", xs[d])
                    .attr("cy", hb);

                points.push([xs[d], hb]);
            });

            d3.range(ys.length).map(function(d) {
                //lefts
                space.append("circle")
                    .attr("class", "pointer")
                    .attr("r", point_size)
                    .attr("cx", left_indent)
                    .attr("cy", ys[d]);

                points.push([left_indent, ys[d]]);

                //rights
                space.append("circle")
                    .attr("class", "pointer")
                    .attr("r", point_size)
                    .attr("cx", right_indent)
                    .attr("cy", ys[d]);

                points.push([right_indent, ys[d]]);
            });
        }
        return points;
    }

    function running() {
        if (!(increment % 2 === 0)) {
            last_points = points;
            points = draw_points(increment, space, spacing);
            interconnect(points, last_points, space);
        }
        increment += 1;
        move_to_front();
        if (increment > 14) {
            clearInterval(runner);
        }
    }

    var runner = setInterval(running, 500);
    </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	text-align: center;
	}

	.liner {
	stroke: rgba(34, 49, 63, .5);
	stroke-width: 0.3;
	opacity: 0;
	}

	.pointer {
	fill: crimson;
	stroke: black;
	stroke-width: 0.5;
	}
	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<body>
	<script>
	var width = 500;
	var height = 500;
	var origin_x = width / 2;
	var origin_y = height / 2;
	var point_size = 3;
	var spacing = 19;

	var points = [
	[origin_x, origin_y]
	];

	var last_points = points;
	var increment = 0;
	var space = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g");

	function interconnect(points, last_points, space) {
	var id = Math.random().toString(36).replace(/[^a-z]+/g, "").substr(0, 5);
	var inter_space = space.append("g").attr("id", id);
	if (points.length > last_points.length) {
	for (var j = 0; j < points.length; j++) {
	for (var k = 0; k < last_points.length; k++) {
	inter_space.append("line")
	.attr("class", "liner")
	.attr("id", id)
	.attr("x1", points[j][0])
	.attr("y1", points[j][1])
	.attr("x2", last_points[k][0])
	.attr("y2", last_points[k][1]);
	}
	}
	}

	var selector = "#" + id;
	inter_space.selectAll(selector).each(function() {
	d3.select(this).transition().duration(500).style("opacity", 1);
	});
	}

	function step_range(min, max, steps) {
	var res = [min];
	var delta = max - min;
	var inc = delta / (steps - 1);
	var g = min;
	for (var i = 0; i < steps; i++) {
	g += inc;
	res.push(g);
	}
	return res;
	}

	function mid_range(min, max, steps) {
	var res = [];
	var delta = max - min;
	var inc = delta / (steps - 1);
	var g = min;
	for (var i = 0; i < steps; i++) {
	if (i != 0 && i != steps - 1) {
	res.push(g);
	}
	g += inc;
	}
	return res;
	}

	function move_to_front() {
	d3.selectAll("circle").each(function() {
	this.parentNode.appendChild(this);
	});
	};

	function draw_points(index, space, spacing) {
	if (index === 1) {
	last_inc = 1;
	var points = [
	[origin_x, origin_y]
	];
	space.append("circle")
	.attr("r", point_size * 1.5)
	.attr("cx", origin_x)
	.attr("cy", origin_y)
	.style("fill", "orange")
	.style("stroke", "black");
	} else {
	var points = [];
	var ht = origin_y - ((index - 1) * spacing);
	var hb = origin_y + ((index - 1) * spacing);
	var left_indent = origin_x - ((index - 1) * spacing);
	var right_indent = origin_x + ((index - 1) * spacing);

	var xs = step_range(left_indent, right_indent, index);
	var ys = mid_range(ht, hb, index);

	d3.range(index).map(function(d) {
	//tops
	space.append("circle")
	.attr("class", "pointer")
	.attr("r", point_size)
	.attr("cx", xs[d])
	.attr("cy", ht);

	points.push([xs[d], ht]);

	//bottoms
	space.append("circle")
	.attr("class", "pointer")
	.attr("r", point_size)
	.attr("cx", xs[d])
	.attr("cy", hb);

	points.push([xs[d], hb]);
	});

	d3.range(ys.length).map(function(d) {
	//lefts
	space.append("circle")
	.attr("class", "pointer")
	.attr("r", point_size)
	.attr("cx", left_indent)
	.attr("cy", ys[d]);

	points.push([left_indent, ys[d]]);

	//rights
	space.append("circle")
	.attr("class", "pointer")
	.attr("r", point_size)
	.attr("cx", right_indent)
	.attr("cy", ys[d]);

	points.push([right_indent, ys[d]]);
	});
	}
	return points;
	}

	function running() {
	if (!(increment % 2 === 0)) {
	last_points = points;
	points = draw_points(increment, space, spacing);
	interconnect(points, last_points, space);
	}
	increment += 1;
	move_to_front();
	if (increment > 14) {
	clearInterval(runner);
	}
	}

	var runner = setInterval(running, 500);
	</script>
	</body>