block by NPashaP d7e2010b713b6c56f1c57f4bb83ea74c

Chord - source, target, value

Full Screen

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

index.html

<!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="//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>