epmoyer/README.md

## README.md

      
    Raw
  

              README.md
            
          
    My initials as a fractal :)

  
## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <link type="text/css" rel="stylesheet" href="style.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <style type="text/css">

.node circle {
    cursor: pointer;
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}

.node text {
    font-size: 11px;
}

path.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}

rect {
    stroke-width: 1px;
}

        </style>
    </head>
    <body>
        <div id="body">
        </div>
        <script type="text/javascript">

var m = [20, 30, 20, 30],
    w = 960 - m[1] - m[3],
    h = 500 - m[0] - m[2],
    i = 0,
    cr = 6;

var jump = 100;
var initialSize = 300;

var vis = d3.select("#body").append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var group = vis;

// ###########################################
// Color shade / blend transformation
// From http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
function shadeBlend(p,c0,c1) {
    var n=p<0?p*-1:p,u=Math.round,w=parseInt;
    if(c0.length>7){
        var f=c0.split(","),t=(c1?c1:p<0?"rgb(0,0,0)":"rgb(255,255,255)").split(","),R=w(f[0].slice(4)),G=w(f[1]),B=w(f[2]);
        return "rgb("+(u((w(t[0].slice(4))-R)*n)+R)+","+(u((w(t[1])-G)*n)+G)+","+(u((w(t[2])-B)*n)+B)+")"
    }else{
        var f=w(c0.slice(1),16),t=w((c1?c1:p<0?"#000000":"#FFFFFF").slice(1),16),R1=f>>16,G1=f>>8&0x00FF,B1=f&0x0000FF;
        return "#"+(0x1000000+(u(((t>>16)-R1)*n)+R1)*0x10000+(u(((t>>8&0x00FF)-G1)*n)+G1)*0x100+(u(((t&0x0000FF)-B1)*n)+B1)).toString(16).slice(1)
    }
}


// ###########################################
var figureStep = 0 * initialSize * 1.2

var thickenss = 40;
var increment = 0.5;
var letterSize = initialSize;
var angle = 0;
var reduction = 0.36;
cr = thickenss/2;
var strokeColor = "#222222";
var fillColor = "#222222";
var scaleRate = 0.6;

var group = vis;
group = group.append("svg:g");
group.attr("transform",
                "translate("
                + 0
                + ","
                + figureStep
                + ")"
            );

for (i=0; i<6; i++){
    group = group.append("svg:g");

    if(i>0){
        angle = 90;
        jump = letterSize * increment - thickenss/2;
        letterSize = letterSize * (1 - increment) + thickenss/2;
        group.attr("transform",
                "translate("
                + jump
                + ","
                + jump
                + ")"
                + " rotate("
                + angle
                + ","
                + letterSize/2
                + ","
                + letterSize/2
                + ")"
            );
        thickenss *= scaleRate;
        cr *= scaleRate;
        if(i>0 && i%2==0){
            strokeColor = shadeBlend(0.6, strokeColor);
            fillColor = shadeBlend(0.6, fillColor);
        }
    }

    group.append("svg:rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("rx", cr)
        .attr("ry", cr)
        .style("stroke", strokeColor)
        .style("fill", fillColor)
        .attr("height", thickenss + "px")
        .attr("width", letterSize + "px");

    group.append("svg:rect")
        .attr("x", 0)
        .attr("y", letterSize/2 - thickenss/2)
        .attr("rx", cr)
        .attr("ry", cr)
        .style("stroke", strokeColor)
        .style("fill", fillColor)
        .attr("height", thickenss + "px")
        .attr("width", letterSize * reduction + "px");

    group.append("svg:rect")
        .attr("x", 0)
        .attr("y", letterSize - thickenss)
        .attr("rx", cr)
        .attr("ry", cr)
        .style("stroke", strokeColor)
        .style("fill", fillColor)
        .attr("height", thickenss + "px")
        .attr("width", letterSize * reduction + "px");

    group.append("svg:rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("rx", cr)
        .attr("ry", cr)
        .style("stroke", strokeColor)
        .style("fill", fillColor)
        .attr("height", letterSize + "px")
        .attr("width", thickenss + "px");
}

        </script>
    </body>
</html>

## style.css
body {
  /*background: url(texture-noise.png);*/
  /*overflow: hidden;*/
  margin: 0;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica;
}

#chart, #header, #footer {
  position: absolute;
  top: 0;
}

#header, #footer {
  z-index: 1;
  display: block;
  font-size: 36px;
  font-weight: 300;
  text-shadow: 0 1px 0 #fff;
}

#header.inverted, #footer.inverted {
  color: #fff;
  text-shadow: 0 1px 4px #000;
}

#header {
  top: 80px;
  left: 140px;
  width: 1000px;
}

#footer {
  top: 680px;
  right: 140px;
  text-align: right;
}

rect {
  fill: none;
  pointer-events: all;
}

pre {
  font-size: 18px;
}

line {
  stroke: #000;
  stroke-width: 1.5px;
}

.string, .regexp {
  color: #f39;
}

.keyword {
  color: #00c;
}

.comment {
  color: #777;
  font-style: oblique;
}

.number {
  color: #369;
}

.class, .special {
  color: #1181B8;
}

a:link, a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #666;
}

.hint {
  position: absolute;
  right: 0;
  width: 1280px;
  font-size: 12px;
  color: #999;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<link type="text/css" rel="stylesheet" href="style.css"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<style type="text/css">

	.node circle {
	cursor: pointer;
	fill: #fff;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	.node text {
	font-size: 11px;
	}

	path.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 1.5px;
	}

	rect {
	stroke-width: 1px;
	}

	</style>
	</head>
	<body>
	<div id="body">
	</div>
	<script type="text/javascript">

	var m = [20, 30, 20, 30],
	w = 960 - m[1] - m[3],
	h = 500 - m[0] - m[2],
	i = 0,
	cr = 6;

	var jump = 100;
	var initialSize = 300;

	var vis = d3.select("#body").append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("svg:g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	var group = vis;

	// ###########################################
	// Color shade / blend transformation
	// From http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
	function shadeBlend(p,c0,c1) {
	var n=p<0?p*-1:p,u=Math.round,w=parseInt;
	if(c0.length>7){
	var f=c0.split(","),t=(c1?c1:p<0?"rgb(0,0,0)":"rgb(255,255,255)").split(","),R=w(f[0].slice(4)),G=w(f[1]),B=w(f[2]);
	return "rgb("+(u((w(t[0].slice(4))-R)n)+R)+","+(u((w(t[1])-G)n)+G)+","+(u((w(t[2])-B)*n)+B)+")"
	}else{
	var f=w(c0.slice(1),16),t=w((c1?c1:p<0?"#000000":"#FFFFFF").slice(1),16),R1=f>>16,G1=f>>8&0x00FF,B1=f&0x0000FF;
	return "#"+(0x1000000+(u(((t>>16)-R1)n)+R1)0x10000+(u(((t>>8&0x00FF)-G1)n)+G1)0x100+(u(((t&0x0000FF)-B1)*n)+B1)).toString(16).slice(1)
	}
	}


	// ###########################################
	var figureStep = 0 * initialSize * 1.2

	var thickenss = 40;
	var increment = 0.5;
	var letterSize = initialSize;
	var angle = 0;
	var reduction = 0.36;
	cr = thickenss/2;
	var strokeColor = "#222222";
	var fillColor = "#222222";
	var scaleRate = 0.6;

	var group = vis;
	group = group.append("svg:g");
	group.attr("transform",
	"translate("
	+ 0
	+ ","
	+ figureStep
	+ ")"
	);

	for (i=0; i<6; i++){
	group = group.append("svg:g");

	if(i>0){
	angle = 90;
	jump = letterSize * increment - thickenss/2;
	letterSize = letterSize * (1 - increment) + thickenss/2;
	group.attr("transform",
	"translate("
	+ jump
	+ ","
	+ jump
	+ ")"
	+ " rotate("
	+ angle
	+ ","
	+ letterSize/2
	+ ","
	+ letterSize/2
	+ ")"
	);
	thickenss *= scaleRate;
	cr *= scaleRate;
	if(i>0 && i%2==0){
	strokeColor = shadeBlend(0.6, strokeColor);
	fillColor = shadeBlend(0.6, fillColor);
	}
	}

	group.append("svg:rect")
	.attr("x", 0)
	.attr("y", 0)
	.attr("rx", cr)
	.attr("ry", cr)
	.style("stroke", strokeColor)
	.style("fill", fillColor)
	.attr("height", thickenss + "px")
	.attr("width", letterSize + "px");

	group.append("svg:rect")
	.attr("x", 0)
	.attr("y", letterSize/2 - thickenss/2)
	.attr("rx", cr)
	.attr("ry", cr)
	.style("stroke", strokeColor)
	.style("fill", fillColor)
	.attr("height", thickenss + "px")
	.attr("width", letterSize * reduction + "px");

	group.append("svg:rect")
	.attr("x", 0)
	.attr("y", letterSize - thickenss)
	.attr("rx", cr)
	.attr("ry", cr)
	.style("stroke", strokeColor)
	.style("fill", fillColor)
	.attr("height", thickenss + "px")
	.attr("width", letterSize * reduction + "px");

	group.append("svg:rect")
	.attr("x", 0)
	.attr("y", 0)
	.attr("rx", cr)
	.attr("ry", cr)
	.style("stroke", strokeColor)
	.style("fill", fillColor)
	.attr("height", letterSize + "px")
	.attr("width", thickenss + "px");
	}

	</script>
	</body>
	</html>
	body {
	/background: url(texture-noise.png);/
	/overflow: hidden;/
	margin: 0;
	font-size: 14px;
	font-family: "Helvetica Neue", Helvetica;
	}

	#chart, #header, #footer {
	position: absolute;
	top: 0;
	}

	#header, #footer {
	z-index: 1;
	display: block;
	font-size: 36px;
	font-weight: 300;
	text-shadow: 0 1px 0 #fff;
	}

	#header.inverted, #footer.inverted {
	color: #fff;
	text-shadow: 0 1px 4px #000;
	}

	#header {
	top: 80px;
	left: 140px;
	width: 1000px;
	}

	#footer {
	top: 680px;
	right: 140px;
	text-align: right;
	}

	rect {
	fill: none;
	pointer-events: all;
	}

	pre {
	font-size: 18px;
	}

	line {
	stroke: #000;
	stroke-width: 1.5px;
	}

	.string, .regexp {
	color: #f39;
	}

	.keyword {
	color: #00c;
	}

	.comment {
	color: #777;
	font-style: oblique;
	}

	.number {
	color: #369;
	}

	.class, .special {
	color: #1181B8;
	}

	a:link, a:visited {
	color: #000;
	text-decoration: none;
	}

	a:hover {
	color: #666;
	}

	.hint {
	position: absolute;
	right: 0;
	width: 1280px;
	font-size: 12px;
	color: #999;
	}