D3 Examples - Initials

xxxxxxxxxx
 
<!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 https://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>
​
    