Fumble

https://github.com/clayzermk2/fumble

by clayzermk1

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

<div id="page">
    <div id="margin"><a id="target" href="#">Some Link</a></div>
</div>

CSS

#page {
    height: 600px;
    width: 600px;
}

#margin {
    margin: 300px auto auto 300px;
}

.fumble {
    position: absolute;
}

JavaScript

var target = '#target',
    radius = 100,
    margin = 0,
    position = "sw",
    strokeColor = "#666",
    strokeWidth = 2,
    fillColor = "#eee",
    fontFamily = "helvetica",
    fontSize = 20,
    fontWeight = "normal",
    fontColor = "#888",
    message = 'testing';

function calculateRotation() {
    if (position === "se") {
        return 0;
    } else if (position === "s") {
        return 45;
    } else if (position === "sw") {
        return 90;
    } else if (position === "w") {
        return 135;
    } else if (position === "nw") {
        return 180;
    } else if (position === "n") {
        return 225;
    } else if (position === "ne") {
        return 270;
    } else if (position === "e") {
        return 315;
    } else {
        return position;
    }
}

function calculateTextOffset() {
    if (position === "se") {
        return {x: 0, y: 0};
    } else if (position === "s") {
        return {x: -(radius + margin + strokeWidth), y: 0};
    } else if (position === "sw") {
        return {x: -(2 * (radius + margin + strokeWidth)), y: 0};
    } else if (position === "w") {
        return {x: -(2 * (radius + margin + strokeWidth)), y: -(radius + margin + strokeWidth)};
    } else if (position === "nw") {
        return {x: -(2 * (radius + margin + strokeWidth)), y: -(2 * (radius + margin + strokeWidth))};
    } else if (position === "n") {
        return {x: -(radius + margin + strokeWidth), y: -(2 * (radius + margin + strokeWidth))};
    } else if (position === "ne") {
        return {x: 0, y: -(2 * (radius + margin + strokeWidth))};
    } else if (position === "e") {
        return {x: 0, y: -(radius + margin + strokeWidth)};
    }
}

$(target).each(function(idx, elem) {
    debugger;
    var targetOffset = $(elem).offset();
    var targetHeight = $(elem).height();
    var targetWidth = $(elem).width();

    var svg = d3.select('#page')
      .append("div")
        .classed("fumble", true)
        .attr("style", "top: " + (targetOffset.top -...