block by NPashaP b1dcfe52c946fd3c97cee8ac5653a48e

Viz - chord - fill

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<body>
<svg width="960" height="500">
<g transform="translate(450,250)"></g>
</svg>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//vizjs.org/viz.v1.3.0.min.js"></script>
<script>
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 chord = viz.chord()
	.data(getData())
	.fill(function(d){ return colors[d]})
	
d3.select("g").call(chord);
      
function getData(){
return [
	//[source, target, value]
	["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]
	]
}
</script>