saifuddin778/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A hypercube graph. Dedicated to a friend departed.

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

    polygon {
        fill: none;
        stroke: #22313F;
        stroke-width: 0.7;
    }

    .liner {
        stroke: #22313F;
        stroke-width: 0.7;
    }

    .pointer {
        fill: #e1ffe1;
        stroke: #c0c0ff;
        stroke-width: 1;
    }
</style>

<script src="http://d3js.org/d3.v3.min.js"></script>

<body>
    <script>
        var width = 500;
        var height = 500;

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

        function get_polygon_points(points) {
            var pts = "";
            for (var i = 0; i < points.length; i++) {
                for (var k = 0; k < points[i].length; k++) {
                    if (k < points[i].length - 1) {
                        pts += points[i][k] + ",";
                    } else {
                        pts += points[i][k] + " ";
                    }
                }
            }
            return pts;
        }

        function midpoint(p1, p2, d) {
            return [(p1[0] + p2[0]) / d, (p1[1] + p2[1]) / d];
        }

        function add_points(points, space) {
            for (var i = 0; i < points.length; i++) {
                var circle = space.append("circle")
                    .attr("class", "pointer")
                    .attr("cx", points[i][0])
                    .attr("cy", points[i][1])
                    .attr("r", 3.5);
            }
        }

        function get_oct_points(origin, radius) {
            var incl = 0.3;
            var p1 = [origin[0], origin[1] - (radius * 1.5)]; //top
            var p2 = [origin[0] + (radius * 1.5), origin[1]]; //right
            var p3 = [origin[0], origin[1] + (radius * 1.5)]; //bottom
            var p4 = [origin[0] - (radius * 1.5), origin[1]]; //left

            var lt = midpoint(p1, p4, 2);
            var rt = midpoint(p1, p2, 2);
            var lb = midpoint(p3, p4, 2);
            var rb = midpoint(p2, p3, 2);

            var p5 = [lt[0] - (radius * incl), lt[1] - (radius * incl)]; //top left noke
            var p6 = [rt[0] + (radius * incl), rt[1] - (radius * incl)]; //top right noke
            var p7 = [lb[0] - (radius * incl), lb[1] + (radius * incl)]; //bottom left noke
            var p8 = [rb[0] + (radius * incl), rb[1] + (radius * incl)]; //bottom right noke

            return [
                p1, p6, p2, p8, p3, p7, p4, p5,
            ];
        }

        function vertices(origin, radius, space, pts, add_oct) {
            var points = get_oct_points(origin, radius);

            if (add_oct) {
                space.append("polygon").attr("points", get_polygon_points(points));
            }

            var l_pts = pts.length;
            for (var j = 0; j < l_pts; j++) {
                var left = j - 1;
                var right = j + 1;

                if (left < 0) {
                    left = l_pts - 1;
                }
                if (right > l_pts - 1) {
                    right = 0;
                }

                space.append("line")
                    .attr("class", "liner")
                    .attr("x1", pts[j][0])
                    .attr("y1", pts[j][1])
                    .attr("x2", points[left][0])
                    .attr("y2", points[left][1]);

                space.append("line")
                    .attr("class", "liner")
                    .attr("x1", pts[j][0])
                    .attr("y1", pts[j][1])
                    .attr("x2", points[right][0])
                    .attr("y2", points[right][1]);
            }
            add_points(points, space);
            return points;
        }

        function octagon(origin, radius, space) {
            var points = get_oct_points(origin, radius);

            space.append("polygon").attr("points", get_polygon_points(points));

            space.append("line")
                .attr("class", "liner")
                .attr("x1", points[1][0])
                .attr("y1", points[1][1])
                .attr("x2", points[6][0])
                .attr("y2", points[6][1]);

            space.append("line")
                .attr("class", "liner")
                .attr("x1", points[2][0])
                .attr("y1", points[2][1])
                .attr("x2", points[5][0])
                .attr("y2", points[5][1]);

            space.append("line")
                .attr("class", "liner")
                .attr("x1", points[7][0])
                .attr("y1", points[7][1])
                .attr("x2", points[2][0])
                .attr("y2", points[2][1]);

            space.append("line")
                .attr("class", "liner")
                .attr("x1", points[6][0])
                .attr("y1", points[6][1])
                .attr("x2", points[3][0])
                .attr("y2", points[3][1]);

            space.append("line")
                .attr("class", "liner")
                .attr("x1", points[0][0])
                .attr("y1", points[0][1])
                .attr("x2", points[3][0])
                .attr("y2", points[3][1]);

            space.append("line")
                .attr("class", "liner")
                .attr("x1", points[0][0])
                .attr("y1", points[0][1])
                .attr("x2", points[5][0])
                .attr("y2", points[5][1]);

            space.append("line")
                .attr("class", "liner")
                .attr("x1", points[4][0])
                .attr("y1", points[4][1])
                .attr("x2", points[1][0])
                .attr("y2", points[1][1]);

            space.append("line")
                .attr("class", "liner")
                .attr("x1", points[4][0])
                .attr("y1", points[4][1])
                .attr("x2", points[7][0])
                .attr("y2", points[7][1]);

            add_points(points, space);
            return points;
        }

        var space = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g");
        var origin = [width / 2, height / 2];
        var radius = 11.5;

        for (var i = 0; i < 4; i++) {
            if (i == 0) {
                var points = octagon(origin, radius, space);
            } else {
                if (4 - i == 1) {
                    points = vertices(origin, radius, space, points, true);
                } else {
                    points = vertices(origin, radius, space, points, false);
                }
            }
            radius *= 2.4;
        }
        move_to_front();
    </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	text-align: center;
	font-family: monospace;
	background-color: #f2f2f2;
	}

	polygon {
	fill: none;
	stroke: #22313F;
	stroke-width: 0.7;
	}

	.liner {
	stroke: #22313F;
	stroke-width: 0.7;
	}

	.pointer {
	fill: #e1ffe1;
	stroke: #c0c0ff;
	stroke-width: 1;
	}
	</style>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<body>
	<script>
	var width = 500;
	var height = 500;

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

	function get_polygon_points(points) {
	var pts = "";
	for (var i = 0; i < points.length; i++) {
	for (var k = 0; k < points[i].length; k++) {
	if (k < points[i].length - 1) {
	pts += points[i][k] + ",";
	} else {
	pts += points[i][k] + " ";
	}
	}
	}
	return pts;
	}

	function midpoint(p1, p2, d) {
	return [(p1[0] + p2[0]) / d, (p1[1] + p2[1]) / d];
	}

	function add_points(points, space) {
	for (var i = 0; i < points.length; i++) {
	var circle = space.append("circle")
	.attr("class", "pointer")
	.attr("cx", points[i][0])
	.attr("cy", points[i][1])
	.attr("r", 3.5);
	}
	}

	function get_oct_points(origin, radius) {
	var incl = 0.3;
	var p1 = [origin[0], origin[1] - (radius * 1.5)]; //top
	var p2 = [origin[0] + (radius * 1.5), origin[1]]; //right
	var p3 = [origin[0], origin[1] + (radius * 1.5)]; //bottom
	var p4 = [origin[0] - (radius * 1.5), origin[1]]; //left

	var lt = midpoint(p1, p4, 2);
	var rt = midpoint(p1, p2, 2);
	var lb = midpoint(p3, p4, 2);
	var rb = midpoint(p2, p3, 2);

	var p5 = [lt[0] - (radius * incl), lt[1] - (radius * incl)]; //top left noke
	var p6 = [rt[0] + (radius * incl), rt[1] - (radius * incl)]; //top right noke
	var p7 = [lb[0] - (radius * incl), lb[1] + (radius * incl)]; //bottom left noke
	var p8 = [rb[0] + (radius * incl), rb[1] + (radius * incl)]; //bottom right noke

	return [
	p1, p6, p2, p8, p3, p7, p4, p5,
	];
	}

	function vertices(origin, radius, space, pts, add_oct) {
	var points = get_oct_points(origin, radius);

	if (add_oct) {
	space.append("polygon").attr("points", get_polygon_points(points));
	}

	var l_pts = pts.length;
	for (var j = 0; j < l_pts; j++) {
	var left = j - 1;
	var right = j + 1;

	if (left < 0) {
	left = l_pts - 1;
	}
	if (right > l_pts - 1) {
	right = 0;
	}

	space.append("line")
	.attr("class", "liner")
	.attr("x1", pts[j][0])
	.attr("y1", pts[j][1])
	.attr("x2", points[left][0])
	.attr("y2", points[left][1]);

	space.append("line")
	.attr("class", "liner")
	.attr("x1", pts[j][0])
	.attr("y1", pts[j][1])
	.attr("x2", points[right][0])
	.attr("y2", points[right][1]);
	}
	add_points(points, space);
	return points;
	}

	function octagon(origin, radius, space) {
	var points = get_oct_points(origin, radius);

	space.append("polygon").attr("points", get_polygon_points(points));

	space.append("line")
	.attr("class", "liner")
	.attr("x1", points[1][0])
	.attr("y1", points[1][1])
	.attr("x2", points[6][0])
	.attr("y2", points[6][1]);

	space.append("line")
	.attr("class", "liner")
	.attr("x1", points[2][0])
	.attr("y1", points[2][1])
	.attr("x2", points[5][0])
	.attr("y2", points[5][1]);

	space.append("line")
	.attr("class", "liner")
	.attr("x1", points[7][0])
	.attr("y1", points[7][1])
	.attr("x2", points[2][0])
	.attr("y2", points[2][1]);

	space.append("line")
	.attr("class", "liner")
	.attr("x1", points[6][0])
	.attr("y1", points[6][1])
	.attr("x2", points[3][0])
	.attr("y2", points[3][1]);

	space.append("line")
	.attr("class", "liner")
	.attr("x1", points[0][0])
	.attr("y1", points[0][1])
	.attr("x2", points[3][0])
	.attr("y2", points[3][1]);

	space.append("line")
	.attr("class", "liner")
	.attr("x1", points[0][0])
	.attr("y1", points[0][1])
	.attr("x2", points[5][0])
	.attr("y2", points[5][1]);

	space.append("line")
	.attr("class", "liner")
	.attr("x1", points[4][0])
	.attr("y1", points[4][1])
	.attr("x2", points[1][0])
	.attr("y2", points[1][1]);

	space.append("line")
	.attr("class", "liner")
	.attr("x1", points[4][0])
	.attr("y1", points[4][1])
	.attr("x2", points[7][0])
	.attr("y2", points[7][1]);

	add_points(points, space);
	return points;
	}

	var space = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g");
	var origin = [width / 2, height / 2];
	var radius = 11.5;

	for (var i = 0; i < 4; i++) {
	if (i == 0) {
	var points = octagon(origin, radius, space);
	} else {
	if (4 - i == 1) {
	points = vertices(origin, radius, space, points, true);
	} else {
	points = vertices(origin, radius, space, points, false);
	}
	}
	radius *= 2.4;
	}
	move_to_front();
	</script>
	</body>