cmaes · August 29, 2015 14:27
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
  font: 1em sans-serif;
 }

 .chord path {
  fill-opacity: .67;
  stroke: #000;
  stroke-width: .5px;
 }

 table thead {
   border-bottom: 1px solid #000;
   font-size: 1em;
   color: #333;
 }

 td {
   padding-left: 1em;
 }

 td:first-child {
   border-right: 1px solid #000;
   padding-right: 1em;
   padding-left: 0;
 }

 .tabinput {
 width: 40px;
 }

 </style>
 <body onload="ready()">

 <table>
 <thead>
  <tr>
    <td></td>
    <td>Type 1</td>
    <td>Type 2</td>
    <td>Type 3</td>
    <td>Type 4</td>
  </tr>
 </thead>
 <tr>
  <td>Type 1</td>
  <td>-</td>
  <td><input type="number" value="1" id="i12" class="tabinput"></td>
  <td><input type="number" value="2" id="i13" class="tabinput"></td>
  <td><input type="number" value="1" id="i14" class="tabinput"></td>
 </tr>
 <tr>
  <td>Type 2</td>
  <td><input type="number" value="1" id="i21" class="tabinput"></td>
  <td>-</td>
  <td><input type="number" value="3" id="i23" class="tabinput"></td>
  <td><input type="number" value="1" id="i24" class="tabinput"></td>
 </tr>
 <tr>
  <td>Type 3</td>
  <td><input type="number" value="3" id="i31" class="tabinput"></td>
  <td><input type="number" value="3" id="i32" class="tabinput"></td>
  <td>-</td>
  <td><input type="number" value="3" id="i34" class="tabinput"></td>
 </tr>
 <tr>
  <td>Type 4</td>
  <td><input type="number" value="3" id="i41" class="tabinput"></td>
  <td><input type="number" value="3" id="i42" class="tabinput"></td>
  <td><input type="number" value="3" id="i43" class="tabinput"></td>
  <td>-</td>
 </tr>
 </table>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script>

 d3.selectAll(".tabinput")
  .attr("min", 0)
  .on("input", function () {
   console.log(this.id, this.value);
   var idtxt = this.id;
   var i = +idtxt[1]-1;
   var j = +idtxt[2]-1;
   console.log("row", i, "col", j);
   matrix[i][j] = +this.value;
   svg.selectAll("g").remove();
   updateChord(matrix);
 });

 var width = 960,
    height = 500,
    innerRadius = Math.min(width, height) * .41,
    outerRadius = innerRadius * 1.1;

 var fill = d3.scale.category10()
    .domain(d3.range(4))

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


 var matrix = [];

 function ready () {

 console.log("ready");

 for (var i=0; i < 4; i++) {
  var row = [];
  for (var j=0; j < 4; j++) {
     if (i !== j) {
       var myid = "#i" + (i+1) + (j+1);
       var sel = d3.select(myid);
       console.log(myid, sel);
       if (sel) {
       console.log(myid, sel.attr("value"));
       var elem = +sel.attr("value");
       }
       elem = 1;
       row.push(elem);
     } else {
       row.push(0);
     }
  }
  matrix.push(row);
 }

 console.log("matrix", matrix);

 updateChord(matrix);

 }

 function updateChord(matrix) {

 var chord = d3.layout.chord()
    .padding(.05)
    .matrix(matrix);

 svg.append("g")
    .attr("class", "chord")
  .selectAll("path")
    .data(chord.chords)
  .enter().append("path")
    .attr("d", d3.svg.chord().radius(innerRadius))
    .style("fill", function(d) { return fill(d.target.index); })
    .style("opacity", 1);


 var group = svg.selectAll(".group")
               .data(chord.groups)
            .enter().append("g")
               .attr("class", "group")
               .on("mouseover", fade(.1))
               .on("mouseout",  fade(1));

 var groupPath = group.append("path")
    .attr("id", function (d, i) { return "group" + i; })
    .style("fill", function(d) { return fill(d.index); })
    .style("stroke", function(d) { return fill(d.index); })
    .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius));

 var groupText = group.append("text")
                    .attr("x", 6)
                    .attr("dy", 15);

 groupText.append("textPath")
         .attr("xlink:href", function (d, i) { return "#group" + i; })
         .text(function (d, i) { return "Type " + (i+1); });



 }


 // Returns an event handler for fading a given chord group.
 function fade(opacity) {
  return function(g, i) {
    svg.selectAll(".chord path")
        .filter(function(d) { return d.source.index != i && d.target.index != i; })
      .transition()
        .style("opacity", opacity);
  };
 }



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

	body {
	font: 1em sans-serif;
	}

	.chord path {
	fill-opacity: .67;
	stroke: #000;
	stroke-width: .5px;
	}

	table thead {
	border-bottom: 1px solid #000;
	font-size: 1em;
	color: #333;
	}

	td {
	padding-left: 1em;
	}

	td:first-child {
	border-right: 1px solid #000;
	padding-right: 1em;
	padding-left: 0;
	}

	.tabinput {
	width: 40px;
	}

	</style>
	<body onload="ready()">

	<table>
	<thead>
	<tr>
	<td></td>
	<td>Type 1</td>
	<td>Type 2</td>
	<td>Type 3</td>
	<td>Type 4</td>
	</tr>
	</thead>
	<tr>
	<td>Type 1</td>
	<td>-</td>
	<td><input type="number" value="1" id="i12" class="tabinput"></td>
	<td><input type="number" value="2" id="i13" class="tabinput"></td>
	<td><input type="number" value="1" id="i14" class="tabinput"></td>
	</tr>
	<tr>
	<td>Type 2</td>
	<td><input type="number" value="1" id="i21" class="tabinput"></td>
	<td>-</td>
	<td><input type="number" value="3" id="i23" class="tabinput"></td>
	<td><input type="number" value="1" id="i24" class="tabinput"></td>
	</tr>
	<tr>
	<td>Type 3</td>
	<td><input type="number" value="3" id="i31" class="tabinput"></td>
	<td><input type="number" value="3" id="i32" class="tabinput"></td>
	<td>-</td>
	<td><input type="number" value="3" id="i34" class="tabinput"></td>
	</tr>
	<tr>
	<td>Type 4</td>
	<td><input type="number" value="3" id="i41" class="tabinput"></td>
	<td><input type="number" value="3" id="i42" class="tabinput"></td>
	<td><input type="number" value="3" id="i43" class="tabinput"></td>
	<td>-</td>
	</tr>
	</table>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>

	d3.selectAll(".tabinput")
	.attr("min", 0)
	.on("input", function () {
	console.log(this.id, this.value);
	var idtxt = this.id;
	var i = +idtxt[1]-1;
	var j = +idtxt[2]-1;
	console.log("row", i, "col", j);
	matrix[i][j] = +this.value;
	svg.selectAll("g").remove();
	updateChord(matrix);
	});

	var width = 960,
	height = 500,
	innerRadius = Math.min(width, height) * .41,
	outerRadius = innerRadius * 1.1;

	var fill = d3.scale.category10()
	.domain(d3.range(4))

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


	var matrix = [];

	function ready () {

	console.log("ready");

	for (var i=0; i < 4; i++) {
	var row = [];
	for (var j=0; j < 4; j++) {
	if (i !== j) {
	var myid = "#i" + (i+1) + (j+1);
	var sel = d3.select(myid);
	console.log(myid, sel);
	if (sel) {
	console.log(myid, sel.attr("value"));
	var elem = +sel.attr("value");
	}
	elem = 1;
	row.push(elem);
	} else {
	row.push(0);
	}
	}
	matrix.push(row);
	}

	console.log("matrix", matrix);

	updateChord(matrix);

	}

	function updateChord(matrix) {

	var chord = d3.layout.chord()
	.padding(.05)
	.matrix(matrix);

	svg.append("g")
	.attr("class", "chord")
	.selectAll("path")
	.data(chord.chords)
	.enter().append("path")
	.attr("d", d3.svg.chord().radius(innerRadius))
	.style("fill", function(d) { return fill(d.target.index); })
	.style("opacity", 1);


	var group = svg.selectAll(".group")
	.data(chord.groups)
	.enter().append("g")
	.attr("class", "group")
	.on("mouseover", fade(.1))
	.on("mouseout", fade(1));

	var groupPath = group.append("path")
	.attr("id", function (d, i) { return "group" + i; })
	.style("fill", function(d) { return fill(d.index); })
	.style("stroke", function(d) { return fill(d.index); })
	.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius));

	var groupText = group.append("text")
	.attr("x", 6)
	.attr("dy", 15);

	groupText.append("textPath")
	.attr("xlink:href", function (d, i) { return "#group" + i; })
	.text(function (d, i) { return "Type " + (i+1); });



	}


	// Returns an event handler for fading a given chord group.
	function fade(opacity) {
	return function(g, i) {
	svg.selectAll(".chord path")
	.filter(function(d) { return d.source.index != i && d.target.index != i; })
	.transition()
	.style("opacity", opacity);
	};
	}



	</script>