Chord I

Part of a series of examples on Chord diagram using VizJS

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font: 10px sans-serif;
}

svg text{
  text-anchor:middle;
  font-size:18px;
}
svg .values text{
  pointer-events:none;
  stroke-width: 0.5px;
}
.groups:hover{
  cursor:pointer;
  font-weight:bold;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://vizjs.org/viz.v1.1.0.min.js"></script>
<script>

var data = [
["US","Canada",343000]
,["US","China",27000]
,["US","India",3000]
,["US","UK",212000]
,["Canada","China",9000]
,["Canada","India",2000]
,["Canada","UK",86000]
,["Canada","US",842000]
,["UK","Canada",607000]
,["UK","China",9000]
,["UK","India",5000]
,["UK","US",715000]
,["China","Canada",711000]
,["China","India",7000]
,["China","UK",183000]
,["China","US",2104000]
,["India","Canada",621000]
,["India","China",9000]
,["India","UK",777000]
,["India","US",1969000]
];

var colors = {
   "US":"rgb(193,161,111)"
  ,"Canada":"rgb(115,146,17)"
  ,"UK":"rgb(234,193,36)"
  ,"China":"rgb(217,36,5)"
  ,"India":"rgb(53,99,235)"
};

var sortOrder =["UK","China","US","India","Canada"];
function sort(a,b){ return d3.ascending(sortOrder.indexOf(a),sortOrder.indexOf(b)); }
function valueFormat(x){ return (d3.format(",")(x/1000))+"k";}

var chi = viz.ch().data(data).padding(.05)
      .source(d=>d[1])
      .target(d=>d[0])
      .sort(sort)
	  .valueFormat(valueFormat)
      .fill(function(d){ return colors[d];});

var che = viz.ch().data(data).padding(.05)
      .sort(sort)
	  .valueFormat(valueFormat)
      .fill(function(d){ return colors[d];});

var width=1200, height=600;
var svg = d3.select("body").append("svg").attr("height",height).attr("width",width);

svg.append("g").attr("transform", "translate(300,300)").call(che);
svg.append("g").attr("transform", "translate(900,300)").call(chi);

svg.append("text").attr("x",300).attr("y",50).text("Emigration").style("font-weight","bold")
svg.append("text").attr("x",900).attr("y",50).text("Immigration").style("font-weight","bold")

// adjust height of frame in bl.ocks.org
d3.select(self.frameElement).style("height", height+"px").style("width", width+"px");
      
</script>

Modified http://vizjs.org/viz.v1.1.0.min.js to a secure url

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

https://vizjs.org/viz.v1.1.0.min.js