Hive plot

<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
.axis {
  stroke: #2E2E2E;
  stroke-width: 1px;
}

.link {
  fill: none;
  stroke: #999;
  stroke-opacity: .3;
}

.link.active {
  stroke: #00BFFF;
  stroke-opacity: .5;
}

.node.active {
  stroke: #00BFFF !important;
  stroke-width: 3px;
}

.text {
  font-family: sans-serif;
  font-size: 10px;
  fill: #999;
  opacity: 1;
}

.text.active {
  fill: #000;
  opacity: 1;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.hive.v0.min.js"></script>
<script>
 
var width = 960,
    height = 500,
    innerRadius = 40,
    outerRadius = 340; // axis length

var angle = d3.scale.ordinal().domain(d3.range(4)).rangePoints([0, 2 * Math.PI]),
    radius = d3.scale.linear().range([innerRadius, outerRadius]);

var color = d3.scale.linear()
              .range(["#8A0868", "#FA58D0"])
              .domain([1,3])

var r = d3.scale.linear()
              .range([5, 10])
              .domain([3, 1]);
 
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.selectAll(".axis")
  .data(d3.range(3))
.enter().append("line")
  .attr("class", "axis")
  .attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")"; })
  .attr("x1", radius.range()[0])
  .attr("x2", radius.range()[1]+20);

var nodes = [];
var links = [];

d3.json("data_hive.json", function(error, graph) {
  nodes = graph;
  
  
  graph.forEach(function(node) {
    
    if (node.targets !== undefined) {
      node.targets.forEach(function(target){
        links.push({source: {group: node.group, y: node.y}, 
                    target: {group: graph[target.node].group, y: graph[target.node].y},
                    value: target.value});
      });
    }
  });
  
  radius.domain([0, d3.max(graph, function(d) {return d.y;})]);

svg.selectAll(".link")
    .data(links)
  .enter().append("path")
    .attr("class", "link")
    .attr("d", d3.hive.link()
    .angle(function(d) { return angle(d.group); })
    .radius(function(d) { return radius(d.y); }))
    .style("stroke-width", function(d) { return Math.sqrt(d.value); })
    .on("mouseover", linkMouseover)
    .on("mouseout", mouseout);

svg.selectAll(".node")
      .data(graph)
    .enter().append("circle")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + degrees(angle(d.group)) + ")"; })
      .attr("cx", function(d) { return radius(d.y); })
      .attr("r", function(d) {return r(d.group)})
      .style("fill", function(d) { return color(d.group); })
      .style("stroke", function(d) { return d3.rgb(color(d.group)).darker(1); })
      .on("mouseover", nodeMouseover)
      .on("mouseout", mouseout);

svg.selectAll(".text")
      .data(graph)
      .enter()
      .append("text")
      .attr("class", "text")
      .text(function(d) {return d.name;})
      .attr("y", function(d) { 
        if (d.group === 3) {
          return -radius(d.y);
        } else {
          return radius(d.y);
        }
         
      })
      .attr("transform", function(d) {
        if (d.group !== 3) {
          return "rotate(" + (degrees(angle(d.group)) - 90) + ")";
        }
      })
      .attr("dx", function(d) {return r(d.group)});

// Highlight the link and connected nodes on mouseover.
  function linkMouseover(d) {
    svg.selectAll(".link").classed("active", function(p) { return p === d; });

svg.selectAll(".node, .text").classed("active", function(p) { 
       return p.group === d.source.group && p.y === d.source.y || p.group === d.target.group && p.y === d.target.y; } );
   // info.text(d.source.node.name + " → " + d.target.node.name);
  }

// Highlight the node and connected links on mouseover.
  function nodeMouseover(d, i) {
    svg.selectAll(".link").classed("active", function(p) { return p.target.group === d.group && p.target.y === d.y || p.source.group === d.group && p.source.y === d.y; });
    svg.selectAll(".node, .text").classed("active", function(q,j) { 
      var sources = [];
      if (q.targets !== undefined) {
        q.targets.forEach(function(y) {
          sources.push(y.node);
        })
      }
      if (sources.indexOf(i) !== -1) {
        return d; 
      }

// Clear any highlighted nodes or links.
  function mouseout() {
    svg.selectAll(".active").classed("active", false);
    //info.text(defaultInfo);
   }

});
function degrees(radians) {
    return radians / Math.PI * 180 - 90;
  }
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/d3.hive.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/d3.hive.v0.min.js