D3 Examples - Visa Refused

xxxxxxxxxx
 
<!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; })
      ;
​
​
​
  function linkMouseover(d) {
    svg.selectAll(".link").classed("active", function(p) { return p === d; });
    svg.selectAll(".node").classed("active", function(x) { return x.name === d.source.name || x.name === d.target.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>
    