HIVE Plot

by Eamonn Maguire

HTML

<script src="https://raw.githubusercontent.com/d3/d3-plugins/master/hive/hive.js"></script>
<h3>Hive Chart</h3>
<div id="graph-canvas"></div>

CSS

body {
    background-color:#2c3e50;
    color: white;
}
pre {
    display:none;
}
svg .foreground path {
    fill: none;
    stroke: #F15A29;
    stroke-opacity: .7;
}
.axis path, .axis line {
    fill: none;
    stroke:white;
    shape-rendering: crispEdges;
}
.brush .extent {
    fill-opacity: .1;
    stroke: #fff;
    shape-rendering: crispEdges;
}
text {
    fill:white;
    font-family:'Sans serif';
    font-size: 10px;
}

.link {
    stroke: white;
}

line {
    stroke: white;
}

path {
    fill: none;
}

JavaScript

/**
 * Created by eamonnmaguire on 05/01/2014.
 */
d3.hive={},d3.hive.link=function(){function t(t,s){var u,h=a(r,this,t,s),i=a(n,this,t,s);h.a>i.a&&(u=i,i=h,h=u),i.a-h.a>Math.PI&&(h.a+=2*Math.PI);var e=h.a+(i.a-h.a)/3,c=i.a-(i.a-h.a)/3;return h.r0-h.r1||i.r0-i.r1?"M"+Math.cos(h.a)*h.r0+","+Math.sin(h.a)*h.r0+"L"+Math.cos(h.a)*h.r1+","+Math.sin(h.a)*h.r1+"C"+Math.cos(e)*h.r1+","+Math.sin(e)*h.r1+" "+Math.cos(c)*i.r1+","+Math.sin(c)*i.r1+" "+Math.cos(i.a)*i.r1+","+Math.sin(i.a)*i.r1+"L"+Math.cos(i.a)*i.r0+","+Math.sin(i.a)*i.r0+"C"+Math.cos(c)*i.r0+","+Math.sin(c)*i.r0+" "+Math.cos(e)*h.r0+","+Math.sin(e)*h.r0+" "+Math.cos(h.a)*h.r0+","+Math.sin(h.a)*h.r0:"M"+Math.cos(h.a)*h.r0+","+Math.sin(h.a)*h.r0+"C"+Math.cos(e)*h.r1+","+Math.sin(e)*h.r1+" "+Math.cos(c)*i.r1+","+Math.sin(c)*i.r1+" "+Math.cos(i.a)*i.r1+","+Math.sin(i.a)*i.r1}function a(t,a,r,n){var e=t.call(a,r,n),c=+("function"==typeof s?s.call(a,e,n):s)+i,o=+("function"==typeof u?u.call(a,e,n):u),M=u===h?o:+("function"==typeof h?h.call(a,e,n):h);return{r0:o,r1:M,a:c}}var r=function(t){return t.source},n=function(t){return t.target},s=function(t){return t.angle},u=function(t){return t.radius},h=u,i=-Math.PI/2;return t.source=function(a){return arguments.length?(r=a,t):r},t.target=function(a){return arguments.length?(n=a,t):n},t.angle=function(a){return arguments.length?(s=a,t):s},t.radius=function(a){return arguments.length?(u=h=a,t):u},t.startRadius=function(a){return arguments.length?(u=a,t):u},t.endRadius=function(a){return arguments.length?(h=a,t):h},t};


var graph = (function () {

    return {
        create_hive_visualization: function(placement,  width, height) {

            var innerRadius = 40,
                outerRadius = 240;

            var angle = d3.scale.ordinal().domain(d3.range(4)).rangePoints([0, 2 * Math.PI]),
                radius = d3.scale.linear().range([innerRadius, outerRadius]),
                color = d3.scale.ordinal().range(["#1abc9c", "#f39c12", "#e67e22"]);

            var...