Chord - source, target, value

viz.ch().source, viz.ch().target, viz.ch().value

These methods can be used to set the accessor functions for the source, target, and values in the data array.

The diagram on the left uses the default accessors d=>d[0], d=>d[1], and d=>d[2] for source, target and value respectively.

The diagram on the right over rides these deafults.

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{
  fill:grey;
  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",343] ,["US","China",27]
,["US","India",3],["US","UK",212]
,["Canada","China",9],["Canada","India",2]
,["Canada","UK",86],["Canada","US",842]
,["UK","Canada",607],["UK","China",9]
,["UK","India",5],["UK","US",715]
,["China","Canada",711],["China","India",7]
,["China","UK",183],["China","US",2104]
,["India","Canada",621],["India","China",9]
,["India","UK",777],["India","US",1969]
];

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 height=500, width=1050;
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

var chLeft = viz.ch()
      .data(data)
      .fill(function(d){ return colors[d];});

var chRight = viz.ch()
      .data(data)
      .fill(function(d){ return colors[d];})
      .source(d=>d[1])
      .target(d=>d[0])
      .value(d=>2*d[2]);

//create g elements and create the chord diagrams in it
svg.append("g").attr("transform", "translate(300,250)").call(chLeft);
svg.append("g").attr("transform", "translate(750,250)").call(chRight);

// adjust the bl.ocks frame dimension.
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