JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<div ng-app="app" ng-controller="DashboardController">
    
    <bar-graph graph-data="data"></bar-graph>
    <chord matrix="matrix"></chord>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <style> .chart div {
    width: 0;
    transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
}
.chart div {
    font: 10px sans-serif;
    background-color: steelblue;
    text-align: right;
    padding: 3px;
    margin: 5px;
    color: white;
    box-shadow: 2px 2px 2px #666;
}

JavaScript

angular.module('app', [])
	.directive('chord',[function() {
		
// Returns an array of tick angles and labels, given a group.
function groupTicks(d) {
  var k = (d.endAngle - d.startAngle) / d.value;
  return d3.range(0, d.value, 1000).map(function(v, i) {
    return {
      angle: v * k + d.startAngle,
      label: i % 5 ? null : v / 1000 + "k"
    };
  });
}


		return {
			restrict: 'E',
			scope: {
				matrix: '='
			},
			link: function chord(scope, element) {

				//Data
				var matrix = scope.matrix;
				//Layout
				var chord = d3.layout.chord()
					.padding(0.05)
					.sortSubgroups(d3.descending)
					.matrix(matrix);

				var width = 300;
				// console.log('w',width);
				var height = 300;
				var innerRadius = Math.min(width, height) * 0.41;
				var outerRadius = innerRadius * 1.1;

				var fill = d3.scale.ordinal()
					.domain(d3.range(4))
					.range(['#000000', '#FFDD89', '#957244', '#F26223']);//CHANGE it to colors from an attribute

				var svg = d3.select('body').append('svg')
					.attr({
						'width': width,
						'height': height
					})
					.append('g')
					.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
				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);
						};
					}

				svg.append('g').selectAll('path')
					.data(chord.groups)
					.enter().append('path')
					.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))
					.on('mouseover', fade(0.1))
					.on('mouseout', fade(1));

					var ticks = svg.append('g').selectAll('g')
						.data(chord.groups)
						.enter().append('g').selectAll('g')
						.data(groupTicks)
						.enter().append('g')
						.attr('transform',...