bdilday/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A visualization of letter-to-letter network data. This was created for the University of Illinois Coursera class on data visualization.
These data were obtained from the SCOWL (Spell Checker Oriented Word Lists) database, available here, http://wordlist.aspell.net. I generated a medium-sized database of English words, capital words, and abbreviations, and then computed the number of occurrences of letter #1 being succeeded by letter #2. The nodes are connected by chords, and the width of the chords represents the fraction of links from letter #1 that terminate on letter #2. The angle of the arc for each letter represents the fraction of all letters. Hovering the mouse on an arc highlights the links from that arc and fills the table with the letter-to-letter fractions. Hovering the mouse on a chord displays the letter-to-letter fractions.

  
## groups.csv

          
            name
            color

            
              a
              #19a3ff

            
              b
              #333333

            
              c
              #333333

            
              d
              #333333

            
              e
              #19a3ff

            
              f
              #333333

            
              g
              #333333

            
              h
              #333333

            
              i
              #19a3ff

            
              j
              #333333

            
              k
              #333333

            
              l
              #333333

            
              m
              #333333

            
              n
              #333333

            
              o
              #19a3ff

            
              p
              #333333

            
              q
              #333333

            
              r
              #333333

            
              s
              #333333

            
              t
              #333333

            
              u
              #19a3ff

            
              v
              #333333

            
              w
              #333333

            
              x
              #333333

            
              y
              #333333

            
              z
              #333333

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>letter-to-letter network</title>
    <style>
        @import url(style.css);
        #circle circle {
            fill: none;
            pointer-events: all;
        }

        .group path {
            fill-opacity: .5;
        }

        path.chord {
            stroke: #000;
            stroke-width: .25px;
        }

        #circle:hover path.fade {
            display: none;
        }

    </style>
</head>

<body>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="main.js"></script>

    <div text-align="justify" class="title_text">
<span>
        Letter-to-letter network for an English language spell-checking database.
        </span>
    </div>

</body>

</html>

## main.js
var width = 720,
    height = 720,
    outerRadius = Math.min(width, height) / 2 - 10,
    innerRadius = outerRadius - 24;

var formatPercent = d3.format("05.2%");

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

var layout = d3.layout.chord()
    .padding(.04)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);

var path = d3.svg.chord()
    .radius(innerRadius);

var con = d3.select("body")
    .append("svg")
    .attr("width", width + 300)
    .attr("height", height);

var svg = con.append("g")
    .attr("id", "circle")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("circle")
    .attr("r", outerRadius);

var letter_table = d3.select("body")
    .append("table")
    .attr("class", "letter_table")
    .attr("border", "1");

var head_row = letter_table
    .append("tr");

head_row
    .append("th")
    .text("")
    .style('font-size', '10px');

head_row
    .append("th")
    .attr('id', 'table_header')
    .text("--")
    .style('font-size', '10px');


var test = 0;
var cfile = "";
var mfile = "";
cfile = "groups.csv";
mfile = "matrix.json";

function letter_dict(letters, matrix) {
    var ans = {};
    letters.forEach(function (d) {
        ans[d.name] = {};
    });

    matrix.forEach(function (row, i) {
        row.forEach(function (col, j) {
            //            console.log(i, letters[i], j, letters[j], col);
            ans[letters[j]['name']][letters[i]['name']] = col;
        })
    });

    return ans;
};

var vowels = ['a', 'e', 'i', 'o', 'u'];

d3.csv(cfile, function (letters) {
    d3.json(mfile, function (matrix) {

        console.log('letters', letters);
        console.log('matrix', matrix);

        var ans = letter_dict(letters, matrix);
        console.log('ans', ans);
        // build the table


        //        table_data.selectAll('td.table_data')
        //        .data(letters)
        //        .enter()
        //        .append(

        // Compute the chord layout.
        layout.matrix(matrix);

        // Add a group per neighborhood.
        var group = svg.selectAll(".group")
            .data(layout.groups)
            .enter().append("g")
            .attr("class", "group")
            .on("mouseover", mouseover);

        // Add a mouseover title.
        // group.append("title").text(function(d, i) {
        // return letters[i].name + ": " + formatPercent(d.value) + " of origins";
        // });

        // Add the group arc.
        var groupPath = group.append("path")
            .attr("id", function (d, i) {
                return "group" + i;
            })
            .attr("d", arc)
            .style("fill", function (d, i) {
                return letters[i].color;
            });

        // Add a text label.
        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 letters[i].name;
            });

        // Remove the labels that don't fit. :(
        groupText.filter(function (d, i) {
                return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength();
            })
            .remove();

        // Add the chords.
        var chord = svg.selectAll(".chord")
            .data(layout.chords)
            .enter().append("path")
            .attr("class", "chord")
            .style("fill", function (d) {
                return letters[d.source.index].color;
            })
            .attr("d", path);


        d3.select('.letter_table')
            .style('position', 'absolute')
            .style('right', '20px')
            .style('top', '80px')
            .style('width', '100px');

        d3.select('.title_text')
            .style('position', 'absolute')
            .style('right', '-20px')
            .style('top', '10px')
            .style('width', '325px')
            .style('font-family', 'sans-serif');

        table_data = d3.select('.letter_table')
            .selectAll('tr.table_data')
            .data(letters)
            .enter()
            .append('tr')
            .text(function (d, i) {
                return d.name;
            })
            .style('font-size', '12px')
            .style('color', function (d, i) {
                return _.contains(vowels, d.name) ? 'blue' : 'black';
            })
            .append('td')
            .attr('class', 'table_data')
            .attr('id', function (d, i) {
                return 'td-' + d.name;
            })
            .text('--')
            .style('color', function (d, i) {
                return _.contains(vowels, d.name) ? 'blue' : 'black';
            })
            .style('font-size', '12px');

        // Add an elaborate mouseover title for each chord.
        chord.append("title").text(function (d) {
            return letters[d.source.index].name + " → " + letters[d.target.index].name + ": " + formatPercent(d.target.value) + "\n" + letters[d.target.index].name + " → " + letters[d.source.index].name + ": " + formatPercent(d.source.value);
        });

        function mouseover(d, i) {
            chord.classed("fade", function (p) {
                return p.source.index != i && p.target.index != i;
            });

            d3.select('#table_header')
                .text(function (x) {
                    console.log('d', d, letters[d.index].name);
                    return letters[d.index].name;
                });

            d3.selectAll('.table_data')
                .text(function (x, j) {
                    var l1 = letters[d.index].name;
                    var l2 = letters[j].name;
                    var t = matrix[j][i];
                    return t > 0.0001 ? formatPercent(t) : '-----';
                });

        }

        function mouseout(d, i) {
            d3.select('#table_header')
                .text('');
        };

    });
});

## matrix.json
[[0.000371072813,0.126366559486,0.131666297854,0.057443915704,0.049873459507,0.092381523695,0.097061581744,0.160873312267,0.028975265018,0.217065868263,0.033786137234,0.127082127468,0.174856870229,0.057544197444,0.023246308691,0.114337751695,0.000000000000,0.141142217245,0.041973490427,0.086934228313,0.040086090934,0.142896935933,0.209812782440,0.063559322034,0.062726176116,0.082770270270],[0.039251257525,0.046302250804,0.000000000000,0.005098572400,0.006574603873,0.001399720056,0.001875586121,0.005314564780,0.013562173986,0.000000000000,0.009056078022,0.003087015242,0.054270038168,0.002625590758,0.020180861391,0.001821309319,0.000000000000,0.011198208287,0.002435708621,0.002656971053,0.033449914806,0.000000000000,0.012911555842,0.000000000000,0.020506634499,0.000000000000],[0.063494681290,0.001929260450,0.017407981117,0.003399048266,0.036641725352,0.000399920016,0.000000000000,0.001005458202,0.070233888608,0.000000000000,0.000696621386,0.004694835681,0.002146946565,0.062926658498,0.032136105860,0.001214206213,0.000000000000,0.019843225084,0.052622635097,0.014170512283,0.042148686216,0.000278551532,0.002905100065,0.100635593220,0.051869722557,0.000000000000],[0.044075204090,0.004501607717,0.000295050527,0.032857466576,0.158533230634,0.000000000000,0.000937793060,0.001867279517,0.029008918055,0.000000000000,0.003831417625,0.018972281176,0.000477099237,0.076842289515,0.027027027027,0.001011838511,0.000000000000,0.027547592385,0.001642687210,0.001211951708,0.033629270917,0.000835654596,0.017430600387,0.000000000000,0.022919179735,0.000000000000],[0.001525521563,0.137620578778,0.113963266209,0.308180376161,0.026876100352,0.128374325135,0.203188496405,0.265440965240,0.086791182904,0.191616766467,0.370254266806,0.223487040967,0.205749045802,0.092858393138,0.007357073520,0.185065263584,0.000000000000,0.220515117581,0.124844227937,0.235584766699,0.040175768989,0.561281337047,0.173337637185,0.140889830508,0.110373944511,0.300675675676],[0.010101426569,0.000803858521,0.000000000000,0.003172445049,0.013259242958,0.095780843831,0.000937793060,0.003303648377,0.020360087498,0.000000000000,0.004876349704,0.005016399768,0.003339694656,0.015622265010,0.012619424718,0.001315390064,0.000000000000,0.006539753639,0.003058796873,0.003356173962,0.016769796431,0.000000000000,0.004196255649,0.000000000000,0.010856453559,0.000000000000],[0.032283334708,0.000482315113,0.000000000000,0.019601178337,0.012296434859,0.000000000000,0.055329790560,0.000287273772,0.030388692580,0.000000000000,0.001393242773,0.003472892147,0.000119274809,0.274549273587,0.023297399479,0.001011838511,0.000000000000,0.013527435610,0.001925909142,0.000932270545,0.031835709802,0.000000000000,0.000645577792,0.000000000000,0.013872135103,0.000000000000],[0.001401830626,0.001286173633,0.124216272037,0.003852254702,0.003136003521,0.000999800040,0.077367927477,0.002010916403,0.000370183409,0.000000000000,0.005921281783,0.000900379446,0.000715648855,0.004507264134,0.002247994687,0.045836284529,0.000000000000,0.003180291153,0.077489520788,0.056682049131,0.000269034167,0.000000000000,0.064234990316,0.044491525424,0.009047044632,0.000000000000],[0.038138039086,0.103697749196,0.072951242900,0.245524586449,0.008170114437,0.189762047590,0.107689903095,0.171071531169,0.001346121487,0.065868263473,0.225705329154,0.175316740626,0.170801526718,0.066339926483,0.018035048281,0.097338864717,0.000000000000,0.142486002240,0.099920697859,0.239174008297,0.039278988432,0.206406685237,0.182052937379,0.199152542373,0.151387213510,0.195945945946],[0.000824606251,0.004180064309,0.000000000000,0.004192159529,0.001402948944,0.000399920016,0.000312597687,0.000000000000,0.000269224297,0.000000000000,0.001393242773,0.000000000000,0.000000000000,0.002056712760,0.000715271037,0.000202367702,0.000000000000,0.001119820829,0.000453155092,0.000186454109,0.000179356112,0.000000000000,0.000000000000,0.000000000000,0.000000000000,0.000000000000],[0.014842912509,0.000000000000,0.082614147673,0.000453206436,0.002310739437,0.000000000000,0.000000000000,0.000000000000,0.003129732458,0.000000000000,0.005572971090,0.007524599653,0.000000000000,0.017110099772,0.012925969448,0.000809470808,0.000000000000,0.013079507279,0.013651297156,0.000093227054,0.001883239171,0.000000000000,0.008392511298,0.000000000000,0.002412545235,0.000000000000],[0.107528655067,0.202733118971,0.046101644907,0.041128484024,0.043794014085,0.106778644271,0.073773054079,0.010341855789,0.047181558136,0.000000000000,0.061650992685,0.105537333591,0.004055343511,0.005207421670,0.059214223675,0.088232318122,0.000000000000,0.011287793953,0.030248102413,0.022700787769,0.092637431620,0.000000000000,0.028728211750,0.003177966102,0.033775633293,0.087837837838],[0.037931887524,0.002893890675,0.000147525264,0.008384319057,0.026408450704,0.000199960008,0.007814942169,0.010054582017,0.032879017331,0.000000000000,0.010449320794,0.006109717667,0.051407442748,0.002406791528,0.059418586829,0.001416573915,0.000000000000,0.024412094065,0.022034666365,0.003496014543,0.062595282934,0.000000000000,0.004196255649,0.002118644068,0.066344993969,0.003378378378],[0.125175228828,0.002250803859,0.000368813159,0.005211874009,0.105001100352,0.000399920016,0.036261331666,0.005027291008,0.314117449100,0.000000000000,0.042493904563,0.002443887067,0.008587786260,0.016278662699,0.212077862361,0.001315390064,0.000000000000,0.020649496081,0.012065254333,0.002610357526,0.160792754013,0.000000000000,0.067462879277,0.000000000000,0.048250904704,0.000000000000],[0.000494763750,0.114630225080,0.182414988567,0.068320870156,0.005226672535,0.128374325135,0.054548296343,0.166044240161,0.073767457513,0.221556886228,0.015325670498,0.094218277703,0.103411259542,0.031069490635,0.052265876462,0.110796316908,0.000000000000,0.097917133259,0.041293757789,0.062415512982,0.006994888351,0.072144846797,0.103938024532,0.021186440678,0.048250904704,0.064189189189],[0.037230972211,0.000803858521,0.000073762632,0.004305461138,0.018540933099,0.000000000000,0.002344482651,0.002010916403,0.018004374895,0.000000000000,0.007662835249,0.005016399768,0.119513358779,0.003019429372,0.039033362285,0.060103207528,0.000000000000,0.011153415454,0.053755522828,0.001864541090,0.040444803157,0.000278551532,0.003227888961,0.172669491525,0.077201447527,0.001689189189],[0.000742145625,0.000160771704,0.001991591060,0.000453206436,0.003108494718,0.000000000000,0.000000000000,0.000430910658,0.002086488306,0.000000000000,0.000000000000,0.000000000000,0.000000000000,0.001575354455,0.000715271037,0.000000000000,0.000000000000,0.000492721165,0.006627393225,0.000000000000,0.000179356112,0.000000000000,0.000000000000,0.002118644068,0.000000000000,0.000000000000],[0.120887276326,0.095659163987,0.068377959726,0.044187627464,0.187967649648,0.078984203159,0.130665833073,0.034760126400,0.027292613158,0.001497005988,0.005224660397,0.001221943533,0.002504770992,0.002669350604,0.130894599704,0.151371041182,0.000000000000,0.029428891377,0.001982553529,0.080361720971,0.128418975877,0.000000000000,0.048418334409,0.000000000000,0.042822677925,0.000000000000],[0.067452791292,0.042604501608,0.012760935310,0.072739632903,0.201034330986,0.018996200760,0.063613629259,0.022694627980,0.091031465590,0.000000000000,0.145593869732,0.047269920895,0.041388358779,0.098853492036,0.047361160783,0.045937468380,0.000000000000,0.088868980963,0.086552622635,0.077797976973,0.126266702538,0.001392757660,0.055519690123,0.000000000000,0.167671893848,0.000000000000],[0.182279211676,0.007234726688,0.083646824519,0.002379333787,0.039365096831,0.040391921616,0.004532666458,0.053289284688,0.072724213360,0.000000000000,0.006269592476,0.025467875748,0.000238549618,0.133511290040,0.047156797629,0.037842760295,0.001587301587,0.048824188130,0.252180808882,0.038829068196,0.092816787732,0.000000000000,0.005487411233,0.153601694915,0.028347406514,0.000000000000],[0.019337016575,0.090032154341,0.049273438076,0.039202356673,0.003191021127,0.090581883623,0.062832135042,0.049267451882,0.002221100454,0.302395209581,0.008707767328,0.043153900572,0.047352099237,0.013127953790,0.088284882236,0.044116159061,0.998412698413,0.034714445689,0.049280616291,0.034167715471,0.000448390279,0.007242339833,0.001291155584,0.037076271186,0.007237635706,0.010135135135],[0.016821967511,0.001286173633,0.000147525264,0.008044414231,0.013891945423,0.000000000000,0.000000000000,0.000000000000,0.028335857311,0.000000000000,0.000000000000,0.006431281754,0.000596374046,0.010458603186,0.028968476984,0.000000000000,0.000000000000,0.009092945129,0.000283221933,0.000093227054,0.001345170837,0.002228412256,0.000000000000,0.016949152542,0.000000000000,0.006756756757],[0.011420796570,0.000643086817,0.000000000000,0.007364604577,0.009242957746,0.000199960008,0.001719287277,0.005170927894,0.000201918223,0.000000000000,0.007662835249,0.000707440993,0.000238549618,0.002100472606,0.039646451745,0.001315390064,0.000000000000,0.002821948488,0.012801631358,0.006758961451,0.000000000000,0.000000000000,0.002582311168,0.000000000000,0.020506634499,0.003378378378],[0.003504576565,0.000000000000,0.000000000000,0.000000000000,0.017908230634,0.000000000000,0.000000000000,0.000000000000,0.002322059566,0.000000000000,0.000000000000,0.000771753811,0.000000000000,0.000481358306,0.004495989373,0.000000000000,0.000000000000,0.000179171333,0.000000000000,0.000000000000,0.002869697785,0.000000000000,0.000000000000,0.031779661017,0.003618817853,0.000000000000],[0.017316731261,0.011897106109,0.011506970569,0.014502605937,0.004841549296,0.025594881024,0.016567677399,0.029732835392,0.000000000000,0.000000000000,0.026471612679,0.092095954724,0.008229961832,0.005294941362,0.008123435345,0.007588788829,0.000000000000,0.019977603583,0.010875722216,0.026523097003,0.001076136669,0.005013927577,0.003227888961,0.010593220339,0.000000000000,0.038851351351],[0.005566092191,0.000000000000,0.000073762632,0.000000000000,0.001402948944,0.000000000000,0.000625195374,0.000000000000,0.003398956756,0.000000000000,0.000000000000,0.000000000000,0.000000000000,0.000962716611,0.002554539417,0.000000000000,0.000000000000,0.000000000000,0.000000000000,0.001398405817,0.003407766120,0.000000000000,0.000000000000,0.000000000000,0.000000000000,0.204391891892]]
	name	color
	a	#19a3ff
	b	#333333
	c	#333333
	d	#333333
	e	#19a3ff
	f	#333333
	g	#333333
	h	#333333
	i	#19a3ff
	j	#333333
	k	#333333
	l	#333333
	m	#333333
	n	#333333
	o	#19a3ff
	p	#333333
	q	#333333
	r	#333333
	s	#333333
	t	#333333
	u	#19a3ff
	v	#333333
	w	#333333
	x	#333333
	y	#333333
	z	#333333
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>letter-to-letter network</title>
	<style>
	@import url(style.css);
	#circle circle {
	fill: none;
	pointer-events: all;
	}

	.group path {
	fill-opacity: .5;
	}

	path.chord {
	stroke: #000;
	stroke-width: .25px;
	}

	#circle:hover path.fade {
	display: none;
	}

	</style>
	</head>

	<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="main.js"></script>

	<div text-align="justify" class="title_text">
	<span>
	Letter-to-letter network for an English language spell-checking database.
	</span>
	</div>

	</body>

	</html>
	var width = 720,
	height = 720,
	outerRadius = Math.min(width, height) / 2 - 10,
	innerRadius = outerRadius - 24;

	var formatPercent = d3.format("05.2%");

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

	var layout = d3.layout.chord()
	.padding(.04)
	.sortSubgroups(d3.descending)
	.sortChords(d3.ascending);

	var path = d3.svg.chord()
	.radius(innerRadius);

	var con = d3.select("body")
	.append("svg")
	.attr("width", width + 300)
	.attr("height", height);

	var svg = con.append("g")
	.attr("id", "circle")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	svg.append("circle")
	.attr("r", outerRadius);

	var letter_table = d3.select("body")
	.append("table")
	.attr("class", "letter_table")
	.attr("border", "1");

	var head_row = letter_table
	.append("tr");

	head_row
	.append("th")
	.text("")
	.style('font-size', '10px');

	head_row
	.append("th")
	.attr('id', 'table_header')
	.text("--")
	.style('font-size', '10px');


	var test = 0;
	var cfile = "";
	var mfile = "";
	cfile = "groups.csv";
	mfile = "matrix.json";

	function letter_dict(letters, matrix) {
	var ans = {};
	letters.forEach(function (d) {
	ans[d.name] = {};
	});

	matrix.forEach(function (row, i) {
	row.forEach(function (col, j) {
	// console.log(i, letters[i], j, letters[j], col);
	ans[letters[j]['name']][letters[i]['name']] = col;
	})
	});

	return ans;
	};

	var vowels = ['a', 'e', 'i', 'o', 'u'];

	d3.csv(cfile, function (letters) {
	d3.json(mfile, function (matrix) {

	console.log('letters', letters);
	console.log('matrix', matrix);

	var ans = letter_dict(letters, matrix);
	console.log('ans', ans);
	// build the table


	// table_data.selectAll('td.table_data')
	// .data(letters)
	// .enter()
	// .append(

	// Compute the chord layout.
	layout.matrix(matrix);

	// Add a group per neighborhood.
	var group = svg.selectAll(".group")
	.data(layout.groups)
	.enter().append("g")
	.attr("class", "group")
	.on("mouseover", mouseover);

	// Add a mouseover title.
	// group.append("title").text(function(d, i) {
	// return letters[i].name + ": " + formatPercent(d.value) + " of origins";
	// });

	// Add the group arc.
	var groupPath = group.append("path")
	.attr("id", function (d, i) {
	return "group" + i;
	})
	.attr("d", arc)
	.style("fill", function (d, i) {
	return letters[i].color;
	});

	// Add a text label.
	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 letters[i].name;
	});

	// Remove the labels that don't fit. :(
	groupText.filter(function (d, i) {
	return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength();
	})
	.remove();

	// Add the chords.
	var chord = svg.selectAll(".chord")
	.data(layout.chords)
	.enter().append("path")
	.attr("class", "chord")
	.style("fill", function (d) {
	return letters[d.source.index].color;
	})
	.attr("d", path);


	d3.select('.letter_table')
	.style('position', 'absolute')
	.style('right', '20px')
	.style('top', '80px')
	.style('width', '100px');

	d3.select('.title_text')
	.style('position', 'absolute')
	.style('right', '-20px')
	.style('top', '10px')
	.style('width', '325px')
	.style('font-family', 'sans-serif');

	table_data = d3.select('.letter_table')
	.selectAll('tr.table_data')
	.data(letters)
	.enter()
	.append('tr')
	.text(function (d, i) {
	return d.name;
	})
	.style('font-size', '12px')
	.style('color', function (d, i) {
	return _.contains(vowels, d.name) ? 'blue' : 'black';
	})
	.append('td')
	.attr('class', 'table_data')
	.attr('id', function (d, i) {
	return 'td-' + d.name;
	})
	.text('--')
	.style('color', function (d, i) {
	return _.contains(vowels, d.name) ? 'blue' : 'black';
	})
	.style('font-size', '12px');

	// Add an elaborate mouseover title for each chord.
	chord.append("title").text(function (d) {
	return letters[d.source.index].name + " → " + letters[d.target.index].name + ": " + formatPercent(d.target.value) + "\n" + letters[d.target.index].name + " → " + letters[d.source.index].name + ": " + formatPercent(d.source.value);
	});

	function mouseover(d, i) {
	chord.classed("fade", function (p) {
	return p.source.index != i && p.target.index != i;
	});

	d3.select('#table_header')
	.text(function (x) {
	console.log('d', d, letters[d.index].name);
	return letters[d.index].name;
	});

	d3.selectAll('.table_data')
	.text(function (x, j) {
	var l1 = letters[d.index].name;
	var l2 = letters[j].name;
	var t = matrix[j][i];
	return t > 0.0001 ? formatPercent(t) : '-----';
	});

	}

	function mouseout(d, i) {
	d3.select('#table_header')
	.text('');
	};

	});
	});