Mbrownshoes/.block

## .block
license: gpl-3.0
height: 960
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Chord diagrams show directed relationships among a group of entities. Layout inspired by Martin Krzywinski's beautiful work on Circos.
forked from mbostock's block: Chord Diagram

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

body {
  font: 10px sans-serif;
}

.group-tick line {
  stroke: #000;
}

.ribbons {
  fill-opacity: 0.67;
}

</style>
<svg width="960" height="660"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
d3.csv("mig.csv", (error, data) => {
  console.log(data)
  	data.forEach(function(d){
         let array = [];
        for (let prop in d) {
          console.log(prop)
           array.push(d[prop]);
        }
      console.log(array)
        return array;
                 })
    })

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 13013,   990,  940, 6907]
];

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    outerRadius = Math.min(width, height) * 0.5 - 40,
    innerRadius = outerRadius - 30;

var formatValue = d3.formatPrefix(",.0", 1e3);

var chord = d3.chord()
    .padAngle(0.05)
    .sortSubgroups(d3.descending);

var arc = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var ribbon = d3.ribbon()
    .radius(innerRadius);

var color = d3.scaleOrdinal()
    .domain(d3.range(4))
    .range(["#000000", "#FFDD89", "#957244", "#F26223"]);

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .datum(chord(matrix));

var group = g.append("g")
    .attr("class", "groups")
  .selectAll("g")
  .data(function(chords) { return chords.groups; })
  .enter().append("g");

group.append("path")
    .style("fill", function(d) { return color(d.index); })
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
    .attr("d", arc);

var groupTick = group.selectAll(".group-tick")
  .data(function(d) { return groupTicks(d, 1e3); })
  .enter().append("g")
    .attr("class", "group-tick")
    .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });

groupTick.append("line")
    .attr("x2", 6);

groupTick
  .filter(function(d) { return d.value % 5e3 === 0; })
  .append("text")
    .attr("x", 8)
    .attr("dy", ".35em")
    .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; })
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
    .text(function(d) { return formatValue(d.value); });

g.append("g")
    .attr("class", "ribbons")
  .selectAll("path")
  .data(function(chords) { return chords; })
  .enter().append("path")
    .attr("d", ribbon)
    .style("fill", function(d) { return color(d.target.index); })
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });

// Returns an array of tick angles and values for a given group and step.
function groupTicks(d, step) {
  var k = (d.endAngle - d.startAngle) / d.value;
  return d3.range(0, d.value, step).map(function(value) {
    return {value: value, angle: value * k + d.startAngle};
  });
}

</script>

## mig.csv

          
            Province
            Destination
            Origin

            
              Newfoundland and Labrador
              98
              228

            
              Prince Edward Island
              117
              100

            
              Nova Scotia
              594
              510

            
              New Brunswick
              348
              182

            
              Quebec
              1259
              1291

            
              Ontario
              5694
              5596

            
              Manitoba
              645
              1392

            
              Saskatchewan
              886
              1735

            
              Alberta
              7197
              10711

            
              Yukon
              78
              202

            
              Northwest Territories
              74
              120

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

	body {
	font: 10px sans-serif;
	}

	.group-tick line {
	stroke: #000;
	}

	.ribbons {
	fill-opacity: 0.67;
	}

	</style>
	<svg width="960" height="660"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	d3.csv("mig.csv", (error, data) => {
	console.log(data)
	data.forEach(function(d){
	let array = [];
	for (let prop in d) {
	console.log(prop)
	array.push(d[prop]);
	}
	console.log(array)
	return array;
	})
	})

	var matrix = [
	[11975, 5871, 8916, 2868],
	[ 1951, 10048, 2060, 6171],
	[ 8010, 16145, 8090, 8045],
	[ 13013, 990, 940, 6907]
	];

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	outerRadius = Math.min(width, height) * 0.5 - 40,
	innerRadius = outerRadius - 30;

	var formatValue = d3.formatPrefix(",.0", 1e3);

	var chord = d3.chord()
	.padAngle(0.05)
	.sortSubgroups(d3.descending);

	var arc = d3.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius);

	var ribbon = d3.ribbon()
	.radius(innerRadius);

	var color = d3.scaleOrdinal()
	.domain(d3.range(4))
	.range(["#000000", "#FFDD89", "#957244", "#F26223"]);

	var g = svg.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
	.datum(chord(matrix));

	var group = g.append("g")
	.attr("class", "groups")
	.selectAll("g")
	.data(function(chords) { return chords.groups; })
	.enter().append("g");

	group.append("path")
	.style("fill", function(d) { return color(d.index); })
	.style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
	.attr("d", arc);

	var groupTick = group.selectAll(".group-tick")
	.data(function(d) { return groupTicks(d, 1e3); })
	.enter().append("g")
	.attr("class", "group-tick")
	.attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });

	groupTick.append("line")
	.attr("x2", 6);

	groupTick
	.filter(function(d) { return d.value % 5e3 === 0; })
	.append("text")
	.attr("x", 8)
	.attr("dy", ".35em")
	.attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; })
	.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
	.text(function(d) { return formatValue(d.value); });

	g.append("g")
	.attr("class", "ribbons")
	.selectAll("path")
	.data(function(chords) { return chords; })
	.enter().append("path")
	.attr("d", ribbon)
	.style("fill", function(d) { return color(d.target.index); })
	.style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });

	// Returns an array of tick angles and values for a given group and step.
	function groupTicks(d, step) {
	var k = (d.endAngle - d.startAngle) / d.value;
	return d3.range(0, d.value, step).map(function(value) {
	return {value: value, angle: value * k + d.startAngle};
	});
	}

	</script>
Province	Destination	Origin
Newfoundland and Labrador	98	228
Prince Edward Island	117	100
Nova Scotia	594	510
New Brunswick	348	182
Quebec	1259	1291
Ontario	5694	5596
Manitoba	645	1392
Saskatchewan	886	1735
Alberta	7197	10711
Yukon	78	202
Northwest Territories	74	120
Nunavut	52	9