Matrix Visualizaton

Click the label in a column/row and drag-and-drop to a different column/row

<html>
	<style>
.rowLabel {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
                       
}
.columnLabel {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
                       
}	
	</style>	
	<body>
		<script src="https://d3js.org/d3.v4.min.js"></script>
		<script>
			var w_cell = 75;
			var h_cell = 75;
			var ind;
			var celldata;
			var mat = [];
			var drawBoxC, drawBoxR;
			
			var svg = d3.select('body').append('svg')
					.attr('height', '1000px')
					.attr('width', '1000px');
			d3.csv("data.csv", function(error, data){
				celldata = data;
				var j = 0;
				ind = Object.keys(data[0]);
				/*for (var i = 0; i < data.length; i ++){
					
				}*/
				var canvas = svg.append('g').attr('class', 'canvas');
				for (var i = 0; i < data.length; i++){
					
					// Create column g
					var column = canvas.append('g').attr('id', 'gc' + i)
						.attr('class', 'column_g')
						.attr('transform', function(){
							var x = w_cell*(i+1);
							var y = h_cell*0;
							return 'translate(' + x + ',' + y + ')';
						});
					column.append('rect').attr('class', 'columnLabel')
						.attr('width', w_cell).attr('height', h_cell)
						//.attr('x', w_cell*(i+1))
						.attr('y', h_cell*(0))
						.attr('style', 'stroke:white; fill:white; opacity: 0.5');
					column.append('text').attr('class', 'columnLabel')
						//.attr('x', w_cell*(i+1)+w_cell*1/10).attr('y', h_cell*(9)/10)
						.attr('transform', function(){
							var x = 0*w_cell*(i+1)+w_cell*1/10;
							var y = h_cell*9/10;
							return 'translate(' + x + ',' + y + ')rotate(-45)';
						})
						.text(function(){return data.columns[i]});
						
					mat[i] = [];	
					for (var j = 0; j < data.length; j++){
						mat[i][j] = data[i][ind[j]];	
						column.append('rect').attr('class', 'cell')
							.attr('id', 'cell' + j)
							.attr('width', w_cell).attr('height', h_cell)
							//.attr('x', w_cell*(i+1))
							.attr('y', h_cell*(j+1))
							.attr('style', function(){
								var str;
								if (data[i][ind[j]] == '1'){
									str = 'black';
								}
								else {
									str = 'white';
								} 
									
								return 'stroke: none; stroke-width: none; opacity: 0.5; fill:' + str;
							});
					}
					
					// Create row g
					var row = canvas.append('g').attr('id', 'gr' + i)
						.attr('class', 'row_g')
						.attr('transform', function(){
							var x = 0*w_cell;
							var y = h_cell*(i+1);
							return 'translate(' + x + ',' + y + ')';
						});
					
					row.append('rect').attr('class', 'rowLabel')
						.attr('width', w_cell).attr('height', h_cell)
						.attr('x', w_cell*(0))
						//.attr('y', h_cell*(i+1))
						.attr('style', 'stroke:white; fill:white; opacity: 0.5;');					
					row.append('text').attr('class', 'rowLabel')
						//.attr('x', w_cell*(i+1)+w_cell*1/10).attr('y', h_cell*(9)/10)
						.attr('transform', function(){
							var x = w_cell*0/10;
							var y = 0*h_cell*(i+1) + 1/2*h_cell;
							return 'translate(' + x + ',' + y + ')';
						})
						.text(function(){return data.columns[i]});					
				
					for (var j = 0; j < data.length; j++){
						row.append('rect').attr('class', 'cell')
							.attr('id', 'cell' + j)
							.attr('width', w_cell).attr('height', h_cell)
							.attr('x', w_cell*(j+1))
							//.attr('y', h_cell*(i+1))
							.attr('style', function(){
								var str;
								if (data[i][ind[j]] == '1'){
									str = 'black';
								}
								else {
									str = 'white';
								} 
									
								return 'stroke: none; stroke-width: none; opacity: 0.5; fill:' + str;
							});						
					}
		
				}
				
				for (var i = 0; i < data.length; i++){
					for (var j = 0; j < data.length; j ++){
						canvas.append('rect').attr('class', 'backgroundCell')
							.attr('width', w_cell).attr('height', h_cell)
							.attr('x', w_cell*(i+1))
							.attr('y', h_cell*(j+1))
							.attr('style', 'opacity: 0.5; stroke: black; stroke-width: 2px; fill: none;');							
					}
				}				
				
				var dx, dy;
				var mousedrag;
				d3.selectAll('.columnLabel')
					.on('mousedown', function(){
						var parent = this.parentNode;
						var temp = parent.cloneNode(true);
						d3.select(temp).selectAll('.cell')
							.attr('style', function() {
								var style = this.getAttribute('style').split(';');
								var str = 'stroke: red; stroke-width: 5px;';
								for (var s = 2; s < style.length; s++){
									if (s == style.length - 1){
										if (style[s] == ' fill:black')
										str = str + ' fill:red';
										else str = str + ' fill:white'; 
									} else {
										str = str + style[s]+ ';'; 
									}
								}
								return str;								
							});
						//d3.select(temp).selectAll('.columnLabel')
							//.attr('style', 'fill: white; opacity: 0.5');
							
						d3.select(temp).selectAll('text')
							.attr('fill', 'red');
							
						document.getElementsByClassName('canvas')[0].appendChild(temp);
						mousedrag = 1;
						dx = event.clientX - parent.getAttribute('transform').split('(')[1].split(',')[0];	
						
						d3.select('.canvas')
							.on('mousemove', function(){
								var x = event.clientX-dx;
								var y = parent.getAttribute('transform').split(')')[0].split(',')[1];
								if (x < w_cell){
									x = w_cell;
								} else if (x > w_cell * data.length){
									x = w_cell * data.length;
								}								
								if (mousedrag == 1)
								temp.setAttribute('transform', 'translate(' + x + ',' + y + ')');
							})
							.on('mouseup', function(){
								var x = event.clientX;
								var id = temp.getAttribute('id');
								temp.remove();
								mousedrag = 0;
								swapColumn(id, x);
							});
						//var c = 0;
					});
					
					
				d3.selectAll('.rowLabel')
					.on('mousedown', function(){
						var parent = this.parentNode;
						mousedrag = 1;
						
						var temp = parent.cloneNode(true);
						d3.select(temp).selectAll('.cell')
							.attr('style', function() {
								var style = this.getAttribute('style').split(';');
								var str = 'stroke: red; stroke-width: 5px;';
								for (var s = 2; s < style.length; s++){
									if (s == style.length - 1){
										if (style[s] == ' fill:black')
										str = str + ' fill:red';
										else str = str + ' fill:white'; 
									} else {
										str = str + style[s]+ ';'; 
									}
								}
								return str;								
							});

//d3.select(temp).selectAll('.rowLabel')
							//.attr('style', 'fill: white; opacity: 0.5');
							
						d3.select(temp).selectAll('text')
							.attr('fill', 'red');
						document.getElementsByClassName('canvas')[0].appendChild(temp);
						mousedrag = 1;						
						dy = event.clientY - parent.getAttribute('transform').split(')')[0].split(',')[1];	
						
						d3.select('.canvas')
							//.attr('style', 'fill: white; stroke: red; stroke-width: 5px; opacity: 0.5')
							.on('mousemove', function(){
								var y = event.clientY-dy;
								//var y = this.getAttribute('transform').split(')')[0].split(',')[1];
								if (y < h_cell){
									y = h_cell;
								} else if (y > h_cell * data.length){
									y = h_cell * data.length;
								}								
								if (mousedrag == 1)
								temp.setAttribute('transform', 'translate(' + 0 + ',' + y + ')');
							})
							.on('mouseup', function(){
								temp.remove();
								mousedrag = 0;
								var id = temp.getAttribute('id');
								var y = event.clientY;
								swapRow(id, y);
							});
						//var c = 0;
					});					
					
							
			});
			function swapRow(id, y){
				var row = parseInt(id.split('gr')[1]);
				
				var newRow;
				for (var i = 0; i < celldata.length; i++){
					if (y <= (i+2)*h_cell && y > (i+1)*h_cell){
						newRow = i;
					}
				}
				if (row == newRow) return;
				if (mat[row][newRow] == '1'){

}
				
				rearrangeCell(row, newRow);
				// change position
				var trans1 = document.getElementById('gr'+row).getAttribute('transform');
				var trans2 = document.getElementById('gr'+newRow).getAttribute('transform');
				
				document.getElementById('gr'+row).setAttribute('transform', trans2);
				//swapCell(row, newRow);
				
				document.getElementById('gr'+newRow).setAttribute('transform', trans1);
				swapCellc(row, newRow);
				
				var trans1 = document.getElementById('gc'+row).getAttribute('transform');
				var trans2 = document.getElementById('gc'+newRow).getAttribute('transform');
				
				document.getElementById('gc'+row).setAttribute('transform', trans2);
				//swapCell();
				
				document.getElementById('gc'+newRow).setAttribute('transform', trans1);	
				swapCellr(row, newRow);
				
				// change index
				document.getElementById('gr'+newRow).setAttribute('id', 'gr_'+ row);
				document.getElementById('gr'+row).setAttribute('id', 'gr_'+newRow);
				
				document.getElementById('gc'+newRow).setAttribute('id', 'gc_' + row);	
				document.getElementById('gc'+row).setAttribute('id', 'gc_' + newRow);	
				
				
				document.getElementById('gr_'+ row).setAttribute('id', 'gr'+ row);
				document.getElementById('gr_'+ newRow).setAttribute('id', 'gr'+newRow);
				
				document.getElementById('gc_' + row).setAttribute('id', 'gc' + row);	
				document.getElementById('gc_' + newRow).setAttribute('id', 'gc' + newRow);				
									
				//var c;
			}
			
			function findCell(groups, id, ind){
				for (var i = 0; i < groups.length; i++){
					if (groups[i].getAttribute('id') == id + ind){
						groups[i].setAttribute('id', id + '_' + ind);
						return groups[i];
					}
				}
			}
			
			function rearrangeCell(column, newColumn){
				document.getElementById('gr'+newColumn)
					.appendChild(findCell(document.getElementById('gr'+column).childNodes, 'cell', newColumn));

document.getElementById('gr'+newColumn)
					.appendChild(findCell(document.getElementById('gr'+column).childNodes, 'cell', column));
				
				document.getElementById('gr'+column)
					.appendChild(findCell(document.getElementById('gr'+newColumn).childNodes, 'cell', newColumn));
					
				document.getElementById('gr'+column)
					.appendChild(findCell(document.getElementById('gr'+newColumn).childNodes, 'cell', column));	
				d3.selectAll('#cell_' + newColumn).attr('id', 'cell' + newColumn);
				d3.selectAll('#cell_' + column).attr('id', 'cell' + column);

document.getElementById('gc'+newColumn)
					.appendChild(findCell(document.getElementById('gc'+column).childNodes, 'cell', newColumn));

// change position
				var trans1 = document.getElementById('gr'+column).getAttribute('transform');
				var trans2 = document.getElementById('gr'+newColumn).getAttribute('transform');
				
			
				
				rearrangeCell(column, newColumn);
				
				document.getElementById('gr'+column).setAttribute('transform', trans2);
				document.getElementById('gr'+newColumn).setAttribute('transform', trans1);
				swapCellr(column, newColumn);
				
				
				var trans1 = document.getElementById('gc'+column).getAttribute('transform');
				var trans2 = document.getElementById('gc'+newColumn).getAttribute('transform');

https://d3js.org/d3.v4.min.js