willzjc/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Part of a series of examples on Chord diagram using VizJS

forked from NPashaP's block: Chord I

  
## index.html
<!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="http://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>
	<!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="http://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>