Visa Refused

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Hive Link Plot</title>
	<style type="text/css">
	.link{
		fill: none;
    stroke: #000;
		stroke-width: 1.5px;
    stroke-opacity: .2;
	}

.axis {
		stroke: #000;
		stroke-width: 1.5px;
	}

.link.active {
  stroke-width: 3px;
  stroke-opacity: 1;
}

.node {
  stroke: #000;
}

.node.active {
  stroke: red;
  stroke-width: 3px;
  stroke-opacity: 1;
}

</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.js"></script>
<script type="text/javascript" src="d3.hive.min.js"></script>
<script type="text/javascript">

var width = 1260;
var height = 1000;
var outerRadius = 400;
var innerRadius = 10;

var continents = {'Asia': 0, 'Africa': 1, 'Europe': 2, 'North America': 3, 'South America': 4, "Central America and the Antilles": 5, "Oceania": 6};

var cont_lengths = [{'cont': 'Asia', 'count': 52}, {'cont':'Africa', 'count': 54}, {'cont':'Europe', 'count': 50}, {'cont':'North America', 'count' : 13}, {'cont':'South America', 'count': 13}, {'cont':"Central America and the Antilles", 'count': 22}, {'cont': "Oceania", 'count': 19}];

var angle = d3.scale.ordinal()
		.domain(d3.range(8))
		.rangePoints([0,2 * Math.PI]);

var radius = d3.scale.linear()
		.range([innerRadius, outerRadius]);

var color = d3.scale.category20()
    .domain(["Asia", "Africa", "North America", "Europe", "South America", "Central America and the Antilles", "Oceania"]);

var svg = d3.select("body").append("svg")
    .attr("class", "svg")
		.attr("width", width)
		.attr("height", height)
	.append("g")
		.attr("transform", "translate(" + width/2 + "," + height/2 + ")");

svg.selectAll(".axis")
		.data(d3.range(7))
	.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]);

svg.append("g")
    .attr("class", "legendOrdinal")
    .attr("transform", "translate(500, -200)");

var legendOrdinal = d3.legend.color()
    .scale(color);

svg.select(".legendOrdinal")
  .call(legendOrdinal);

d3.json("visa_refused1.json", function(error, graph){
  nodes = graph.nodes;
  links = graph.links;

svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", d3.hive.link()
      .angle(function(d) { return angle(continents[d.continent]); })
      .radius(function(d) { return radius(d.y); }))
      .style("stroke", function(d) { return color(d.source.continent); })
      .on("mouseover", linkMouseover)
      .on("mouseout", mouseout)
      .append("title")
      .text(function(d){ return d.source.name + ' --> ' + d.target.name})
      ;

svg.selectAll(".node")
      .data(nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + degrees(angle(continents[d.continent])) + ")"; })
      .attr("cx", function(d) { return radius(d.y); })
      .attr("r", 5)
      .style("fill", function(d) { return color(d.continent); })
      .on("mouseover", nodeMouseover)
      .on("mouseout", mouseout)
      .append("title")
      .text(function(d){ return d.name; })
      ;

// Highlight the node and connected links on mouseover.
  function nodeMouseover(d) {
    svg.selectAll(".link").classed("active", function(p) { return p.source.name === d.name || p.target.name === d.name; });
    d3.select(this).classed("active", true);
  }

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

});

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

</script>

</body>
</html>

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.js